How images are optimized in Framer

TL;DR: Best practices

• JPEG, PNG, WebP, GIF, and TIFF images: upload them as they are and set the resolution to “Auto” in the Fill section under Image. Framer will automatically convert most images to AVIF and resize them to match their width on the site and the screen resolution.

• SVG images: upload them as image by drawing a frame and selecting the “Fill” option, then choosing 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:

  

  
  

  “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 1500 pixels 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.

• Images are converted to AVIF lossy with a quality setting of 80.

• Exceptions:

  • Selecting “Auto (Lossless)” in the “Resolution” options (found using “Fill” and then “Image”) uses WebP lossless instead of AVIF lossy. This results in larger file sizes but guarantees no compression artifacts.

  • Animated images remain WebP lossy, as Framer cannot currently convert animations to AVIF.

  • On the first request, WebP lossy (quality 90) is served while AVIF conversion occurs in the background. Once completed, AVIF replaces WebP.

  • If the AVIF or WebP version of an image is larger than the original, Framer serves the original.

• Framer serves AVIF in modern browsers (e.g., Safari 16.4+). For browsers without AVIF support, Framer serves WebP. If neither format is supported, a recompressed original file is served.

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.

Many PNG uploads, such as screenshots, can be significantly reduced in size using lossy compression with no visible artifacts when quality is set to 90.

We optimize SVG with SVGO

Framer optimizes uploaded SVG images using SVGO, affecting both SVG graphics (upon upload) and SVG image fills.

Tip: SVG graphics render as <svg> tags on live sites. If your SVG contains many paths and layers, this may affect site performance. Consider uploading the SVG as an image fill instead (draw a frame → select “Fill” → choose “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.