As an avid web designer and Webflow user, you certainly know how important it is to optimize images for the web. In this tutorial, I'll show you how to export high-resolution images from Figma for your Webflow projects, convert them to WebP, and keep the file size under control.
I've also recorded a video showing the complete process:
Step 1: Install the Tiny Image Compressor Plugin
I’m using the free Tiny Image Compressor plugin for Figma to compress and export images as WebP files.
After installing the plugin, you can start optimizing your images directly in Figma. In my example, I'm using a few interior images that 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 each image at the desired size and position it within the appropriate section of your website.
Scale and crop your image to suit the layout where it will appear in Webflow. Avoid exporting every image at the largest possible size. The file should be large enough for its biggest display area, but oversized images add unnecessary page weight.
Why Webp Is a Strong Choice for Web Images
WebP is an image format developed by Google that offers efficient lossy and lossless compression.
Compared with JPG and PNG, WebP can often produce smaller files at a similar visual quality, which can help reduce page weight and improve loading performance.
WebP also supports transparency, like PNG, while offering a more efficient file size in many cases.
This makes it a strong default for photographs, hero images, screenshots, and other visuals used in modern Webflow projects.
It's not the right format for every asset, though. Use PNG when you need lossless detail or transparency, and use SVG for simple logos, icons, and other vector graphics.
For most full-color website images, WebP is a practical first choice.
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 and scale.
For Webflow projects, scaling of 2x is usually ideal to ensure high quality on Retina displays. A good balance between file size and image quality is achieved with a quality setting of around 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 and place them in the relevant image elements or CMS fields.
Before publishing, check whether the image is cropped correctly, whether it has meaningful alt text, and whether it's sized appropriately for the layout. Images near the top of the page may need to load immediately, while images further down the page can usually use lazy loading.
What to Do With Images That Have Already Been Uploaded?
By the way, Webflow also has its own image optimization function for already uploaded images. This can help reduce file size and convert images to WebP in some cases.
That said, I usually still prepare the images in Figma first. I often need to crop them anyway, and the Tiny Image Compressor plugin only takes a few seconds. It also gives me better control over the dimensions and final quality of the image.
Conclusion
Optimizing images is an important step in web development, especially when it comes to the performance and visual quality of your Webflow website.
If you prepare the image correctly in Figma, export it in the right format, and keep the file size under control, you can make your website look sharper and load faster at the same time.
FAQs
WebP is usually the best starting point for photographs, hero images, screenshots, and other full-color website visuals. Use PNG when you need transparency or lossless detail, and SVG for simple logos and icons.
For most Webflow images, 2x is a good starting point. If an image appears at 600 x 400 pixels in the layout, export it at approximately 1,200 x 800 pixels. This helps it remain sharp on high-density screens without making the file unnecessarily large.
Start with a quality setting of around 75% and inspect the result at the image's intended display size. Increase the quality if you notice compression artifacts, especially around small text, fine lines, or interface details.
Webflow supports WebP and provides image optimization features. Even so, I still prefer to export a correctly sized and compressed image from Figma when I need control over the crop, dimensions, and final quality.
Rather than relying on a fixed High DPI setting, export the source image at around 2x its intended display dimensions and then check it at the actual Webflow breakpoints. This usually provides enough sharpness for high-density screens without creating unnecessarily heavy files.
