grafikhaus computer training - Photoshop Optimizing Web Images

Photoshop - Optimizing graphics for the Web Photoshop's Save for Web feature barely scratches the surface of what the ImageReady package provides. Here we look into some of those mystical terms... When creating images for inclusion on a Website, many people create the image first in Photoshop and then switch to ImageReady to unleash the full capabilities which basically amount to a trade-off between image quality and file size (and therefore download speed). The only downside to using the two programs in tandem is the sheer amount of processing power and memory your computer needs. Flat and graded colors: For hybrid images that contain both flat and graded colors, choose the GIF format using the Perceptual, Selective or Adaptive palettes. Remember too that you will probably use GIF (or PNG) formats if you want to include animation in your images or transparency (i.e. a round button on a square, yet transparent background.) JPEGs support neither, so if you created aforementioned round button on a transparent background, in JPEG format the background would appear as white. When creating graphics for the Web, it's advisable to work within the Web-safe palette as often as possible - these colors will appear the same regardless of platform or browser the site is being viewed on. Clicking on the Foreground or Background Color swatch within the toolbar brings up the Color Picker (right). Make sure the "Only Web Colors" box is checked. Here you can also enter RGB or Hexadecimal colors.
Once you've completed your graphic and gone to FILE...Save for Web, make sure the "4-Up" tab is selected at the top of this window. This gives you four versions of the graphic - the Original (in the top-left), and three others. The file properties of each are given underneath each preview window and using these figures regarding file size, a visual appreciation of the image and by using the settings to the right of these preview windows should give you the best combination. When you are happy with this, click on the preview you like and press the Save button in the top-right of this dialog box.
Depending on the composition of the image and its range of colors, it is worth experimenting with different settings. For best immediate results, use GIF for solid color images, gradually reducing the number of colors used, and JPEG for more graded tones. Drop the quality as low as possible for the lowest file sizes.
Colors within the color palette can be added to or discarded using the controls at the bottom of the Color Table. For example, click on an individual swatch and click the "Bin" icon to discard it. The Dithering options enable you to determine how non Web-safe colors are handled and also the appearance of gradients. In the example below, GIF was chosen and you can see the difference between 0% and 100% dither. This has produced a visibly better appearance on the right-hand image (maximum dither). Also note that both images simulate a 1.0Mbps connection (Broadband) which we'll explain later, so the estimated download time for this image is just 1 second, even though the right-hand image is considerably larger (3.858K and 6.142K):

Now lets look at the same image, but saved as a JPEG. Firstly, notice that the background is no longer transparent as shown by the grey-and-white checkerboard effect in the image above - JPEGs do not support transparency. Secondly, the appearance of the graded part of the image is good in both cases - JPEGs deal with this kind of image better. In both cases we've assumed a 56.6K connection (this is a standard "dial-up" speed - don't assume everybody has broadband). In both cases the file size has increased - this is regardless of connection speed. It's the old trade-off between image quality and file size.
1, 2, 3>>