The Save for Web feature
Author: DavidPeters Total views: 8 Word Count: 1413
If you have version 5 or greater you have the ability to use Photoshop's "Save for Web" command. This handy feature gives you to ability to save a copy of your image that is optimized for use on the Web. By doing this your image file will be as small as possible, and that the image will use only Web-safe colors (if desired). The "Save for Web" feature can produce GIF, JPEG, or PNG format images.
Using Save for Web When you're ready to put your image in your web page, select Save for Web... from the File menu. The "Save for Web" dialog appears:
This is where you tell Photoshop how you'd like to optimise your image for the Web. You can select the file format to produce (GIF, JPEG or PNG), what size palette you'd like to use, how to cut down the colours to fit the chosen palette size, how much to dither the optimised image (if at all) and how much to sacrifice image quality to produce a smaller file size.
Image views You will see four tabs above the image view pane on the left side of the screen. These options allow you to view the original image, the optimized version (this is the default), the original and optimized versions side-by-side ("2-Up") and the original, optimized and two variations on the optimization all together ("4-Up"). You can use the Zoom tool to zoom in and out of the image; the Hand tool to move the view around; and the Eyedropper tool to select a color from the image which can be used by various color options on the right of the dialog.
Presets There are many options in the Save for Web dialog, and the choices can be quite confusing! Fortunately, there are a list of presets you can choose from to make it easier. Click the Settings: drop-down list (just below the Cancel button) to bring up the list of presets:
In the presets there are three basic image formats - GIF, JPEG and PNG. As a basic rule you use JPEG's for photos and GIF's for everything else. For a complete lesson on selecting the right image format, see Understanding image formats.
Optimizing GIFs If you're making a GIF, you will want to start off with a preset such as GIF 32 Dithered, which works well for most GIFs. You can then fine-tune the optimization to fit your needs. Some of the important optimization options are discussed below.
Color reduction method This drop-down box is located below the Image Format box. The commonly used options here include:
Perceptual: Creates the reduced color palette which favors colors that the human eye is more sensitive to. Selective: Like Perceptual, however better for Web work. Selective is the favored (and default) option. Adaptive: Creates the palette by taking an even sampling of colors from the image's color spectrum. This is generally not as good a choice as Selective. Web: Use this if you need a complete Web-safe color palette (Netscape 216-color palette). These days, this method usually isn't that important as most computer displays support at least 16 million colors. Dithering method This is located below the "color reduction method" box. Dithering involves adding patterned or random dots to the image to make it appear to contain more colors than are actually in the palette, allowing you to use a smaller palette size. The options are:
No Dither: No dithering is applied to the image. This is good if the dithering effect looks bad, but can produce severe "banding" of colors. Diffusion: Uses error diffusion dithering, which looks similar to Noise dithering and produces a random-looking pattern of dots. This method can produce seams when using ImageReady slices. Pattern: Uses a pattern for dithering, rather than random dots. Can work well for some images, but sometimes produces a rather unnatural look to the image. Noise: Similar to Diffusion, but does not create seams at the edges of slices in ImageReady. Transparency If your image does not have its Background layer turned on this checkbox will be available. It denotes that you wish for parts of the saved GIF to be translucent. If you uncheck this box, the transparent areas will instead be filled with the Matte color (or white if no matte is selected).
Interlaced This controls GIF Interlacing. If enabled, the GIF will appear gradually as interlaced horizontal lines as it is loaded onto the Web page. This gives viewers something to look at while the full image appears. It does increase the file size, however.
Lossy If you wish to reduce the file size further this slider allows you to remove detail from the image. Use this only if you don't mind reducing the image quality quite severely! A value of 0 will not remove any detail; a value of 100 will remove the maximum amount of detail.
Colors This is where you can select the size of your GIF palette. A palette of 32 colors is often sufficient for web images, but if your image has a lot of detail and looks too fuzzy/blurry/banded with 32 you can bump it up it to 64, 128 or 256. If your image has very few colors in to start with, or doesn't look too bad with fewer colors, select 16, 8, 4 or even 2! This will make the GIF file size smaller.
Dither If you have chosen a dithering method (see above), this option will allow you control over how much the image is dithered - 0 means no dithering, 100 means lots of dithering.
Matte The matte is the background colour you want to use for your image. If you've enabled Transparency (see above), then the foreground image will be faded at the edges to blend in with the matte colour. If you choose the Matte setting of None, the GIF will have a "hard transparency" with no fading; this is great if you want to be able to use the image on any colour background.
If you've disabled Transparency, the transparent areas of your image will be filled in with the matte color.
Web Snap If you want to use web-safe colors you will want to increase the Web Snap slider. The higher the value of Web Snap means Photoshop will bias your color palette more and more towards web-safe colors.
Optimizing JPEGs If you're creating a JPEG you will want to start off with a preset such as JPEG Medium, which typically works well for most JPEGs. From there you can fine-tune the optimization to suit your needs. Some of the important optimization options are as follows:
Quality There are two ways to alter the compression quality: the Low/Medium/High/Maximum list (for quick access), and the Quality slider (for fine control). The lower the quality setting, the more blurry and bitty the JPEG will appear, but the smaller the resulting file size.
Progressive A progressive JPEG is similar to an interlaced GIF (see above). The image will load gradually on the Web page - a low resolution image first, then eventually the full, high-resolution image. Again, great for stopping your viewers on slow modems getting bored, but it does mean a slightly larger file size, and really old browsers don't support progressive JPEGs.
Matte If your Photoshop image has transparent areas, you can fill them with a specified matte color with this drop-down box.
Optimising PNGs The options for optimising a PNG-24 is much the same as those for optimising a JPEG. Similarly, the options for optimising a PNG-8 are very similar to those for optimising a GIF. See the GIF and JPEG sections above for details.
And, if you really can't be bothered... ...you can always allow Photoshop to optimize the image for you! Select the little arrow just to the right of the Settings... box and select Optimize to File Size...:
In the dialog that pops up, choose Auto Select GIF/JPEG then enter your desired file size. Click on OK and Photoshop will do the rest for you! If you're not pleased with the results you can tweak the settings as described in the sections above, or just choose a slightly larger file size and try again.
Saving the image Once you're happy with your optimized image, click OK to save it to disk. The file saved will be a copy of your original image, unless you specifically overwrite the original with the optimized file.
My Articles Directory Free Web Content Provider
About the Author
Did you enjoy this article? Interested in learning photoshop fast? Well now you can by getting this free Guide...what are you waiting for?
Copy and Paste Article Code.
Remember: The article body, title, author bio and links may not be changed or removed. By publishing this article, you agree to all the terms in our Terms of Service.