Image resolution options
Learn how Framer’s image resolution settings affect performance and visual quality.
Framer provides several image resolution options that help balance image quality and page performance. Understanding how each option works makes it easier to choose the right setting for your project.
How image resolution works in Framer
Framer can automatically resize images or serve them at fixed dimensions depending on the selected resolution setting.
Auto and Auto (Lossless) generate multiple image sizes, allowing the browser to select the most appropriate version for the user’s device.
Small, Medium, Large, and Full generate fixed image sizes.
Image resolution options
Resolution | Size behavior | Best used for |
|---|---|---|
Auto | Generates multiple image sizes and lets the browser choose the most appropriate version for the device. | Recommended for most images. Balances visual quality and performance automatically. |
Auto (Lossless) | Generates multiple sizes but preserves the original image quality without compression artifacts. File sizes may increase by 5–10×. | Use when you notice visual issues such as color distortions, heavy noise reduction, or color banding. |
Small | Fixed width of 512px. | Rarely needed. Intended for very small images or specific legacy use cases. |
Medium | Fixed width of 1024px. | Rarely needed. May be used when a predictable medium-sized image is required. |
Large | Fixed width of 2048px. | Rarely needed. Useful only when a fixed large size is necessary. |
Full | Keeps the image at its original upload size (up to 4096px). The image is compressed but not resized. | Use when preserving the original resolution is important. |
Choosing the best resolution setting
In most cases, Auto is the recommended option because it automatically delivers the best balance between image quality and loading performance.
Use Auto (Lossless) if compression causes visible artifacts, or Full when you need to maintain the original image size. The Small, Medium, and Large options exist mainly for specific or legacy use cases and are rarely required.
For more details, see how images are optimized in Framer.
What is the recommended image resolution setting to use in Framer for most projects?
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.
When should I use the Auto (Lossless) or Full image resolution options in Framer?
Use Auto (Lossless) if you notice issues like color distortions, excessive noise reduction, or color banding, as it preserves the original image quality with no compression artifacts but increases file size by 5 to 10 times. Use Full if you want to keep the image at its original upload size, though it will still be compressed.
What are the fixed image size options in Framer and are they recommended?
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.
Updated