Can You Over-optimize Images in HTML?

When prepping images for use within HTML, there may be a tendency to overoptimize. By this, we mean that you may try to cut an image up into smaller pieces with the motivation that the file sizes will be small. However, you will also create many more images which will have to be downloaded, which can actually slow down your page by causing a larger number of requests to the server.

You can have the same problems with background images. Images placed in the background will tile. You may try making the image only 1 pixel tall and really wide in order to keep the file size down, but what you may not realize is that, in order for the image to tile, it is dependent on the user's processor speed. By using an image that is only 1 pixel tall, it now has to redraw for each pixel of resolution that they have. It is much better to make the tile image taller. Try making it about 100 pixels tall. The file size wont really change much, but the redraw will be much faster.

The examples below will demonstrate this. Which way do you think is better?

Next Demo: Animated GIFs