Optimizing images in Photoshop Elements


Optimizing images for web pages is a process of compressing an image and adjusting its display parameters for optimal use in the Internet environment. When placing a file on the Internet, the size of the file is important: the file size should be set so that the time for downloading it is minimal, and the image quality - the maximum. To place images on the Internet, three main formats are used: GIF, JPEG and PNG.

When placing an image on a network, consider the file size. The file size should be set so that the time to load it is minimal, and the image quality - the maximum.

Currently, in web design technology, there are three main formats of pixel graphics - GIF, JPEG and PNG. Optimized images in these formats can be created in the following ways:

To achieve accurate image optimization for use in web development applications (for example, Adobe® Dreamweaver®), you can select the Save For Web command.
The Save For Web dialog box allows you to preview images in different formats and with different optimization settings.
In it, you can also set the transparency and animation options.

To get optimized images in the main formats, you can use the Save As command.
Depending on the file format, you can specify the image quality, background transparency or background (filling in background areas with some color), the color display option and the download method.

Working with the "Save For Web" dialog box

Use the Save For Web dialog box to preview the results of applying various photo optimization settings for publication on the network.
It's a simple process. Open the photo and choose File> Save for Web.
Then select the format from the drop-down list of formats (GIF, JPEG, PNG-8 or PNG-24) and set additional parameters at your discretion.
(The list of formats is located directly at the bottom of the "Settings" list.)
This operation saves a copy of the file without making changes to the original image.

"Save For Web" Dialog Box

"Save For Web" Dialog Box

A. The tool palette
B. The color picker
C. The optimization of the settings and the pop-up menu with the additional parameters
D. Image size
E. Animation parameters
F. The list of scale options
G. The preview menu in the browser
H. The original image
I. Optimized image

Optimization parameters appear on the right side of the "Save for Web" dialog box. In the "Loss of compression" field, you can set the loss rate that is acceptable for compression.
In the "Number of colors" drop-down list, you can select the number of colors that are used when saving the image.
The "Substrate" field contains commands that provide filling of background areas with some color (In this case, the original image should have transparent areas).
The Image Size tab also allows you to control the size of the image. You can use the ready-made settings (selecting the appropriate option from the "Settings" list) or specify the parameters of the selected format for fine tuning the optimization algorithm.

The original image in the window (left) and the optimized image in the preview window (right).
The corresponding information about the image is displayed at the bottom of each viewing window, for example, the file format, the file size, the time of transfer of such file at the appropriate speed.
As you change the settings, this information also changes.

In the upper left corner of the dialog box is a small tool palette.
The "Hand" tool is designed for viewing various areas of the image by dragging the image fragments in the viewing field.
The Zoom tool is used to change the scale: to zoom in, click the tool on the image, to zoom out, click the tool while holding down the Alt key.
(You can also use the list of scales at the bottom of the dialog box to change the scale.) The Eyedropper tool is used to select the background color.

Optimized file formats for web pages

You can use 4 file formats to place an image on the Internet. When choosing the aspect ratio, follow these guidelines:

  • JPEG The JPEG format may be the best option for saving images intended for publication on the network.
  • PNG-24 Like the JPEG format, this format is quite suitable for saving photos. If the image contains transparent areas, it is preferable to select the PNG-24 format instead of JPEG. (JPEG does not support transparency, in this case you should fill the areas with the color of the background.) Files in PNG-24 format often have a larger size than JPEG versions of the same file.
  • GIF Typically, the GIF format is used to work with font fragments, buttons, logos and other images that have a limited number of colors and sharp clear contrasts. When exporting an animated image, the GIF format is also used.
  • PNG-8 The PNG-8 format actually duplicates the functions of the GIF format, but it is less known. Use it for the same purpose. and the format of GIF (except for animation).

Format GIF and PNG-8 allow you to save images using the palette of indexed colors (no more than 256 shades of color). To convert images to the format of indexed colors, Photoshop Elements creates a special table of indexed colors. If the color in the original image is not present in the table, the application selects the nearest color in the table or simulates this color by combining the available colors.

Files in JPEG and PNG-24 format support 24-bit color depth, so they can support up to 16 million colors. Depending on the file format, you can specify the image quality, transparency of the background or the background (filling in background areas with some color), as well as the way the browser displays colors when downloading.

The appearance of the image in the network also depends on the colors. displayed by the computer platform, operating system, monitor and web browser. To evaluate the appearance of images in different web browsers and on different platforms, use the appropriate preview windows.

Many CMS have plugins to optimize images, for sample EWWW optimizer for Wordpress. Or you can simply use our online image compressor.