This document aims to help domestic users learning Framer who face difficulties due to a lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope it will be of some help to you who are using Framer.

One of the most common concerns when uploading images in Framer is resolution settings. If the resolution is too high, the site may slow down, and if it's too low, the images might appear pixelated. In this article, we'll review the image resolution options provided by Framer and guide you on which settings to use in different situations.

Types of Image Resolution Options

Framer automatically generates multiple resolution versions when uploading images. Thanks to this, it can present the most suitable image for the visitor's device. By default, the following options are available.

• Auto
  This is the default setting when uploading images to Framer, and it automatically converts the uploaded image into various sizes. The browser selects and displays the optimal size based on the device environment.
  
  

• Auto (Lossless)
  This option maintains the original image quality, avoiding issues like color distortion, noise reduction, and
  banding that can occur during compression. However, the file size can increase by 5 to 10 times, potentially affecting performance.
  
  

• Small, Medium, Large
  Each is set to fixed sizes of 512px, 1024px, and 2048px. These are rarely used in most projects and may be hidden in future updates.
  
  

• Full
  This option retains the original upload size. For instance, if you upload a 6000px image, it remains at 6000px even on mobile, although basic compression is applied.

Selecting Resolution Options for Different Situations

• In most cases, Auto
  : This is the default option that best balances quality and performance.

• When high-quality images are needed, Auto (Lossless)
  : It's beneficial where image details are crucial, but loading speed may be slower.

• When you want to maintain the exact original size, Full
  : Suitable for cases where reducing the size is not an option, such as large background images.

• When specific sizes are required, Small/Medium/Large
  : These are rarely necessary on a typical website and are not recommended unless absolutely needed.

Conclusion

Choosing the right image resolution not only creates a visually pleasing display but also directly impacts website performance and user experience. In most cases, Auto is sufficient, but you may consider using Auto (Lossless) or Full for capturing finer details depending on the situation.

For more information, refer to the document on Optimizing images in Framer.

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