How are images optimized in Framer?

If you’re curious about the details, here are the exact optimizations we make. (Note: this logic might – and likely will – change in the future.)

TL;DR: Best practices

• JPEG, PNG, WebP, GIF, TIFF images: upload them as-is and keep “Fill” → “Image” → “Resolution” set to Auto. Framer will automatically convert non-WebP images to WebP and downscale them to match their width on the site (and the screen resolution).

• AVIF images: for the time being, ensure these aren’t too big – for a mix of reasons, they are served as-is and aren’t optimized. (We’ll be improving this.) Or upload them as JPEGs/PNGs/WebPs.

• SVG images: upload them as image fills (draw a frame → “Fill” → “Image”).

We resize JPEG, PNG, WebP, GIF, and TIFF images to pick the best size

Mobile users have smaller screens. If you upload a 3000×2000 px image for your desktop layout, downloading that image on a 390×890 phone screen would be a waste of network. To avoid that, Framer resizes images automatically and lets the browser pick the best size for the screen.

• Every uploaded JPEG, PNG, WebP, GIF, and TIFF image is scaled down to 512, 1024, 2048, and 4096 pixels.

  • We never upscale images. So, e.g., if an image is 3000 px wide, we’ll scale it down to 512, 1024, and 2048 px only.

  • When scaling images, we measure the size along the larger side of the image. In the above example, if the image is 3000 px tall and taller than it’s wider, we’ll generate variants with 512, 1024, and 2048 px height.

• For every <img> tag (with rare exceptions), we generate srcset and sizes attributes. sizes tell the browser how large the image is, and srcset links to all resized variants (+ the original image size) so the browser can pick the best variant.

• This logic is controlled by the “Resolution” dropdown in Fill → Image.“Auto” (default) enables the logic above. “Small”, “Medium”, “Large”, and “Full” just skip the logic and force the 512, 1024, 2048, and 4096 px size correspondingly.We still never upscale images. If the image is 1500 px wide, “Large” and “Full” options will serve the 1500px-wide image.

We convert JPEG, PNG, GIF, and TIFF to WebP

WebP is an image format that compresses images much better than JPEG or PNG.

• Every uploaded JPEG, PNG, GIF, and TIFF image is converted to WebP lossy. JPEG, PNG, GIF and TIFF images use the quality parameter of 90.

  • If the converted WebP image becomes larger than the original one, we still serve the original image.

• We serve the WebP images in all browsers that support WebP (= all browsers Framer supports except Safari 13). For browsers that don’t support WebP, we serve a recompressed version of the original file.

  • To determine if a browser supports WebP, we check the Accept header.

• This logic is always on and cannot be disabled. Even if you pick “Resolution: Full” in Fill → Image, we’ll still convert the image.

Q: “Why use WebP lossy for PNG if PNG is lossless?” We noticed that many PNG images our users upload to Framer are things like screenshots! These images get much smaller if you compress them with lossy compression, and because we keep the quality at 90, they get no visible compression artifacts.

We don’t touch AVIF images

For a mix of reasons, we keep AVIF images as-is. We don’t downscale them and don’t convert them into anything else.

We optimize SVG with SVGO

We optimize all uploaded SVG images using SVGO. This affects both SVG graphics (only upon upload) and SVG image fills.

ℹ️ Tip: SVG graphics render as the <svg> tag on a live site. If your SVG has lots of paths and layers, this can affect the site’s performance. If that’s the case, consider uploading the SVG as an image fill instead (draw a frame → select “Fill” → select “Image”).

What can I do if my image is compressed poorly?

Please let us know about this case in our #support space. This may be an edge case we didn’t know about and should support.