Photoshop CS4 Save Images for Web

Photoshop CS4DPD Blitz Reference

The image download time is based upon the preference of 56K per second
Can change the download speed by choosing Edit->Preferences selecting the Status Bar category, and clicking the Connection Speed drop-down list

Saving Photoshop Images for the Web and Devices [File->Save for Web & Devices]

• Resize the image to the right pixel dimensions
• Choose Filter->Sharpen->Unsharp Mask to gain back some of the detail lost when resizing the image and then save the image for the Web
• Use the GIF format for images with large areas of solid color, such as a logo

Saving a GIF

• Choose File->Save for Web & Devices
• At the top, click the 2-Up tab
• In the lower portion of the displays, see the original file size compared to the optimized file size, as well as the approximate download RMC
• Try to keep an individual image’s download RMC down to five seconds or less
• All the images on a page can add up to one monstrous wait for the viewer!
• Choose GIF 32 No Dither from the Preset drop-down list
• Photoshop supplies presets to choose from, or can customize and save one's own
• Many designers choose the No Dither option
• When image is on a transparent layer and desirable to maintain that transparency on a Web page, select the Transparency check box
• Using the color table in the Save for Web & Devices dialog box
• Based upon a color reduction algorithm chosen, the Save for Web & Devices feature samples the number of colors user indicates
• An image that has only a few colors desired to convert to Websafe colors, choose the Eyedropper tool from the left of the Save for Web & Devices dialog box and click the color, in the Optimized view
• The sampled color is highlighted in the color table
• Click the Web Safe button at the bottom of the color table
• A ToolTip appears when you hovers over this button with the text 'Shifts/ Unshifts Selected Colors to Web panel'
• A diamond appears, indicating that the color is now Web safe
• Lock colors not wanting to be deleted
• Select a color with the Eyedropper tool or choose it in the color table and then click the Lock Color button - a white square appears in the lower-right corner, indicating that the color is locked
• When locking 32 colors and then reduce the color table to 24, some of the locked colors are inevitably deleted
• However, when choosing to add colors, those locked colors are the first to return
• Use the arrows to the right of the Colors combo box or enter a number to add or delete colors from the color table
• When keeping colors Web safe is important, select the Restrictive (Web) option for the method
• When wanting image to look better on most monitors but not necessarily be Web safe, choose the Adaptive option
• When image uses transparency, select the Transparency check box
• Remember that transparency is counted as one of the colors in the color table
• Select the Interlaced check box only when GIF image is large in size (25K or larger)
• Selecting this option causes the image to build in several scans on the Web page, a low-resolution image that pops up quickly to be refreshed with the higher resolution image when it’s finished downloading
• Interlacing gives the illusion of the download going faster but makes the file size larger, so use it only when necessary

Saving a JPEG

• The JPEG format is lossy, so one shouldn’t open it, edit it, and save it again as a JPEG
• Because the JPEG compression causes data to be lost, the image will eventually look like it was printed on a paper towel
• Save a copy of the file as a JPEG, keeping the original image in the PSD format for later changes
• The JPEG format does not support transparency, but can cheat the system a little by using matting
• Choose File->Save for Web & Devices and then click the 2-Up tab
• Choose one of the JPEG preset settings from the Settings drop-down list
• Can choose Low, Medium, High, or customize a level in between the presets by using the Quality slider
• Leave the Optimized check box selected to build the best JPEG at the smallest size
• Leave the Embed Color Profile check box deselected unless a color-managed workflow and color accuracy is essential
• When have to have the file size even smaller, use the Blur slider to bring down some detail
• One JPEG that’s the exact same pixel dimensions as another may vary in file size because the more detailed an image, the more information is needed
• So an image of lots of apples will be larger than an image the same size that has a lot of clear blue sky in it
• The blur feature does blur the image so use this for only a Low Source image in Dreamweaver
• (Optional) Choose a matte color from the Matte drop-down list
• Because JPEG doesn’t support transparency, can flood the transparent area with a color that one chooses from the Matte drop-down list
• Choose the color to use for the background of a Web page by choosing Other and entering the hexadecimal color in the lower portion of the Color Picker
• Click Save

Saving a PNG

• PNG is not yet widely supported
• PNG-24 images have file sizes that can be too large to use on the Web - much larger than a JPEG file
• Can apply varying amounts of transparency in an image where the image shows through to the background
• PNG-8 doesn’t offer any advantage over a regular GIF file

Saving a WBMP

• WBMP (Wireless BitMap) is one-bit color (just black and white, without shades)

Matte

• Matting looks for pixels that are greater than 50-percent transparent and makes them fully transparent; any pixels that are 50 percent or less transparent become fully opaque
• Even though an image might be on a transparent layer, there will be some awkward pixels, the ones that aren’t quite transparent or not quite un-transparent
• Choose a matte color to blend in with the transparent awkward pixels by selecting Eyedropper, White, Black, or Other (to open the Color Picker)

Saving Settings

• Click the arrow to the right of the Preset drop-down list
• Choose Save Settings from the menu that appears and give your settings a name
• The named, customized settings then appear in the Preset drop-down list