question regarding <img> and thumbnails

I have a photo site which renders previews of my photos in a tag 开发者_StackOverflow社区when i hover some dots. (see http://johanberntsson.se/photo/).

But it feels kinda stupid to load the full image in to an img-tag. Because as far as i know, theres no difference between loading the image with its original size versus adding height and width attributes to it.

Got any suggestions how to improove my preview function?

Thanks

---

As far as client side is concerned, there's nothing you can do. If you're worried about how long it takes the image to load, you could always pre-load them with javascript. The only other thing would be to create a few sizes of your image on the server.

---

You should resize the image to get better speed. Here's an example in php

//Blob if image in database
$blob = mysql_fetch_...();
//else blob point to filename
$blob = "filename.jpg";

   $gd = imagecreatefromstring($blob);
   $resized = imagecreatetruecolor(X, Y); // new image dimensions
   imagecopyresampled(....);


   imagejpeg($resized);
 

---

Loading all the thumbnails in a giant sprite image used as a background image. Then position the background a the right place to have the right image a the right place.

This will improve the loading speed by loading only 1 image and allow the browser to cache the request of the image so, next time the user come to your site, it will load pretty fast.