Web Design with HTML and CSS

88

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

Above the Format drop-down menu is the Preset drop-down menu. This menu contains

pre-confi gured settings for many fi le formats; later in this lesson you will learn how to

store your own presets here.

In the upper-left corner is a toolbar with tools you can use to select sections (or slices) of

an image, zoom into, and sample colors from an image.

The large preview window allows you to compare diff erent fi le formats and compression

settings. You can compare up to four fi le formats and see the approximate download

times and fi le sizes.

2 Select the 2-Up tab at the top of the preview window.

3 Click to select the second image preview to assign settings.

From the Preset drop-down menu, select JPEG High. Note that the image preview

shows an image of the fi le in that format and displays information about the JPEG

settings in the lower-left corner.

Download information appears under the preview.

In this example, the fi le is reduced to 18.64K and it will take about 4 seconds to

download at the speed of about 56.6 kbps (kilobits per second).

You can change the speed and recalculate the download time by clicking the Select Download

Speed button ( ) located to the right of the download speed.

Since most viewers are not willing to wait for a download, this fi le size might be too

large for the viewer. You will lower the image quality in the following steps to reduce the

fi le size.

4 Click the Compression drop-down menu located below the Format drop-down menu

and choose Medium; note that the settings change along with the download information.

The JPEG image format uses lossy compression to save a fi le. Lossy means that the image

is compressed by discarding part of the data in the fi le.