— A r t 451 —
Optimizing Images for the Web & Generating Quick Web Galleries
The goal of "optimization" is to shrink image file size while maintaining quality
Nobody likes to wait for large files to download, so make sure you do your best to optimize the images you put on your website. Also make sure they still look good. Don't you hate those images with mushy-edges?
overcompressed jpeg image
Image Size:
The first thing to do is to shrink the image size to exactly the pixel
dimensions you want to have it appear on the web. Keep in mind that the
average online computer has a screen size of 600 x 800 pixels but that
there are very few images on the web that fill up your an entire computer
screen. The image above is 138 x 180 pixels, for instance.
Save for Web:
In Photoshop, go to FILE>SAVE FOR WEB. There are many setting here
that can be adjusted to get just the right balance between small file
size and a decent-looking image.If you select the"4-up" tab
you can see your original image plus 3 different versions of your image
compressed with different settings.
jpeg vs. gif
Generally, for continuous tone images the best file format will be
jpeg and for flat, hard edged graphics the best choice is gif. If you
select the wrong format for the type of image you are compressing, it
may take up extra kilobytes at the same time as it degrades the quality
of the image.
It takes up 16 Kb of space.
Fig. 2.Continuous tone image saved as a gif. Notice the banding in the sky.
It takes up 24 Kb of space.
Fig. 3. This flat, graphic image was saved as a jpeg at medium quality.
It takes up 24 Kb of space.
Fig. 4. This flat, graphic image was saved as a gif at medium quality.
It takes up only 8 KB of space.
Jpeg compression settings:
If Jpeg is the right compression format for your image, select a quality
setting that will keep the file size small without causing too much mushyness.
This is different for every image. The quality settings can be selected
in the Save For Web dialog box or whenever you just go to FILE>SAVE
AS and then select the JPEG format.
Gif compression settings:
If .gif is the right compression format for your image, there are
several other settings to consider such as color reduction, dither and
transparency. Reducing the color pallet can shrink the file size considerably
and dither settings can help the image look better. Dithering is a speckly-effect
that attempts to simulate the look of continuous tone. In the gif of the
conitnuous tone image (fig. 2) above, dithering was used. In
the gif of the flat graphic image (fig. 4) above, no dithering
was used.
Transparency:
All jpegs and gifs are rectalinear. If they look as though they are
eliptical or as though they have soft, fuzzy edges, these are just tricks.
One trick is to change the look of the edges of an image by using the
exact same color on the image as on the background the image will appear
on. The red, fuzzy dot below is really a square image that uses white
as a background to blend in with the white background of this page.
drag and drop the image to your desktop and open it up to check it if
you don't believe me.
Another trick is to erase the background pixels of the image in Photoshop. Make sure your image is a regular layer and not a background layer in the layers pallete. (If you need to change a background layer into a regular layer, double click it.) Then go to FILE>SAVE FOR WEB and identify the erased pixels as transparent in the dialog box. This is nice because you can use the same image on many different colored backgrounds. One limitation of this trick however, is that it only works with the gif format.
This is a gif that has a transparent background.
Here is the same gif on a different colored background
. Generating Quick Web Galleries:
If all of this image compressing seems like it takes to long for some simple images that you just want to quickly upload to the web, then maybe Photoshop's Automated Web Photo Gallery is for you. Open Photoshop, go to FILE>AUTOMATE>WEB PHOTO GALLERY. There you can identify a folder of images that you want in your web gallery, and identify a folder that you want the web gallery to go and some settings such as background color, image size, thumbnail image size and general style of the web gallery. When you click OK, Photoshop makes a web gallery for you. It even resizes every image and compresses them to your liking. Some of the templates are pretty boring and others are cheesy, but sometimes I use them as a quick way to generate a site and then I import the html files into Dreamweaver to customize things and/or add text.