Webflow Bandwidth

Advanced Image Optimization

Overview
What You Need to Know About Bandwidth
001
Diagnosing Bandwidth Problems
002
Optimizing Images
Why Optimize?
301
Webflow's Image Optimization Tools
10:37
301
Advanced Image Optimization
302
Using XnConvert to Optimize Images
305
AVIF Format
305
Best Practices for Image Optimization
306
Optimizing Videos
Optimizing Videos
401
Re-Hosting Videos & Large Assets
402
More
Optimizing Fonts
500
No items found.
Published
August 22, 2024
Updated
August 31, 2024
in lightbox

Best Practices

Initial Site Build

Here you can afford to be flexible in your use of less-efficient formats like JPEGs, if you want to, and then bulk-optimize pre-deployment.

Ideally, pre-optimize your images to AVIF or WEBP so that you can be certain of the fidelity level as you're building the site.

Ongoing Updates, e.g. Blog Posting

Unfortunately Webflow does not yet have an option to automatically optimize images as they're added to the CMS ( via Designer, Content Editor, or API ), which means that your client and content editors must be educated on how to prepare images properly.

Ideally, optimize your images before upload. This means teaching and tooling-up your editors. We like XnConvert.

Advanced Approaches

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

Automatic Optimization via Reverse Proxy

A reverse proxy can be constructed to identify and optimize all assets automatically, and also to specially prepare images for og:image as JPEGs so that they are broadly compatible with services like LinkedIn.

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/

Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.