Exporting high-resolution images from Figma for Webflow

How to best optimize images for your Webflow projects: a practical guide

As an avid web designer and webflow user, you certainly know how important it is to optimize images for the web. In this post, I'll show you how to export images from Figma as WebP files for your Webflow projects.

Step 1: Using the “Tiny Image Compressor” Plugin for Figma

I'm using the free Figma plugin Tiny Image Compressor to export images from Figma as WebP. After you've installed this plugin in Figma, you can start optimizing your images right away. In my example, I'm using a few Interrior images, which are quite large in their original size.

Step 2: Prepare the images in Figma

To prepare the images, simply paste them into a frame. This allows you to edit the image in the desired size and in the appropriate section. Scale and crop your image to suit your website.

Why WebP is superior to JPG and PNG
WebP is an image format developed by Google that offers more efficient compression than JPG and PNG. This results in smaller file sizes with comparable or better image quality. This results in faster web page load times, which improves both user experience and SEO. WebP supports lossy and lossless compression and provides transparency like PNG, but with a more efficient file size. These features make WebP the ideal choice for modern web design.

Step 3: Choose the right export settings

After you've edited your images, select all frames and open the Tiny Image Compressor plugin. Here you can select the format (WebP, PNG, JPEG) and scale. For Webflow projects, scaling of 2x is ideal to ensure high quality on Retina displays. A good balance between file size and image quality is achieved with a quality setting of 75%.

A little tip: For photos, a scaling of 2x is definitely sufficient. However, for graphics that contain text, I often use 3x to make the text look sharper.

Step 4: Upload images to Webflow

Once you've saved the optimized images, upload them to your Webflow project, choosing the 'High DPI' option in the image settings. In this way, your website recognizes whether your visitors are using a Retina display and automatically shows them a copy of the image in higher image quality.

What to do with images that have already been uploaded?

By the way, Webflow also has its own compression function to convert already uploaded images to WebP. Unfortunately, this feature doesn't cover images that you've uploaded directly to the CMS.

Since I usually have to crop all the pictures anyway and the intermediate step with the Tiny Image Compressor plugin only takes a few seconds, I always do it that way. It also gives me better control over the dimensions of the images.

Conclusion: Optimizing images is an important step in web development.

Optimizing images is an important step. Especially when it comes to the performance and visual quality of your Webflow website. This ensures that your images load quickly and look great in Webflow.