Image optimization guidelines for Webflow
20
/
09
/
2025
Written by
Category
reading time
share
When it comes to website performance, images are one of the biggest factors affecting loading speed. A slow site can hurt your SEO, increase bounce rates, and frustrate visitors. Since clients often ask me about the best way to upload images, I put together these best-practice guidelines for optimizing images in Webflow. Follow these steps to keep your site fast and visually consistent as you continue to add new content over time.
1. File format
- WebP (preferred) or AVIF for all images
- SVG for icons and logos (best option, otherwise WebP/AVIF also work)
- Avoid JPG, PNG, TIFF, HEIC — they’re less optimized and will slow your site down
2. Image dimensions
- Hero / full-width images: 2000–2400px wide
- Content images (half-width): 1200–1600px wide
- Thumbnails / icons: export at 2× displayed size for retina screens
- Never upload original camera-sized images — they are far too large
3. File size targets
- Large images: under 200 KB
- Content images: under 100 KB
- Thumbnails / icons: under 50 KB
Tip: use a compression tool like Squoosh that supports WebP/AVIF to get optimal quality at a minimal size.
4. Naming & accessibility
- Use lowercase, hyphenated filenames:
team-photo-sarah.webp - Add descriptive alt-text for SEO and accessibility when uploading to Webflow
5. Replacement policy
- When updating an image, replace the existing file in Webflow instead of uploading a new one with a different name
- This keeps the CMS clean and automatically updates all locations where the image is used
