This document aims to alleviate the difficulties encountered by local users learning Framer due to a lack of Korean resources. The contents of the official blog have been translated and useful practical information added in Korean. We hope this will be of some help to those using Framer.

Summary

• Upload JPEG, PNG, WebP, GIF, TIFF images as they are, and set the resolution of Fill → Image to Auto. Framer automatically converts most images to AVIF and adjusts their size to fit the site and screen resolution.

• For SVG images, create a frame and then use the Fill → Image option to upload.

Image Extensions Automatically Resized

Mobile screens are smaller. For instance, if you upload a 3000×2000px image to a desktop layout and download it on a phone showing 390×890, it results in network waste. To prevent this, Framer resizes the images automatically, and the browser selects the optimal size to fit the display.

• All uploaded JPEG, PNG, WebP, AVIF, GIF, TIFF images are scaled down to sizes like 512, 1024, 2048, 4096px.

• Images are not enlarged. For example, if an image's width is 3000px, only versions with 512, 1024, 2048px are produced.

• Image resizing is based on the longer dimension of the image. In the example, if the height is 3000px, longer than the width, it converts into 512, 1024, 2048px heights.

• Almost every <img> tag automatically generates srcset and sizes attributes. sizes inform the browser of the image size, and srcset links all resized versions (+ original image size) for the browser to choose the optimal size.

• This logic can be controlled with the Resolution dropdown of Fill → Image.

The “Small”, “Medium”, “Large”, “Full” options forcibly use 512, 1024, 2048, 4096px sizes.

Even in this case, images are not enlarged. If the image width is 1500px, regardless of selecting “Large” or “Full” options, a 1500px image is provided.

Image Extensions Converted to AVIF

AVIF is a modern image format with better compression efficiency than JPEG, PNG, or WebP. Images are converted with AVIF lossy compression (Quality 80).

Exceptions

• Selecting Auto in fill → image → resolution applies WebP lossless compression instead of AVIF. Although this increases file size, it avoids compression artifacts.

• Animated images cannot currently be converted to AVIF, so they maintain WebP lossy compression.

• On first request, images are served as WebP (Quality 90), and once AVIF conversion completes in the background, AVIF is applied thereafter.

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

• In modern browsers (like Safari 16.4+), AVIF is provided, while browsers that don’t support AVIF receive WebP, and browsers supporting neither get a recompressed original file.

Why Use Lossy Compression for a Naturally Lossless Format like PNG?

A substantial number of PNG images uploaded by Framer users are screenshots. Such images can be significantly reduced in size with Quality 90 lossy compression, without noticeable quality degradation.

SVG Optimization with SVGO

Framer optimizes uploaded SVG images with SVGO. This applies to both SVG graphics (during upload) and SVG image Fill.

Note: SVG graphics are rendered with the <svg> tag on actual sites. If there are many paths or layers, it could impact performance. In such cases, creating a frame and uploading SVG with Fill → Image is recommended.

If Images Are Improperly Compressed?

If issues persist, please contact Framer Customer Support.

This post is a translated and adapted content of Framer's official blog ‘How images are optimized in Framer’.