Photoshop
Saving Files
Optimizing JPEG Images
In this lecture, you'll try out the Save for Web & Devices dialog to save an image as a JPEG. In the process, you'll learn about the different optimization settings and about selecting a background colour for an image containing transparent areas.
About the JPEG Format
The 24-bit JPEG format supports 16.8 million colours and is ideal for photographs and continuous tone images. It doesn't support transparency so if transparency is required, consider a different format. However, if the Web page you plan to place the image on contains a solid-coloured background, you can fill the background of the JPEG with a matching matte colour to simulate the effect of transparency.
JPEG compression discards image data to make the file size smaller; thus, it is called a lossy compression scheme. Overly compressed images can deteriorate quite badly, resulting in banding, a blocky look or bleeding of colours. The ability to preview different compression settings in the Save for Web & Devices dialog is very helpful in deciding on a compression setting.
Practice Exercise: Saving a JPEG
- Open CDROM.tif. Heaven forbid you'd actually save something this large for use on the Web but we're going to leave it at its full size so you can better evaluate the effects of compression.
- This image has an alpha channel. Display the Channels panel and load the alpha channel as a selection by Ctrl-clicking (Cmd-clicking) on the Alpha 1 channel.
- Create a new layer containing the selected pixels by pressing Ctrl-J (Cmd-J).
- Display the Layers panel and delete the Background layer by dragging it to the Delete Layer button at the bottom of the panel. You should be left with the CD on an otherwise transparent layer. This extra step was done so you can try out filling the background with different colours while optimizing.
- Go to File > Save for Web & Devices or use the keyboard shortcut Shift-Alt-Ctrl-S (Shift-Option-Cmd-S).
- Click on the 4-Up tab near the top of the Save for Web & Devices dialog.
Before we continue, let's look at why GIF isn't a suitable format for this image. The image below contains what is called banding. Because the GIF format limits you to 256 colours, similar colours are reassigned to a single common colour which results in the banding effect.
Using a Preset Compression Value
- From the Preset pop-up menu, select JPEG High.
- Set the view magnification to 150% by typing 150 in the Zoom Levels field and pressing Enter on the numeric keypad. You can better see the differences between the original view and the three optimized views when the image is magnified. The three optimized views are:
- 60 quality (JPEG High) - 53.39K
- 30 quality (JPEG Medium) - 24.24K
- 15 quality - 15.81K
The 60 quality image has rendered the CD quite accurately. There's a little bit of speckling. In the 30 quality view, there is a sort of shimmering effect evident. Even at 100% it has a speckled appearance. In the 15 quality view, There are blocky areas of colour due to compression, as well as speckled pixels.
- Make sure the 60 quality view is selected. In the Compression quality pop-up menu that currently shows High, select Maximum. This will change the Quality setting to 80, the current view of the image will update, and the other two views will remain as they were.
- From the Optimize palette menu, choose the Repopulate Views command. The other two views will change to 40 and 20 quality. As Photoshop is generating previews, you may see a progress bar.
Notice that the Preset pop-up menu now displays [Unnamed]. The Preset pop-up contains preset compressions for various file types. Whenever you choose a preset not listed in that menu, it will display [Unnamed].
If you want to use a Quality setting other than 80, 60, 30 or 10 (Maximum, High, Medium or Low), you can use the Quality slider control to set a new value in the Quality field or you can type in a value and then press the Enter key on the numeric keypad.
Setting a Custom Compression Value
- Let's say you decide that you want to compromise between High (60) and Medium (30) quality for this image and want to try a Quality setting of 45. Use the slider control to set this value in the Quality field or type in the number as described in the previous paragraph.
Blur
- Double-click on the Zoom tool to reset the magnification to 100%.
- Click on the button in the Blur field and use the slider to try out various settings while watching the effects in the view window. This applies a Gaussian blur to the image to help smooth out rough areas of pixels - especially artifacts (illustrated below) around the edges of objects. In this image, the danger lies in blurring the edges of the CD too much. This control is better suited to images that don't have clearly defined, contrasting areas of colour. Adobe recommends blur values between 0.1 and 0.5.
- Set the Blur back to 0.
Matte
You've probably noticed that the optimized views show the CD against a white background. When an image has transparent areas, Photoshop will fill the transparent background with white by default. Any semi-transparent pixels will be blended with white. This fill doesn't affect the original image which will retain its transparent background. It's simply a fill (matte) that is applied to the JPEG when it is saved. The image below shows the options available in the Matte menu. The None option has no effect on JPEGs. It is the same as choosing a white matte. Choosing the Other option will open the colour picker from which you can choose a matte colour. We're going to try out the Eyedropper Colour option.
- Click on the Optimized tab so that only your chosen optimized image is visible.
- Double-click on the Hand tool to set the magnification to Fit on Screen so you can see the entire CD in the window.
- Click on the Eyedropper tool and sample a colour from the image that you want to use as a background colour. To put it into effect, choose Eyedropper Colour from the Matte menu. To try another colour, sample with the Eyedropper again and reselect Eyedropper Colour from the Matte menu to apply it.
Previewing in a Browser and Saving
- Once you have a colour you like, click on the Preview In button to preview your JPEG in a browser. The matte colour you chose fills the background of the browser window.
- Switch back to Photoshop and click on the OK button to save your image as a JPEG.
- Accept the default settings shown in the Save Optimized As dialog box, although you may need to navigate to the folder of your choice for saving the new image.
Other JPEG Optimization Settings
- Optimized
- In addition to the JPEG compression you applied, you can further optimize an image by checking this box. It will reduce the file size slightly in browsers that support this feature.
- Progressive
- Selecting this check box will download your JPEG image in more than one pass in Web browsers that support this feature. It requires more RAM for the browser to render a progressive JPEG. It is best used for images with a large file size so the viewer can get an idea of what the image will be while it's downloading.
Optimized must be enabled in order to use Progressive. Enabling Progressive will automatically enable the Optimized check box if it was turned off.
- ICC Profile
- Checking the ICC Profile box will apply a colour profile to your image to try and ensure a level of colour correction on other computers. For more advanced users.
Optimizing JPEG Images Summary
- The JPEG format is ideal for images that contain many colours, like photographs and continuous tone images.
- The JPEG format doesn't support transparency but if your image contains transparent areas, you can apply a background matte to match a solid Web page background.
- High quality JPEG settings produce better results but a larger file size. Low quality will reduce the file size but can create areas of speckled or blocky pixels.
- The Blur option smoothes out artifacts that appear as a result of compression that is particularly noticeable around the border between contrasting colours.
- Matting will fill transparent areas with the matte colour and partially transparent pixels will be blended with the matte colour.
- The Optimize option will further compress the image in browsers that support the feature.
- Images saved as Progressive will download in a series of passes that will display a low resolution image initially. This is best used for large files to give the viewer a preview of what the image will look like while the download is in progress.
Photoshop - TOC - Introduction - Books -
Saving Files - Links - Questions -
1 - 2 - 3 - [ 4 ] - 5 - 6 - 7 -
