How to pick the right format for your image in PhotoShop

PhotoShop CS3 Designer series

How to pick the right format for your image in PhotoShop

This tutorial will show you how to pick the right format for an image and save it for use on the web

This tutorial assumes you already have your image open in Photoshop

It is important to use the proper format and quality settings for images on the web

The preferred format for photographs is JPEG

1) Go to File…

2) …and select Save As

3) Select JPEG from the list

4) Click Save

Saving at maximum quality will yield large images, which will take longer to download and is usually not recommended for websites

Notice the numbers which show the estimated size the image will be once it is saved

5) Set the quality to 0

See that the file size is much smaller

6) Click OK

Our file has now been saved. However, saving at such a low quality sometimes has undesirable results

We will now open our saved file and compare it to the original

7) Go to File…

8) …then Open

9) Select the file and click Open

Note that the image we just opened, the one on the right, is more fuzzy and pixelated than the original photo on the left

To get the best balance between size and quality, it is recommended that you use a medium setting around 4 or 5

10) We’ll close both images to get them out of the way

The next format we’ll learn about is GIF

GIF should be used sparingly or for animated images

11) Select Save As from the File menu

12) Choose GIF and click Save

We’ll use the defaults

13) Click OK

14) Click OK

We’ll open the saved image to compare

15) Select the file and click Open

At first, there may appear to be little or no difference. However, if we were to use the saved image on a dark background, it would be more noticeable

16) Select the Paint Bucket Tool

17) Click anywhere in the background

We’ll turn the background of the original black as well

Note that the original on the left has clean edges while our saved GIF on the right has some white pixels around it

To solve this problem, we will save the same image as a PNG, which should be used in place of GIF whenever possible

18) Close the GIF without saving the changes

19) Press CTRL + ALT + Z to undo the last change

20) Go to File…

21) This time, click Save for Web & Devices

22) Select PNG-24 from the presets

23) Click Save

24) Click Save

Now, we’ll open the image we just saved to compare it

25) Change the background to black

26) Also, turn the original black

Notice that the PNG on the right looks just like the original

This is the end of the tutorial. You now know how to choose the right format for an image and save it for use on the web

Leave a Reply