• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 642
  • Last Modified:

images resize performance

Hi experts,

I have a website written in Coldfusion.

For now, we use several images folders, with different size (1 for largest, 1 for thumbnails, etc).

I want to reduce the disk usage on the server and to improve displaying performances.

So my question is : what solution is the best in terms of performance ?
- To keep several folders with different images sizes ;
- Or to keep only the biggest images, and to re-size them according the needs.

If the best solution is to re-size them : is it better by specifying the width & height in the <img /> html tag (for instance 50% for both) ;
or to use the <cfimage /> coldfusion tag ?
Or maybe is there another solution more suitable ?

Anyway, I want if possible to remove unneeded files & improve displaying performance.

Thanks a lot
1 Solution
Tom BeckCommented:
I cannot speak to the ColdFusion part of the question, but:

Specifying a smaller width and height in the <img /> tag will not improve performance because the browser still needs to download the entire image file from the server.

For the thumbnails, you have to take the extra step of re-sampling your full size images to create new image files that are drastically reduced in size. This can be done on-the-fly, server side, or you can have separate copies of the images stored on the server like you have now.

To save space on the server, be certain that the full size images are only as large as they need to be to fulfill the largest display size called for in the browser.
adam1hAuthor Commented:
Okay, it's logic.

What do you mean by resize on-the-fly, what would you use ?

If I understand well, I can so use the coldfusion function who is performed server-side.
As tommyBoy stated, you would rarely ever want to "resize" an image by means of setting the img width and height attributes to something smaller than the actual image.  Even if you set those attributes to "50%" the browser will download the original size image and then only RENDER it 50% smaller – but at that point the bandwidth and time is already lost.  In most cases you would want to resize the image on the server "on-the-fly".

In a simple case of having "original" size versus thumbnail size, it's usually best practice to just do all the resizing at the time the file is being uploaded / saved.  This one time procedure will allow all subsequent requests for those images to already have the resized images available (so your customers don't have to wait for the resize).  If your business model, however, had an original, a thumbnail, and 10 different sizes in between – and you are worried about a bunch of images never EVER being used, then employ this strategy:

1) User uploads file
2) thumbnail is automatically created
3) When a user requests a "special" size, check to see if that file already exists
3a) If file exists, allow for download
3b) If file does not exist, resize it on the fly, allow the user to download it.  (All subsequent requests for that size file will now already have it saved on the harddrive)

So you see, you must examine your business model closely to determine if you think that the resized images will be widely seen by your users.  In the case of thumbnails, they will likely all be seen sooner or later, so best to resize them as early as possible.

As for the best way to resize with Coldfusion, this is how I do it:

<cfset temp_image = ImageRead(path_to_your_file)>
<cfset ImageResize(temp_image, new_width, new_height, "mediumQuality")>
<cfimage action="write" source="#temp_image#" destination="#full_path_to_new_filename#" quality="1" overwrite="yes">

I find the "mediumQuality" and "quality=1" to be the best combination to balance performance versus quality.  new_width and new_height in your example would be "50%"  If you require something with a max width/height, you may want to do some fancier math based on temp_image.width and temp_image.height.

Even better than Coldfusions's built in image functions is a custom tag called "ImageCR"  I have used ImageCR 3 (3.5 is currently available) and the performance was faster AND it delivered better quality photos.  So, I would try Coldfusion's built in functions first and see how happy you are with the results.  If you have PHP installed on the server also, and you are experienced there, you may find better performance/results with the GD2 library.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now