This document aims to address the difficulties faced by local users learning Framer due to a lack of Korean resources, by translating content from the official blog into Korean and adding practical information. We hope it provides some help to those using Framer.

One of the biggest considerations when uploading images in Framer is resolution settings. If the resolution is too high, the site might load slowly, and if it's too low, the images could appear blurry. This article will explore the image resolution options provided by Framer and guide you on the best settings for different situations.

Types of Image Resolution Options

When you upload images in Framer, multiple resolution versions are automatically generated. This allows you to display the most appropriate image based on the visitor's device. The primary options include the following:

• Auto

  This is the default setting when uploading images to Framer, automatically converting the uploaded image to various sizes. The browser selects the optimal size according to the device environment.

• Auto (Lossless)

  This option maintains the original image quality, avoiding issues such as color distortion, noise reduction, and banding that may arise during compression. However, the file size can increase 5 to 10 times, potentially impacting performance.

• Small, Medium, Large

  These options are fixed at 512px, 1024px, and 2048px, respectively. They are not commonly used in most projects and might be hidden in future updates.

• Full

  This option retains the original upload size. For instance, a 6000px image will remain 6000px on mobile as well, but with basic compression applied.

Choosing Resolution Options Based on Situations

• In most cases, Auto

  : This option offers the best balance between quality and performance.

• When high-quality images are needed, Auto (Lossless)

  : Best for areas where image detail is crucial, though it may slightly slow down loading speed.

• When you want to preserve the exact original size, Full

  : Suitable for instances where the image size must remain unchanged, such as large background images.

• When specific sizes are required, Small/Medium/Large

  : Generally unnecessary for typical websites. These options are not recommended unless absolutely needed.

Conclusion

Choosing the right image resolution goes beyond creating visually appealing screens; it directly impacts website performance and user experience. While Auto is usually sufficient, remember that options like Auto (Lossless) and Full can capture more detail for specific situations.

For more details, please refer to the document on optimizing images in Framer.

This article is translated and adapted from Framer's official blog post ‘Image resolution options’.