Fast method to shrink HTML images?

Question

I know of 3 main ways to shrink images:

1. Using the img tag WIDTH HEIGHT
2. Putting all the images in a DIV and then scaling the whole div.
3. User zooming with ctrl + mouse wheel.

I have some pages with huge amounts of images. What I have noticed is that there is massive speed difference between the methods. Method 1 kills firefox very quickly. Method 3 seems to be the fastest on all broswers I have tried.

Does anyone know of any other methods? And is there a way through javascript/css to specify what the browser zoom level should be so I can at least use the fastest way?

Answer 1

The easist on the client would be scaling the images on the server and sending them to the browser, however it would take some serious CPU power on the server end (unless you cache them, and serve them up afterwards). You can achieve this with PHP quite easily. Depending on your purposes, you could simply write a script that takes all the images in a directory, resizes them and saves them to "thumbs/".

If you don't want to use anything on the server, I would either go with option 1 or question why there are so many images on one page to bein with. Try adding some pagination or something. If the browser slows down while using such a basic method of resizing images, there might be some refactoring in order.

Answer 2

If you're going to be resizing images why not have the images themselves be smaller. That will load the fastest out of any method you try. You can use PHP to create thumbnail sized images, and a link to the full sized image if they need to see it. Remember, even if you resize an image with the height/width the browser still loads the full image.

See http://articles.sitepoint.com/article/image-resizing-php for a tutorial on image resizing in php.