weballey logo
 
left Web design - downsizing backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

LAYOUT

GRAPHICS

palettes
examples
web palette
anti-aliasing
dithering
< downsizing >
backgrounds

      Graphics use up a lot of bandwidth. It may be worth your wile to downsize them. Your pages will load faster, making your site more responsive. Current bandwith conditions may easily make your visitor go elsewhere if you don't. There are a number of different strategies to make image files smaller.

No pictures
    Always wonder if you really need a picture. Header texts with dropshadows may look nice, but are easily 20 kB in size. While a similar text in plain HTML will only use a few bytes. A table with a colored background lets you create a colored title bar. The same goes for page backgrounds. Do you really need graphical buttons for your links, or will a text link also suffice. Do you really need JavaScript rollover effects, or can you use a single image for a button link.

Less pictures
    A well chosen and placed graphic may liven up your page a lot. The more you use however, the less the effect of the last added image will be. You may only need a handful for creating a great page. Find a balance between an attractive layout and the number of graphics used.

Smaller pictures
    Make your graphics only as large as they need to be. Your visitors are not in front of a TV set, they are (very) close to a computer screen. Your images don't really have to fill the screen. Reducing an image 30% in width and height will reduce the number of pixels by more than half (0.7x0.7=0.49). The byte size may even be smaller than that. Choose a smaller cutout if the background of your image is not essential to its subject. Or cutout the subject and remove the background entirely.

No animations
    Animations may look great on a web page. But remember every frame in such a 'movie' is an image. So an animated GIF with twenty frames is roughly twenty times as large as a single image. Even a tiny stamp sized image can easily grow to 100 kB or more. Always wonder if you really need this kind of effect for your page.

Right image format
    As a general rule you should use JPEG for photos and other images with lots of different colors or shades. Simple 'graphic' images with little colors or shades are generally better served in GIF. They may indeed look hideous in JPEG. There are other image formats, like PNG, but they are not supported by all current browsers, so don't use them. For now at least.

Less colors
    An image can shrink quite dramatically by reducing the number of colors. GIFs normally have a 256 color palette, but you can make it any number you want between 2 and 256. The biggest reductions will be achieved by removing a 'bit'. 256 is an 8 bit number, 128 a 7 bit, etc. Removing a bit will shrink the palette, needing smaller numbers for color referencing in the image itself. Simple graphics often look surprisingly good in only 16 colors. As a general rule you will need about 4 colors for each pair of main colors. Small pictures may require less colors than large ones.
    Using less colors may lead to 'banding' in shaded areas. Instead of a gradual transition, there are jumps from one color to the next. Sometimes this will look bad. But it may also give a surprisingly nice artistic effect to your images.

Black and white
    Not all your images need to be full color. You could use mainly black and white, and only color in strategic places. Jpegs will need only about one third the file size (256 colors), Gifs only need about 8 colors. You can also use 'duotone' images. These are essentially black and white, only with different colors. Like those old sepia colored black and white photos.

Optimal compression
    JPEGs can be reduced in size by changing the quality setting. The number of colors stays the same (24 bit, or 16.7 million). Try different settings in your editor to find a balance between image quality and file size. Another trick is to reduce the number of colors to 256 by saving it as a GIF. Open it again and then save it as JPEG. The outcome may surprise you.
    To reduce file size jpeg uses a 'lossy' compression algorithm. The more you compress a jpeg, the more information in the image is lost. Most noticable are the so called 'artifacts' around the edges of objects. This phenomenon makes this format also less usable for simple images with large areas of one color. To drastic a compression may result in hideous images. And oh yeah, you cannot use software like Winzip to compress your images.
    A very nice program to experiment with palettes and image formats is DeBabelizer.

Remove clutter
    Image files may contain a lot of superfluous information. GIFs often contain text or control blocks that do not enhance the image quality in any way. JPEG files often contain thumbnails of about 5 kB in size. That won't matter in a 200 K photo, but it DOES in a 5 K image, making it twice as large or more. This is standard behaviour for Photoshop. There are two great utilities I would like to mention in this respect.

bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right