About the JPEG format

The JPEG format supports 24‑bit color, so it preserves the subtle variations in brightness and hue found in photographs. A progressive JPEG file displays a low-resolution version of the image in the web browser while the full image is downloading.

JPEG image compression is called lossy because it selectively discards image data. A higher quality setting results in less data being discarded, but the JPEG compression method may still degrade sharp detail in an image, particularly in images containing type or vector art.

Note:

Artifacts, such as wavelike patterns or blocky areas of banding, are created each time you save an image in JPEG format. Therefore, you should always save JPEG files from the original image, not from a previously saved JPEG.

Original, and optimized JPEG
Original image (left), and optimized JPEG with Low quality setting (right)

The JPEG format does not support transparency. When you save an image as a JPEG file, transparent pixels are filled with the matte color specified in the Save For Web dialog box. To simulate the effect of background transparency, you can match the matte color to the web page background color. If your image contains transparency and you do not know the web page background color, or if the background is a pattern, you should use a format that supports transparency (GIF, PNG‑8, or PNG‑24).

Optimize as JPEG

JPEG is the standard format for compressing photographs.

  1. Open an image and choose File > Save For Web.
  2. Choose JPEG from the optimization format menu.
  3. To optimize to a specific file size, click the arrow to the right of the Preset menu, and then click Optimize To File Size. Enter a number in the Desired File Size text box, and select either Current Settings, which optimizes for the current settings, or Auto Select GIF/JPEG, which automatically determines whether JPEG or GIF is the better format.
  4. Do one of the following to specify the compression level:
    • Choose a quality option (Low, Medium, High, and so on) from the pop‑up menu under the optimization format menu.

    • Click the arrow in the Quality menu and drag the Quality pop‑up slider.

    • Enter a value between 0 and 100 in the Quality box.

      The higher the Quality setting, the more detail is preserved in the optimized image, but the larger the file size. View the optimized image at several quality settings to determine the best balance between quality and file size.

  5. Select Progressive to display the image progressively in a web browser; that is, to display it first at a low resolution, and then at progressively higher resolutions as downloading proceeds.

    Note:

    Some browsers do not support progressive JPEGs.

  6. To preserve the ICC profile of the original image in the optimized file, select ICC Profile.

    Some browsers use ICC profiles for color correction. The ICC profile of the image depends on your current color setting.

  7. If the original image contains transparency, select a Matte color that matches the background of your web page. Transparent areas in your original image are filled with the Matte color.
  8. To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename, and click Save.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy