Best practices for optimizing the quality of your images

Last update: March 25, 2025

CREATED FOR:

  • User
TIP
Are you new to Dynamic Media? For a quick, high-level overview of Dynamic Media, see Work with Dynamic Media.

Optimizing image quality can be a time consuming process as many factors contribute to rendering acceptable results. The outcome is partly subjective because individuals perceive image quality differently. Structured experimentation is key.

Adobe Experience Manager includes more than 100 Dynamic Media image delivery commands for tuning and optimizing images and rendering results. The following guidelines can help you streamline the process and achieve good results quickly using some essential commands and best practices.

Enable Smart Imaging in Dynamic Media

Smart imaging:

  • Enabling Smart Imaging in Dynamic Media allows automatic optimization of image format, size, and quality based on client browser capabilities.
    Want to learn more? Go to Smart Imaging.
  • It enhances image delivery performance by dynamically adjusting these parameters.
  • You can evaluate Smart Imaging using the self-evaluation tool Snapshot.

Image formats:

  • Avoid using explicit fmt=webp or fmt=avif commands in a URL unless specifically required for a use case.
  • Smart Imaging automatically selects the best format, resulting in optimal bandwidth gains.

Default behavior:

  • When no format command is specified in the URL and Smart Imaging is not enabled, Dynamic Media image delivery defaults to using JPEG format.

By making informed choices about image formats and enabling Smart Imaging, you can significantly impact performance and user experience.

Best practices for selecting the source image

Essential considerations for working with source images:

  • Source image format:

    • Using lossless formats like PNG, TIFF, or PSD ensures that the image quality remains high without any compression artifacts.
    • These formats preserve all the original data, making them ideal for editing and further processing.

  • Source image size:

    • Starting with a high-resolution image provides more detail and flexibility.
    • When images need to be displayed at different sizes (for example, across devices or screen resolutions), having a larger source image allows for better scaling.
    • For images that support zoom (like product photos), aim for dimensions of around 2,000 pixels or more on the longest side.
    • Logos or banners that don’t require zoom can be uploaded in the largest size needed for their intended use.

By making these careful choices at the source level, you can contribute significantly to the overall quality of your visual content.

Best practices for image size

Dynamically reducing image size is one of the most common tasks. It involves specifying the size and, optionally, which downsampling mode is used to downscale the image.

  • For image sizing, the best and most straightforward approach is to use &wid=<value> and &hei=<value>,or just &hei=<value>. These parameters automatically set the image width in accordance to the aspect ratio.
  • &resMode=<value>controls the algorithm used for downsampling. Start with &resMode=sharp2. This value provides the best image quality. While using the downsampling value =bilin is faster, it often results in the aliasing of artifacts.

As a best practice for image sizing, use &wid=<value>&hei=<value>&resMode=sharp2 or &hei=<value>&resMode=sharp2

Best practices for image sharpening

Image sharpening is the most complex aspect of controlling images on your website, and where many mistakes are made. Take the time to learn more about how sharpening and unsharp masking works in Experience Manager by referring to the following helpful resources:

With Experience Manager, you can sharpen images on ingestion, on delivery, or both. Usually, however, it is best to sharpen images using only one method or the other, but not both. Sharpening images on delivery, on a URL, typically gives you the best results.

There are two image sharpening methods that you can use:

  • Simple sharpening ( &op_sharpen) – Similar to the sharpen filter used in Photoshop, simple sharpening applies basic sharpening to the final view of the image following dynamic resizing. However, this method is not user-configurable. The best practice is to avoid using &op_sharpen unless required.

  • Unsharp masking ( &op_USM) – Unsharp masking is an industry standard sharpening filter. The best practice is to sharpen images with unsharp masking following the guidelines below. Unsharp masking lets you control the following three parameters:

    • &op_sharpen=amount,radius,threshold

      • amount (0-5, strength of the effect.)
      • radius (0-250, width of the “sharpening lines” drawn around the sharpened object, as measured in pixels.)

      Keep in mind that the parameters radius and amount work against each other. Reducing radius can be compensated by increasing the amount. Radius allows finer control as a lower value sharpens only the edge pixels, whereas a higher value sharpens a wider band of pixels.

      • threshold (0-255, sensitivity of effect.)

      This parameter determines how different the sharpened pixels must be from the surrounding area before they are considered edge pixels and the filter sharpens them. The threshold parameter helps to avoid over-sharpening areas with similar colors, such as skin tones. For example, a threshold value of 12 ignores slight variations in skin tone brightness to avoid adding “noise,” while still adding edge contrast to high contrast areas, such as where eyelashes meet skin.

      For more information about how you set these three parameters, including best practices to use with the filter, see the following resources:

As a best practice, start with the unsharp mask radius parameter. Radius settings that you can start with are the following:

  • Website: 0.2-0.3 pixels
  • Photographic printing (250-300 ppi): 0.3-0.5 pixels
  • Offset printing (266-300 ppi): 0.7-1.0 pixels
  • Canvas printing (150 ppi): 1.5-2.0 pixels

Gradually increase the amount from 1.75 to 4. If sharpening is still not the way you want, increase the radius by a decimal point and run the amount again from 1.75 to 4. Repeat as necessary.

Leave the monochrome parameter setting at 0.

Best practices for JPEF compression (&qlt=)

  • This parameter controls JPG encoding quality. A higher value means a higher-quality image but a large file size; alternatively, a lower value means a lower quality image but a smaller file size. The range for this parameter is 0-100.

  • To optimize for quality, do not set the parameter value to 100. The difference between a setting of 90 or 95 and 100 is almost imperceptible. And yet 100 unnecessarily increases the size of the image file. Therefore, to optimize for quality but avoid image files becoming too large, set the qlt= value to 90 or 95.

  • To optimize for a small image file size but keep image quality at an acceptable level, set the qlt= value to 80. Values below 70 to 75 results in significant image quality degradation.

  • As a best practice, to stay in the middle, set the qlt= value to 85 to stay in the middle.

  • Using the chroma flag in qlt=

    • The qlt= parameter has a second setting that lets you turn on RGB chromaticity downsampling using the value ,1 or off using the value ,0.
    • To keep it simple, start with RGB chromaticity downsampling turned off (,0). This setting usually results in better image quality, especially for synthetic images with lots of sharp edges and contrast.

As a best practice for JPG compression use &qlt=85,0.