How to reduce the size of my visuals to improve the performance of my Webflow site?

Tutorial
3 min
Published on Mar 20, 2023
Updated on
Improve web performance tutorial 1 Digidop
Use AI to summarize this article
Key points

How to Reduce the Size of My Images to Improve the Performance of My Webflow Site?

One of the most effective ways to enhance your website's performance is to reduce page loading times. To optimize this process, it is crucial to find efficient methods for optimizing the images on your site.

Here is a two-step method to achieve this goal using ILOVEIMG:

Resize Your Image

There’s no need to have an image formatted at 3000x2500 pixels if you plan to display it within a layout of 800x500 pixels. The best way to ensure your image fits perfectly in its destination is to resize it as much as possible before uploading.

Reducing the image size significantly impacts the file size and is an easy win if done correctly.

Before-compressing-files
Example of a very large image 3000 x 1996 px = 3.7 MB

Step 1: Resize the Image

Tutorial-step-1-image-compression

Step 2: Maintain Aspect Ratio

Tutorial-step-2-image-compression

Save 80% with One Click: Compress Your File!

The JPEG/PNG file compression feature is incredible. It allows you to reduce (without losing quality, or nearly so) your file sizes by up to 90%. It couldn't be simpler—just upload your file and press the button. There you go, it's done!

Tutorial-step-3-image-compression
Before compression: 1.58 Mb vs After compression: 292 Kb

Your Image Has Been Reduced from 3 MB to Less than 300 Kb

After reducing size files for the web result

Link to the image optimization tool: ILOVEIMG

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.
News
Development

Webflow launches Source. Our take on this shift.

Webflow launches Source. Our take on this shift.
Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.
Documentation
AI

Make Your Website Visible in ChatGPT, Perplexity, and AI Answers

Make Your Website Visible in ChatGPT, Perplexity, and AI Answers
Florian Bodelot and Thomas Labonne from Digidop in front of a Webflow Conf 2026 visual announcing their trip to Boston.
Events
Webflow

Webflow Conf 2026: A Particularly Anticipated Edition

Webflow Conf 2026: A Particularly Anticipated Edition
Every great website  
starts with a conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.