9

Problem - I wanted to set up an image-uploading feature in my website. But I wanted to show both- the original image and a small thumbnail of the image.

Choices - Which way is better - to create a separate image (thumbnail) in a directory when the image is uploaded or to show a smaller version by reducing its height and width in the fixed ratio every time the image is requested?

How I am doing it currently - The later one sounds better to me because it won't be taking much size on the disk but it has to resize the image again and again. Which one do you think is better?

This is a general question for web application, no language in specific.

Any idea how facebook or google do it?

Question - My question is how to generate thumbnails and show them on a website - by creating a copy of the original image with smaller dimension or by generating the thumbnail dynamically every time it is requested.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
ShuklaSannidhya
  • 8,572
  • 9
  • 32
  • 45

5 Answers5

7

Creating the thumbnail on upload is almost always the better option. If storage is a concern you could convert them on the request and then cache the result in a memory store. If its requested again before the cache expires, no conversion will be needed.

Storage is often pretty cheap, so I would probably not go for that extra complexity.

datasage
  • 19,153
  • 2
  • 48
  • 54
  • 2
    Cheap is relative to where you are. – datasage Feb 07 '13 at 15:58
  • 4
    It is a lot cheaper than processing power/memory. – Ed Heal Feb 07 '13 at 16:00
  • You could also note that, since YOU are creating the Thumbnail on upload, you can decide image format (jpg) and the size. Thumbnails should be very small so i guess they would occupy a few KB's on the disk, that compared to the original image size it's almost nothing. I don't think it should be an issue. – Erenor Paz Feb 07 '13 at 16:06
  • @datasage - $100 at Microcentre (this is close to you according to your profile) for 2TB (£63). Thumbnail say 30K - you can get a lot of them in 2TB – Ed Heal Feb 07 '13 at 16:06
  • @EdHeal INR 7500 for 2TB :(. – ShuklaSannidhya Feb 07 '13 at 16:08
  • If you are dealing with storage at any scale, you need to consider IO throughput and replication. If you go with really cheap drives, you could spend a lot of time (which is money) on replacing them. You will also need to consider the cost of raid controllers and enclosures to host the drives. – datasage Feb 07 '13 at 16:10
  • @datasage - I was doing a for example. But hard drives of any description is a lot cheaper than buying processing power and memory. That is why the hard drive is a lot larger in capacity than your computer memory. – Ed Heal Feb 07 '13 at 17:39
  • ... Forgot to mention that the customer is impatient and it is a lot quicker to just deliver the file (thumbnail) off disk than happening the poor guy wait around (again?!) for you to resize it. – Ed Heal Feb 07 '13 at 17:44
2

Just create a thumbnail version and save to disk. Hard disk space is very cheap. £70 for a couple of TB.

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
  • @SandyLee_user53167 ... And is that expensive compared to more processing power/memory? – Ed Heal Feb 07 '13 at 16:10
  • The code looks neater. ` – ShuklaSannidhya Feb 07 '13 at 16:17
  • 1
    @SandyLee_user53167 - Just create the thumbnail when the image is uploaded. May take a second or two to create. BTW - Why does `thumbnail.php?image=image/foobar.jpg` look neater? If so concerned look into Apache rewrite rules. – Ed Heal Feb 07 '13 at 16:21
2

"Better" depends on the criteria you set.

For most applications, disk space is not an issue - and if storing a thumbnail is a problem, storing the original must be a huge concern - a decent digital camera photo will run to many megabytes, whereas the thumbnail should not exceed 50K.

Bandwidth and performance (as perceived by the client) are usually bigger concerns. If you have lots of people browsing a gallery of image thumbnails, serving 50Kb thumbnails will be significantly faster (and cheaper in bandwidth) than serving multi-megabyte high resolution images.

In addition, by serving thumbnails on a URL like <img src="images/thumbnail/foobar.jpg"> and setting appropriate cache headers, you should get a lot of downstream caching - this is less likely if you serve the image as <img src="thumbnail.php?image=image/foobar.jpg> because caches treat querystrings rather conservatively.

I used to work on a web site that managed hundreds of thousands of product images; we set up ImageMagick to create thumbnails automatically. Depending on your setup, it may make sense to do this when the thumbnail is first requested, rather than when the file is uploaded, because the conversion can be fairly resource hungry, and doing it at upload time would take longer than we wanted to wait. Modern hardware may make that a non-issue.

There's also a question about keeping the thumbnails in sync with the originals - if the user uploads a new image, you have to ensure you get the thumbnail updated; if the original is deleted, you must also delete the thumbnail.

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
Neville Kuyt
  • 29,247
  • 1
  • 37
  • 52
  • Just give the original + thumbnail a unique number not to be used again. User uploads a new image - that image gets a new number - cache will now just work for the new image, Simple. – Ed Heal Feb 07 '13 at 16:58
1

Creating a thumbnail is a better option and it doesn't cost much disk space. Your client will also load smaller size when opening your pages. converting the image upon request will cost event more time to load your page ;)

Hendyanto
  • 335
  • 1
  • 8
1

If you take a look at most CMS with this built in functionality they nearly always create a thumbnail image of the image on upload and store it on the server.

This goes back to the age old saying of "do what google does" but with CMS.

Millard
  • 1,157
  • 1
  • 9
  • 19