CODEWITHSUNDEEP
thumbnails
Berntsson
Berntsson

Reputation: 33

question regarding <img> and thumbnails

I have a photo site which renders previews of my photos in a tag 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

Upvotes: 0

Views: 81

Answers (3)

Fredrik
Fredrik

Reputation: 1312

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);

Upvotes: 1

Muffun
Muffun

Reputation: 736

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.

Upvotes: 0

Thomas Shields
Thomas Shields

Reputation: 8942

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.

Upvotes: 1

Related Questions