4

I am creating a social network where users upload their profile image.

This image will be used in their profile page in 150 / 150 px dimension.

In the home page i.e user Activity feed I need the same image to be in 75 / 75 px.

What would be the best practice to do this

  1. Resize image on fly (timthumb).
  2. Resize and Save image in the server.
pavium
  • 14,808
  • 4
  • 33
  • 50
user737767
  • 1,022
  • 3
  • 15
  • 17

4 Answers4

3

While uploading a photo create required set of thumbnails and save as a [image_name]thumb[size_name].jpg or so:

uploaded: file.jpg
medium: file_thumb_150x150.jpg
small: file_thumb_75x75.jpg

Naming convention is up to you, but in a fast way you get easy access to the data you need. No need to use server to generate it on the fly or scale in a browser.

Tomasz Kowalczyk
  • 10,472
  • 6
  • 52
  • 68
  • Also you could have only one thumb -- for example only 150 px, and decrease it to 75 px by simple CSS. Browsers could do this easily. – gaRex May 16 '11 at 08:45
  • Yes, but it would be a bandwidth overhead. 150x150 is a 4x larger image than 75x75. If your statement was true, we could utilize original image and generate no thumbnail [assuming that width/height ratio is acceptable] – Tomasz Kowalczyk May 16 '11 at 19:07
  • @Tomasz, we also don`t know is this a bad or good way, as in different situations we can have unlimited bandwidth. Another option, that you offer, just live original is too extreme. For example, I took your avatar, and resize it to 150 and then to 75 px. It`s not not 4x larger, but only 2x :) as 150/75 will be 2. Also by files sizes (I did with simple ms office resizer): 8,40 KB (8 603 bytes) vs 3,67 KB (3 765 bytes) only 2.28 ratio. – gaRex May 17 '11 at 03:17
  • So if you should think about bandwidth, then 2 images, but if about disk space over bandwidth -- then only 1. – gaRex May 17 '11 at 03:18
  • @gaRex: It's 4x, because it is 2D, not 1D. 150x150=22500, 75x75=5625, ratio=4. For file size, I agree, it is not that straight way. – Tomasz Kowalczyk May 17 '11 at 08:38
2

I've been working on this problem for a little while and have come across 3 main ways of doing this:

  1. Generate thumbnail images at the point of upload as a background process.
  2. Generate images on demand through the main application
  3. Generate images on demand using the URL as an API

Each approach has its pros and cons.

  1. This approach is the most restrictive, you have to know all the uses and sizes of thumbnails up front so that you can generate them immediately after upload. The main advantage is that the images can be served efficiently using a server like nginx and are just like any other static resources.
  2. Django has a library called sorl-thumbnail which provides a template tag for generating thumbnails of all kinds as and when they are needed. It uses a fast key/value store to keep track of what thumbnails have been generated, and invalidates stale generated images automatically if it detects the source image has been changed. The template tag then returns the URL for the generated image, which can be served directly from nginx without going through a scripting layer. More flexible than 1, but you can't (for example) generate an image URL using JavaScript and expect it to exist, it has to be done by the website's backend code or templates.
  3. Fully dynamic and flexible, you can get whatever version of the image you want just by tweaking the URL, Amazon uses this method as do all those placeholder image generation websites. Can generate URLs in JavaScript and do whatever fancy things you want. The website itself doesn't need any knowledge of the thumbnailing layer short of maybe a few helper methods to generate the URLs for you. BUT, this is obviously the most resource-intensive way of doing things and you need to make sure your architecture can handle the load. You need to use every trick in the book to invalidate caches in a timely manner, avoid unnecessary hits on the resizing script etc.

I'm a big fan of the 3rd way of doing things, I like image generation to be completely isolated from my main website functionality and I like the considerable flexibility, but you need to know what you're doing when it comes to configuring your servers to handle it.

Andrew Ingram
  • 5,160
  • 2
  • 25
  • 37
0

I tell you what I do. I allways store the full size image, but renaming it ussing the db ID with leading zeros. On the first use I create the thumbnail and store it in other folder, using it in next calls.

morgar
  • 2,339
  • 17
  • 16
0

If server space and bandwidth is an issue you should consider using an cdn.

Amazon has a good service,

Ibu
  • 42,752
  • 13
  • 76
  • 103