Image Resolution Options

This guide offers a brief overview of the available image resolution settings and their benefits.

• Auto and Auto (Lossless) resize the image to various sizes, allowing the browser to select 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 will be the default setting when uploading an image to Framer, and should be used in 99% of the cases. This setting will select the best image size for each device, balancing performance and quality.

• Auto (Lossless) guarantees no image compression artifacts, preserving the original image quality, but makes the image between 5 and 10 times larger. This option is only recommended if you notice actual compression artifacts such as color issues, excessive noise removal, or color banding.

• Full ensures the image remains as large as the original upload. If you upload a 6000px-wide image, it will stay 6000px wide even on small mobile devices, even though it will be compressed.

• Small, Medium, and Large are historical fixed sizes (512px, 1024px, 2048px, respectively), and most users do not need to use these options. Even though they are maintained for specific use cases, they may be hidden in the future.

Summary

Selecting the right image resolution option in Framer ensures your projects are visually appealing and perform efficiently. In most cases, the Auto option is your best choice, providing a balance of quality and performance. Use Auto (Lossless) or Full if you encounter specific issues with image quality, and avoid Small, Medium, and Large unless you have a specific reason. For more details, refer to the help article on image optimization.