Compressing Images in Figma For Webflow

Digital Tricks

September 14, 2020
Liam Matteson
Designer

Compressing images is extremely useful when trying to reduce load times on your website. Often times, a site with high load times will have a higher percentage of bounce rates, and generally will hurt the outcome of how people use your site. Check out our YT video to learn more.

To maintain image quality, try to refrain from exporting your screens early on, and instead drag your frames into your mockup frame. This will allow you to export at the highest quality, rather than reimporting images only to re-export them a second time.

Select your frame and chance the export size to 2x (JPG). This means that the image will double in size.

Download a plugin called AD Compressor. This will help get your image down to the size you need. It is also free for the first 500 images each month. Go ahead and compress your image, and download it.

Once your image is downloaded, upload it into Webflow, and make sure that you have HiDPI checked. HiDPI will give you a higher pixel density and make your images look extra nice. I recommend sizing your image initially, so that it isn't overly large. A good base size is anywhere from 800-1200px. Once this step is completed you're all set and ready to publish in Webflow!