To use thumbnails or not

hadoob024

I've seen a lot of posts regarding how to create thumbnails, but I haven't seen anything regarding WHEN to create the thumbnail (i.e., during the original image upload, before displaying the image, etc.), or if it's even worth it to use thumbnails.

Our website is a listing service for real estate. Each listing can have up to 4 jpg/gif images up to 500k in size each. On a page, we can have up to either 10 or 25 listings.

My first question is, when should I create these thumbnail images (i.e., during the original image upload, before displaying the image, etc.)?

My second question is, is it even worth it to create thumbnails, or can I just display the original images and just resize them in the <IMG> tag? How server intensive is creating these images? Is it even worth it to create thumnails, or should I just continue with displaying the original image?

Thanks!

Piranha

First let's correct one thing. This is not about how much the server have to work, it is about how user friendly the page becomes. Loading time is the one that probably are most important here.

Now let us count a little.

You say that you can have a maximum of 4 images per listing, 25 listings and 500k. That is a maximum of 50 MB!!! With a 2Mbit connection it would take more than 3 minutes to load the page. I would not wait that long, heck I would not wait for the page with my current connection that is much faster. I doubt that others would wait. So use thumbnails.

Now, when do you want to create the thumbnails? That question is not that easy to answer. First consider these questions:

How often will the pictures be updated?
How often will the pictures be viewed?
Would the images be in different sizes on different pages? Of course they will be in 2 sizes but will they be in even more sizes?

If the pictures will be updated often it may be a good idea to create the thumb when viewed. If the picture is viewed often it may be a good idea to create the thumb when the picture is uploaded. If there are lots of different sizes it may not be possible to resize the images to every size. I simply can't give you an answer when you should rezise the images.

Basically you have 3 choises:
1. Resize the image when it is uploaded
2. Resize the image when it is viewed
3. Resize the images when the server is not busy. This could be every night, when the server load is low or any other good time.

hadoob024

Hmmm... That makes sense then.

Basically, the images will change frequently because they're only shown as the result of a search done on our database, so there's also no way to know how frequently an image will show up. The images won't change themselves though. Whatever images a person uploads for their listing will be the images that stay with the listing through its duration of being in the main listings database.

As for how they are layed out, in the listing itself I will have the main image. Underneath the main image will be the additional 3 images. I want the main image to be about 225 x 175 in size, and I want the other 3 to be smaller (haven't determined the size yet). And I will set it up so that when someone clicks on the thumbnail the full-sized image pops up.

So, when should I create these thumbnails? Just before displaying them? After they're uploaded? Thanks again!

NogDog

Just to amplify on what Piranha has stated, when you resize an image via the <img> tag attributes, the full-sized image is still downloaded to the browser; so even if you have the <img> tag display it as 50px by 50px, you still have to download the full 500KB image. However, if you actually copy and resize the image to a 50x50 (or whatever) thumbnail and optimize it for file size, you might be downloading a file only 5-10% the size of the original.

hadoob024

Cool. Thanks. Yeah, originally, we only allowed 1 image at 100k max in size, and only allowed 10 listings max per page. That's why I was lazy and only using the <img> tag to resize the image because it didn't really matter. But now we changed it to 4 images at 500k max in size, and also now allow up to 25 listings per page, so I guess I have no choice but to use thumbnails now. Man, being lazy ALWAYS comes back to bite you in the a$$ 😃

paulnaj

Hi,

Wrote this before I saw the other replies but what the h*ll ...

You may also want to consider that the server will also have to do more work (take longer) to deliver a thumbnail if it has to re-create it on every page view. The more people viewing the worse it'll get.

For most situations, there's no real reason to make the the thumbnail(s) at the display stage (user time). You will always have to upload at least one image to the server anyway, so why not have PHP make the thumb(s) then?

One other thing ... 500k is a pretty big file size. Obviously it will depend on the pixel dimensions, but have you optimised your images at all? You will need a decent graphics program (I use Fireworks) to do it, but it's absolutely essential.

To be honest, I use Fireworks to make the thumbnails as well ... IMHO, with thumbs created using PHP, the quality of the resulting images can be poor and thus unreliable. I make the thumbs at the same time as I optimise the main image and just upload the lot to the server direct.

Hope that helps.

PS For a reference to a reasonable file size, my company website (link below) shows images up to 500px square. Very few images are over 200k and most of the largest are less than 150k. I realise that we're not showing photos, but still,.

hadoob024

I never considered that. I assumed that PHP GD library would make decent looking thumbnails. I'm trying to automate this process as much as possible, which is why I wouldn't want to make the thumbnails manually. Right now it wouldn't be a hassle to do so, but in the future, it could be pretty tiring to have to manually create all these thumbnails.

But I agree. I think creating them on the initial upload might work better. Once a thumbnail is created, I see no point in having to recreate it, which is what would happen if I did this during the Search Listing process.

Regarding the size, I think the bulk of our users aren't that computer-saavy. That's why I wanted to make the image size restriction large. I don't want the whole Add Listing process to get messed up because someone is trying to upload a picture that is too large, and isn't saavy enough to resize it quickly before the server nulls the transaction. We'll see though. We've been making tweaks for months (does it ever end), so you never know 🙂

NogDog

In addition to making thumbnails, you can use the same process to reduce very large images to a "standard" size, if so desired.

hadoob024

Cool. I hadn't even thought of that.

Also, I've seen several examples for creating thumbnails, and was just wondering if there's a "preferred" way of doing it? All the variations make use of the following functions: imageCreateFromJPEG, imageSX, imageSY, ImageCreateTrueColor, imageCopyResampled, imageJPEG, imagedestroy, etc. Any caveats in actually creating the thumbnails?

NogDog

Sounds like that's pretty much it. When you do the imagejpeg() to create the final image, you might want to try some experiments with the optional 3rd parameter (quality) to see what the lowest value is you can use that provides acceptable image quality, so as to further reduce file sizes.

hadoob024

Cool! Thanks! Good tip! Well, I guess that's about all. Probably get to this tomorrow and actually start putting it all together.