Optimize images for Webflow — compress hero backgrounds, CMS thumbnails and responsive images to stay under Webflow's 4 MB limit. Browser-based, free, no signup required.
All recommended Webflow image dimensions for 2026. Upload at these exact sizes and compress before uploading to avoid any quality loss from platform-side re-compression.
| Type | Width x Height | Aspect Ratio | Notes |
|---|---|---|---|
| Hero Background | 1920 x 1080 px | 16:9 | Full-width hero section — keep under 300 KB |
| CMS Thumbnail | 800 x 600 px | 4:3 | Blog and portfolio collection list cards |
| Background 2K | 2560 x 1440 px | 16:9 | Retina-ready background for large screens |
| Portfolio Image | 1600 x 1200 px | 4:3 | Lightbox and detail view in portfolio collections |
Open the Compress tool and drop your Webflow assets. Set quality to 80% — Webflow has a strict 4 MB per image limit, so pre-compressing is essential for hero backgrounds and portfolio images.
Convert large PNGs to WebP using the Convert tool. Webflow generates srcset variants automatically for responsive images, but a smaller source file means every variant is smaller too.
Download and upload to the Webflow Asset Manager or directly into CMS image fields. For hero sections, set the image to cover with lazy loading enabled for below-the-fold content.
Ready to optimize?
Use Compress to reduce file size without quality loss, or Convert to WebP for an extra 25-35% size reduction.
Webflow allows a maximum of 4 MB per image. This limit applies to all images uploaded to the Asset Manager and CMS image fields. For background images and hero sections, aim for under 300 KB after compression to maintain fast page loads.
Yes, Webflow automatically generates srcset variants at 500px, 800px, 1080px, 1600px, 2000px and 3200px widths. The browser picks the best size for the viewport. However, Webflow generates these from your original upload — a smaller, pre-compressed source means every variant is lighter.
For CMS thumbnails (blog cards, portfolio grids), upload images at 800x600 px compressed to under 100 KB. For detail/lightbox views, use 1600x1200 px under 250 KB. Compress with SammaPix before uploading to ensure every CMS entry loads fast.
Yes. Webflow serves images through its CDN and supports WebP. Converting to WebP with SammaPix before uploading reduces file size by 25-35% compared to JPEG. This is especially impactful for portfolio sites with many large images.
Image optimization is the single biggest factor in Webflow Lighthouse performance scores. Uncompressed hero images are the most common cause of poor LCP (Largest Contentful Paint). Compressing your images with SammaPix before uploading can improve your performance score by 10-25 points.
Optimize for Shopify
4 sizes - Product Image, Collection Banner, Slideshow / Hero, Featured Product
Optimize for WordPress
4 sizes - Featured Image, Thumbnail, Medium, Full / WooCommerce
Optimize for Wix
4 sizes - Hero Banner, Gallery Image, Logo, Blog Featured
Optimize for Etsy
4 sizes - Listing Image, Search Thumbnail, Shop Banner, Shop Icon
No uploads
All compression happens entirely in your browser. Your images never leave your device.
Batch process
Optimize multiple images at once with the same settings. Download all as ZIP in seconds.
Free forever
Core optimization tools are completely free. No watermarks, no ads, no file limits.