Webflow has built in native tools to help you optimize your images, both in your site assets and in CMS-stored images.
- Webflow currently supports optimization of JPEGs, PNGs, and WEBPs
- It can convert them to AVIF or WEBP.
- Original image versions still exist and will continue to work, so if someone has linked directly to e.g. a JPEG image that has been optimized to AVIF, that link will not break.
Using Webflow's Tools
Optimizing Static Site Assets
In the assets panel, you select the specific files you choose to optimize. Webflow currently supports optimization of JPEGs, PNGs, and WEBPs, and can convert them to AVIF or WEBP.
TIP: If you try to select all images in assets, the convert button will disable. Instead, filter on the extension, e.g. .jp and you'll get your .jpeg and .jpg images. There you can select all and convert. Do the same for .png, and also .webp ( if you're converting to .avif ).
When Webflow optimizes images, it keeps the original un-optimized images in your image store as well, as they may be referenced directly.
Optimizing Your CMS Assets
Webflow also has a tool to compress CMS Assets, here;
Notes;
- It will automatically compress all assets in all fields of all collections.
- It covers rich-text-embedded image assets also
- It can do WEBP or AVIF output, at your choice
- It cannot be undone, short of reverting to a backup
How do Webflow's optimization tools affect your site?
Open Graph og:image META tags
In your static pages, you will have entered a specific URL here, which will still work. If you've used e.g. a JPEG then you
In your CMS pages, you will have bound your og:image setting to an image field in the CMS. This will be optimized however that may actually cause problems with certain social media like LinkedIn.
Currently we can not restrict which fields are optimized. If you use a CMS-sourced image as an Open Graph source, then your best bet may be to do this manually, by creating a URL field, storing the JPEG image URL directly, and forming the <META> in your Template page's head manually. Remember to disable the OG image option in your Collection Page's settings if you do this. Other options;
- Possibly, script, to revert to .jpeg if you consistently know the original image was .jpeg
- Reverse proxy SEO de-optimizing images
What is NOT optimized?
- GIFs, likely due to some issues with edge fidelity in transparent GIF conversions to WEBP, and the possibility that a GIF may be animated.
- ? Are non-animated GIFs convertible
- RSS feed content. The source images would be optimized if you compressed CMS assets, however the RSS feed references the original version rather than the new versions.
- ? Is this only for historical RSS items, or do new items pick up the optimized image
Original non-optimized URLs
The original, non-optimized URL continues to function, and there are a few places that may use these original images versions;
- Direct references you might have to those images, for example in your static page
og:imagesettings - SEO references, such as in Google SERPs
- Other direct references, e.g. some companies will upload a JPEG to their Webflow site and reference it in their email signature templates.
- Your RSS feeds
