How images are optimized in Framer

If you’re curious about the details, here are the specific optimizations we perform.

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 most images to AVIF and downscale them to match their width on the site (and the screen resolution).

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

We resize JPEG, PNG, WebP, AVIF, 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, AVIF, 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” and ”Auto (Lossless)” enable the logic above. (“Auto (Lossless)” also enables lossless compression – see the next section.)

  “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, WebP, GIF, and TIFF to AVIF

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

• Every uploaded JPEG, PNG, WebP, GIF, and TIFF image is converted to AVIF lossy, with the quality parameter of 80.

  Exceptions:

  • If you select “Auto (Lossless)” in Fill → Image → Resolution, we use WebP lossless instead of AVIF lossy. This is an escape hatch that makes the image 5-10× larger but guarantees it will have no compression artifacts.

    (We use WebP lossless and not AVIF lossless because the latter is worse.)

  • If your image is animated, we use WebP lossy. We can’t currently convert images into animated AVIF.

  • On the first image request, we still use WebP lossy, with the quality parameter of 90, and kick in AVIF conversion in the background. AVIF replaces WebP when the conversion is done.

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

• We serve AVIF images in all browsers that support AVIF (= all modern browsers, down to Safari 16.4). For browsers that don’t support AVIF, we serve WebP. For browsers that don’t support WebP, we serve a recompressed version of the original file.

  • To determine if a browser supports AVIF/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 lossy compression 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 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.