When you upload an image to Framer, it is optimized automatically. In most cases, you do not need to resize images manually or convert them to formats such as WebP or AVIF before uploading.

Best practices

For the best results:

• Upload JPEG, PNG, WebP, and GIF images without modifying them.

• Set Resolution to Auto in Fill → Image.

• Let Framer automatically resize and optimize images for different screen sizes.

• Upload SVG files as image fills by drawing a frame, selecting Fill, and choosing Image.

How Framer resizes images

Different devices require different image sizes. For example, downloading a 3000 × 2000 px image on a small mobile screen can waste bandwidth and slow down page loading.

To improve performance, Framer automatically generates resized versions of every uploaded JPEG, PNG, WebP, and GIF image.

Images are resized to the following maximum dimensions:

Framer measures the larger side of the image when creating resized versions.

For example:

• A 3000 × 2000 px image generates 512 px, 1024 px, and 2048 px variants.

• A 2000 × 3000 px image generates variants based on the 3000 px height.

Framer never upscales images. If an image is smaller than a target size, the original image is used instead.

How image delivery works

Framer generates srcset and sizes attributes for most image elements.

These attributes allow browsers to:

• Understand how large an image appears on the page.

• Choose the most appropriate image size for the visitor’s screen and device.

This helps reduce unnecessary downloads while maintaining image quality.

Understanding the Resolution setting

The Resolution dropdown in Fill → Image controls how image variants are served.

• Auto: Framer automatically selects the best image size for each visitor.

• Small: Forces the 512 px version.

• Medium: Forces the 1024 px version.

• Large: Forces the 2048 px version.

• Full: Forces the 4096 px version.

Framer still never upscales images. For example, if an image is 1500 px wide, selecting Large or Full will serve the original 1500 px image.

How Framer converts images to AVIF

Framer automatically converts most JPEG, PNG, WebP, and GIF images to AVIF.

AVIF provides significantly better compression than JPEG, PNG, and WebP while maintaining visual quality.

By default:

• Images are converted using AVIF lossy compression.

• Compression quality is set to 80.

Exceptions to AVIF conversion

Some images are handled differently:

Browser compatibility

Framer serves image formats based on browser support:

1. AVIF is served to browsers that support it.

2. WebP is served when AVIF is not supported.

3. A recompressed version of the original image is served if neither AVIF nor WebP is supported.

Why PNG images may use lossy compression

Although PNG is traditionally a lossless format, many uploaded PNG files contain screenshots and similar content.

Lossy compression often reduces the file size significantly while maintaining visual quality. Framer uses quality settings designed to avoid visible compression artifacts in most cases.

SVG optimization

Framer optimizes uploaded SVG files using SVGO.

This optimization applies to:

• SVG graphics uploaded to Framer.

• SVG files used as image fills.

Performance considerations for SVG files

SVG graphics render as <svg> elements on published sites.

Complex SVG files containing many paths, layers, or effects can impact page performance. If an SVG is particularly large or complex, consider using it as an image fill instead.

Troubleshooting image quality issues

If an image appears overly compressed or does not look as expected:

1. Verify that the original image has sufficient resolution.

2. Try using Auto (Lossless) in Fill → Image.

3. Republish the site and check the image again.

4. Contact Framer Support if the issue persists.