Optimizing Assets

Why is optimization important?

If you upload a 4 MB image into assets and display it on your website as an _<IMG> element, every desktop user will have to download that full 4 MB image and your site will drag.

For Image elements, Webflow automatically creates media srcset image variants that are better optimized for mobile users, but it's best not to rely on these exclusively as your optimization strategy.

Optimize your source images first.

What, and how, to optimize

Use WEBP

Convert your larger JPEGs and PNGs to WEBP.

WEBP is much reduced in size, and supports transparency like PNG.

If you're just doing a few images, you'll find a lot of good online services that will convert your images to WEBP, up to 10 or 20 images per day for free.

When should I use WEBP?

Tools;

https://squoosh.app/

https://sourceforge.net/projects/abic/

https://www.xnview.com/en/xnconvert/

http://www.imagemagick.org/script/index.php

https://anywebp.com/software

For Photoshop users, the WebP plug-in;

http://www.telegraphics.net/sw/product/WebPFormat

GIMP

https://github.com/nathan-osman/gimp-webp

Optimize Videos & Animations

For any Videos or Animations, reduce them to "just acceptable quality", whatever that is for your site. Remember, performance and usability are an important part of making your UX acceptable, so hi-res media is not always a guaranteed win.

Watch Out for Background Images

I use Background images a lot, because they are idea for heros, carousels, and tiled card layouts. BUT, there is a big downside.

In HTML5, the _<img> element supports a feature called media _srcset, which allows a server to provide a range of sizes to the browser- and the browser will choose the smallest image it needs for the current display.

This is a great feature for mobile performance, and Webflow supports it.

However when you use CSS _{background-image} property to display your images, that srcset feature is not available. This means that if you're using large images as background, everyone gets them.

Even your mobile users.

Tips;

• For large background images, make them as small as possible in terms of pixel dimensions.
• > I usually use a standard for heros of Facebook's og:image size, which is 1200 x 627 px. Why? Because those same heros are often used as my OG image in my page SEO.
• Always WEBP them, aggressively.

Going Deeper

https://discourse.webflow.com/t/tools-for-optimising-images/68141

Systems for Automatic Optimization

Sygnal builds custom reverse proxy solutions that can automatically resize and WEBP all of the images on your site perfectly.

https://www.optily.co/

‍

‍