What image size should I use in Webflow?

Choosing the right image size in Webflow depends on where the image appears and how it is used. Images that are too small look blurry, especially on retina screens. Images that are too large slow down your site. The goal is to use the smallest file that still looks sharp at the display size.

General rule: 2x the display size

Webflow serves responsive images automatically, generating multiple resolution versions of each upload. But the quality of those versions depends on the source file. For crisp results on retina displays, upload images at 2x the maximum display dimensions.

For example, if an image displays at 600px wide, upload a source file that is 1200px wide.

Recommended sizes by use case

Hero images (full-width)

• Display width: up to 1920px

• Upload size: 2560–3840px wide

• File size target: 150–300 KB after compression

Content images (within a container)

• Display width: 600–800px

• Upload size: 1200–1600px wide

• File size target: 80–150 KB

Thumbnails and cards

• Display width: 300–400px

• Upload size: 600–800px wide

• File size target: 40–80 KB

Logos and icons

• Use SVG format whenever possible

• If raster: upload at 2x display size, typically under 20 KB

Background images

• Match the container's largest dimension at 2x

• For full-width sections: 2560–3840px wide

• Compress more aggressively since background images play a supporting role

Image formats

Format Best for Notes

WebP Photographs 25–35% smaller than JPG at same quality

JPG Photographs (fallback) Universally supported

PNG Graphics with transparency Larger than JPG/WebP for photos

SVG Icons, logos, illustrations Vector, scales without quality loss

What happens when you upload to Webflow

When you upload an image, Webflow:

1. Stores the original file.
2. Generates multiple resolution variants for responsive delivery.
3. Serves the appropriate size based on the visitor's screen and device pixel ratio.

This means you do not need to manually create multiple sizes — just upload one high-quality source file at the recommended dimensions.

Common mistakes

Uploading at display size only — Looks fine on standard screens but blurry on retina. Always go 2x.

Uploading at maximum camera resolution — A 6000px-wide photo from a DSLR is overkill for any web use and wastes bandwidth. Resize to the recommended range before uploading.

Not compressing — Even at the right dimensions, an uncompressed image can be several MB. Compress to WebP or optimized JPG before uploading.

Using PNG for photos — PNG files for photographs are significantly larger than WebP or JPG with no visible quality benefit.