Web Design with HTML and CSS

90

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

6 Name the fi le web0501_optimized, and make sure that Images only is selected in the

Format drop-down menu.

7 Make sure Settings are confi gured to Default Settings, and then click Save. Remember that

when creating a website, you should save this image fi le into the appropriate site folder.

You are now back to your image in Photoshop. We strongly recommend that you keep a

copy of your image in an uncompressed format. If you have Photoshop, save this fi le as a

PSD image. If you do not have Photoshop, save as a TIFF or PNG fi le. Avoid saving a fi le

multiple times as a JPEG, because the quality is reduced every time you save your fi le in

this lossy format.

8 Choose File > Save As and navigate to the web05lessons folder. In the File Name text

box, type WEB0501_done. Choose the Photoshop (PSD) format, and click Save.

9 Choose File > Close to close the fi le.

Creating a transparency eff ect in a JPEG image

Transparency doesn’t exist in the JPEG format, but you can simulate the transparency eff ect.

In following steps, you will use the Matting feature to match the background color of your

web page and then preview the image in your browser.

1 In Photoshop, choose File > Open. In the dialog box that appears, navigate to the

web05lessons folder, select the image named web0503.psd, and click Open. An image of

a smoothie with a transparent background appears.

When you save an image for the web, fi le size is a big concern. Since this is a

photographic image, JPEG is the best format to use to keep the fi le size small. However,

the web page has a pale yellow background, and by default, the JPEG will appear with

a white background. The solution is to use the Matte control, which becomes available

when you optimize this fi le.

2 Choose File > Save for Web & Devices. In the Save for Web & Devices window, choose

JPEG Medium from the Preset drop-down menu.