Load speed on an image-intensive webpage

Question

I'm currently working on a portfolio site wherein I would have to load a large quantity of photos on the same page.

These images are loaded dynamically through PHP, and at the moment I have opted to save thumbnail versions of these images beforehand and load these.

My concern, however, is that this might not be an optimal solution should the site have a large number of users: I would basically have duplicates of each image multiplied by the number of images users have uploaded.

My question for you is whether or not there are better solutions to this problem? A way to load a page as fast as possible without compromising too much space?

Thanks a ton.

Answer 1

Loading a webpage full of lots of images will be slow. The reason for this is because of the bandwidth needed to transfer these images.

You have a couple of options

1. Load full images in tiled mode. These images will be full images, just resized to fit in a "thumbnail" view. The advantage of this is that you are only saving 1 image, but that image is full sized, and will take a long time to load.

2. Load the thumbnails as you said you are doing. The advantage to this is performance, but you need to store two copies of each image. Also, depending on how you tackle the thumbnail creation, you may require users to upload two copies of the image to provide their own thumbnail... which could stink.

3. Load thumbnails, but dynamically generate them on upload. You are essentially keeping two copies of the image on disk, but you are dynamically creating it through some php image modification API. This will load faster, but still eats up disk space. It also minimizes user/administrative requirements to provide a thumbnail.

4. Load thumbnails on-demand, as the page is requested. This approach would take some testing, as I've never tried it. Basically, you would invoke the php image modification API (or better yet out-source to a native solution!) to create a one-time-use (or cached) thumbnail to be used. You might say "OMG, that'll take so long!". I think this approach might actually be usable if you apply an appropriate caching mechanism so you aren't constantly recreating the same thumbnails. It will keep down on bandwidth, and since the limiting factor here is the network connection, it might be faster then just sending the full images (since the limiting factor of creating the thumbnails would now be CPU/Memory/Hard Disk).

I think #4 is an interesting concept, and might be worth exploring.

Answer 2

1. Generate thumbnail of large images on-the-fly. ( Some hint )
2. Load images asynchronously (Try JAIL )
3. Paginate
4. Caching is also an option, works from the second time the site is loaded though.

Answer 3

What i think is :

A. Take Advantage of Cache (System Cache , Cache In Headers , HTTP Cache .. all Cache )

B. Don't generate Thumb all the time

C. Use a Job Queing System such as Gearman or beanstalkd to generate thumbs so that you don't have to do it instantly

D. Use Imagick is more efficient

E. Paginate

F. Example only generate thumb when the original file has been modified

$file = "a.jpg" ;
$thumbFile = "a.thumb.jpg" ;
$createThumb = true;
if(is_file($thumbFile))
{
    if((filemtime($file) - 10) < filemtime($thumbFile));
    {
        $createThumb = false;
    }
}


if($createThumb === true)
{
    $thumb = new Imagick();
    $thumb->readImage($file);
    $thumb->thumbnailImage(50, null);
    $thumb->writeImage($thumbFile);
    $thumb->destroy();
}

Answer 4

Consider using a sprite or a collage of all the images, so that only one larger image is loaded, saving bandwidth and decreasing page load time.

Also, as suggested already, pagination and and async loading can improve it some.

References:

• http://css-tricks.com/css-sprites/
• http://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS

Answer 5

Yes , caching the thumbnails is a good idea, and will work out fine when done right. This kind of thing is a great place for horizontal scaling .

1. You should look into using a CDN . (Or possibly implementing something similar.) The caching system will generate images of commonly-requested sizes, and groom those off if they become infrequently requested at a later time.
2. You could also scale horizontally and transplant this service to another server or vserver in your network or cloud.

It is a disk-intensive and bandwidth-intensive thing, image delivery. Not as bad as video!