Image resolution options

Understanding Framer’s image resolution options is essential for optimizing both performance and visual quality in your projects.

This guide provides an overview of the available image resolution settings and their benefits.

  • Auto and Auto (Lossless) resize the image to multiple sizes, allowing the browser to choose the most suitable one for the user’s device.

  • Small, Medium, Large, and Full resize the image to fixed sizes of 512, 1024, 2048, and 4096 pixels, respectively.

Benefits of each resolution

  • Auto is the default setting when uploading an image to Framer and should be used in most cases. It selects the optimal image size for each device, balancing quality and performance.

  • Auto (Lossless) preserves the original image quality with no compression artifacts but increases file size by 5 to 10 times. Use this option only if you notice issues like color distortions, excessive noise reduction, or color banding.

  • Full keeps the image at its original upload size. For example, a 6000px-wide image will remain 6000px wide even on small mobile devices, though it will still be compressed.

  • Small, Medium, and Large are fixed sizes (512px, 1024px, 2048px) kept for specific use cases. Most users won’t need these options, and they may be hidden in future updates.

Choosing the correct image resolution option in Framer ensures that your projects look great and perform efficiently. In most cases, Auto is the best choice, balancing quality and performance. Use Auto (Lossless) or Full if you encounter specific image quality issues, and avoid Small, Medium, and Large unless necessary. For more details, refer to the article on how images are optimized in Framer.