User Guide Cancel

Optimizing images

  1. Photoshop Elements User Guide
  2. Introduction to Photoshop Elements
    1. What's new in Photoshop Elements
    2. System requirements | Photoshop Elements
    3. Workspace basics
    4. Guided mode
    5. Making photo projects
  3. Workspace and environment
    1. Get to know the Home screen
    2. Workspace basics
    3. Preferences
    4. Tools
    5. Panels and bins
    6. Open files
    7. Rulers, grids, and guides
    8. Enhanced Quick Mode
    9. File information
    10. Presets and libraries
    11. Multitouch support
    12. Scratch disks, plug-ins, and application updates
    13. Undo, redo, and cancel actions
    14. Viewing images
  4. Fixing and enhancing photos
    1. Resize images
    2. Cropping
    3. Process camera raw image files
    4. Add blur, replace colors, and clone image areas
    5. Adjust shadows and light
    6. Retouch and correct photos
    7. Combine Photos
    8. Sharpen photos
    9. Transforming
    10. Auto Smart Tone
    11. Recomposing
    12. Using actions to process photos
    13. Photomerge Compose
    14. Create a panorama
    15. Moving Overlays
    16. Moving Elements
  5. Adding shapes and text
    1. Add text
    2. Edit text
    3. Create shapes
    4. Editing shapes
    5. Painting overview
    6. Painting tools
    7. Set up brushes
    8. Patterns
    9. Fills and strokes
    10. Gradients
    11. Work with Asian type
  6. Quick Actions
  7. Guided edits, effects, and filters
    1. Guided mode
    2. Filters
    3. Guided mode Photomerge edits
    4. Guided mode Basic edits
    5. Adjustment filters
    6. Effects
    7. Guided mode Fun edits
    8. Guided mode Special edits
    9. Artistic filters
    10. Guided mode Color edits
    11. Guided mode Black & White edits
    12. Blur filters
    13. Brush Stroke filters
    14. Distort filters
    15. Other filters
    16. Noise filters
    17. Render filters
    18. Sketch filters
    19. Stylize filters
    20. Texture filters
    21. Pixelate filters
  8. Working with colors
    1. Understanding color
    2. Set up color management
    3. Color and tonal correction basics
    4. Choose colors
    5. Adjust color, saturation, and hue
    6. Fix color casts
    7. Using image modes and color tables
    8. Color and camera raw
  9. Working with selections
    1. Make selections in Photoshop Elements
    2. Saving selections
    3. Modifying selections
    4. Move and copy selections
    5. Edit and refine selections
    6. Smooth selection edges with anti-aliasing and feathering
  10. Working with layers
    1. Create layers
    2. Edit layers
    3. Copy and arrange layers
    4. Adjustment and fill layers
    5. Clipping masks
    6. Layer masks
    7. Layer styles
    8. Opacity and blending modes
  11. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
    4. Creating Photo Reels
  12. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits - Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
  13. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

About optimizing

Optimization for the web is the process of compressing images and setting display options for optimal use on the Internet. When you put images on the Internet, file size becomes important; you want to achieve a file size that is small enough to allow a reasonable download time, but large enough to preserve colors and details to your satisfaction. There are three major graphic file formats that are used on the web: GIF, JPEG, and PNG.

When you put images on the web, you need to think about file size. The goal is a file size that is small enough to allow reasonable download times but that preserves colors and details to your satisfaction.

Three major graphic file formats are used on the web: GIF, JPEG, and PNG. You can optimize images in these formats using one of the following methods:

  • To precisely optimize an image for use in web authoring applications, such as Adobe® Dreamweaver®, you can use the Save For Web command. The Save For Web dialog box lets you preview your image in different file formats and with different optimization settings. You can also set transparency and animation settings.

  • For basic optimization, you can use the Save As command. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method.

Using the Save For Web dialog box

Use the Save For Web dialog box to preview the effects of different optimization options on a photo you want to share on the web. The process is simple. Open a photo, and choose File > Save For Web. Then choose a format from the file format menu (GIF, JPEG, PNG‑8, or PNG‑24) and set options as desired. (The file format menu is directly beneath the Preset menu.) This saves a copy of your file, without overwriting the original image.

Save For Web dialog box

A. Toolbox B. Eyedropper color C. Optimization settings and flyout menu for more options D. Image Size E. Animation options F. Zoom level menu G. Browser preview menu H. Original Image I. Optimized image 

Optimization options appear on the right side of the Save For Web dialog box. In addition to selecting a web file format, you can choose compression and color options, preserve background transparency or set background matting, and change the size of the image. You can use predefined settings (by choosing a format from the Preset menu), or select format-specific options to fine-tune the optimization.

The image windows show your original image (on the left) and a preview of the optimized image (on the right). Under each window is optimization information—the current settings, the size of the optimized file, and the estimated download time. As you make adjustments, the information under the optimized image changes to reflect your new settings.

A small toolbox is located in the upper-left corner of the dialog box. To view different areas of an image, select the Hand tool and drag to bring those areas into view. To zoom in on an image, select the Zoom tool and click in a view; then hold down Alt, and click again to zoom out. (Alternatively, you can use the Zoom box at the bottom of the dialog box.) To create matte colors, use the Eyedropper Color tool.

Optimized file formats for the web

You can choose between four formats for the web. Use the following guidelines when choosing the format for your web image:

JPEG

In most cases, this is the best format in which to save photographs.

PNG‑24

Like JPEG, this is a good format for photographs. Choose PNG‑24 rather than JPEG only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) PNG‑24 files are often much larger than JPEG files of the same image.

GIF

GIF is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. Also, if you want to export an animated image, you must use GIF.

PNG‑8

PNG‑8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation).

Images in GIF and PNG‑8 formats, sometimes called indexed-color images, can display up to 256 colors. To convert an image to indexed-color format, Photoshop Elements builds a color lookup table. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.

JPEG and PNG‑24 files support 24‑bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, background transparency or matting, color display, and the method a browser should use to display the image while downloading.

The appearance of an image on the web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. You may want to preview images in different browsers and on different platforms to see how they will appear on the web.

Apply a preset optimization setting

You can quickly and easily optimize an image for the web by choosing a predefined optimization setting, called a preset, from the Preset menu near the upper-right corner of the Save For Web dialog box. Presets are tailored to meet the optimization needs of different types of images.

The name of each preset reflects its file format and quality level. For example, choose JPEG High to optimize an image in JPEG format with high image quality and low compression. Choose GIF 32 Dithered to optimize an image in GIF format, reduce the number of colors to 32, and apply dithering.

  1. In the Save For Web dialog box, choose a setting name from the Preset menu, and then click OK.
  2. In the Save Optimized As dialog box, type a filename and click Save.
    Note:

    If you change the options in a preset, the Preset menu displays the word “[Unnamed]”. You cannot save a custom setting; however, the current settings appear in the Save For Web dialog box the next time you display it.

Get help faster and easier

New user?