fast images. any tips?

[httpwebwitch]

I'm always looking for ways to make my sites faster.

Besides the obvious - small file size - are there any proven ways to make images load faster?

And I don't just mean a faster arrival time - I'm also interested in lowering the CPU load, less processing, optimizing at the server, faster disk I/O. For me, "fast" means a better user experience, but it's also a key ingredient of scalability.

- loading images from a different web server? Some say yes, some say no. Which is better?

- use CSS sprites. One big image will load faster than many small ones, saves disk I/O, less connections & HTTP overhead.

- put image dimensions in the HTML markup. True since the early Netscape days: providing the browser with image dimensions helps the browser draw faster.

- preloading. Good idea, or wasteful pre-fetching?

- gzip: not effective on files that are already compressed. You save less than 1% or something like that.

Any others?

[incrediBILL]

faster disk I/O

The fastest disk I/O is no disk I/O.

Load your images in server ram using either a ram disk or squid proxy cache, thus avoiding the delays of the disk drive altogether.

Pre-loading just makes people wait longer to see the pages so unless the images are key elements of the page layout I would avoid that technique.

Besides, once the image is loaded the first time it's cached in the browser for subsequent page views so it's only the first page load where you're taking a performance hit loading the images or pre-loading the images as subsequent all pages will be much faster.

[phranque]

- loading images from a different web server? Some say yes, some say no. Which is better?

it depends - you are trading off limits of simultaneous connections against extra DNS lookups.