Optimize JPEG Images for Web in Adobe Photoshop

Optimizing JPEG images for web performance in Adobe Photoshop involves balancing image quality against file size to ensure fast browser load times. This guide outlines the essential Photoshop export settings—including quality levels, color space conversion, dimension scaling, and metadata removal—to help you achieve lightweight images without sacrificing visual clarity.

Use the "Export As" or "Save for Web (Legacy)" Dialog

Avoid using the standard "Save As" command, as it embeds extra document metadata and application-specific headers. Instead, navigate to File > Export > Export As (modern standard) or File > Export > Save for Web (Legacy). Both dialogs provide dedicated web compression algorithms and real-time previews of the file size and image appearance.

Set the Optimal Quality Level

Photoshop’s quality scale ranges from 1 to 100% (or 0 to 12 in standard dialogs).

  • Target 60% to 75% Quality: For standard web content, a quality setting between 60% and 75% (equivalent to "Medium" or low "High") provides the ideal balance. Human eyes rarely perceive the compression artifacts at standard viewing distances on screens, yet file size drops significantly compared to the 80–100% range.
  • Avoid 80% and Above: File size grows exponentially past 80% with negligible perceptual improvements on standard web displays.

Enable Progressive Scanning

In the export settings, select the Progressive option rather than Baseline:

  • Progressive JPEGs load in passes, rendering a low-resolution placeholder almost immediately that sharpens as data streams in.
  • For images larger than 10KB, progressive encoding typically yields slightly better compression ratios than baseline rendering.

Convert to sRGB Color Space

  • Always check the box for Convert to sRGB. Browsers standardly map colors using the sRGB profile. Failing to convert wide-gamut profiles (like Adobe RGB or ProPhoto RGB) can lead to washed-out or inaccurate colors online.
  • Uncheck Embed Color Profile unless precise brand color matching is strictly mandatory. Omitting the embedded profile removes several kilobytes of overhead from every image.

Scale to Native Display Dimensions

Never export full-resolution camera files to the web. Under the Image Size section:

  • Set the pixel width and height to match the maximum size the image will appear on your website layout.
  • For high-density (Retina) displays, scale the image to exactly twice the display dimensions (2x) and lower the quality slider slightly (around 50% to 60%) to offset the larger pixel footprint.

Strip Unnecessary Metadata

Digital cameras and Photoshop attach extensive EXIF data, such as GPS coordinates, exposure details, and edit history.

  • In the export settings, set Metadata to None.
  • If legal attribution is required, choose Copyright and Contact Info Only to strip out all non-essential camera and configuration tags.