images resize performance

Posted on 2010-11-23
Last Modified: 2012-05-10
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
Question by:adam1h
LVL 38

Expert Comment

by:Tom Beck
ID: 34196132
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.

Author Comment

ID: 34196433
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.
LVL 10

Accepted Solution

js_vaughan earned 500 total points
ID: 34197261
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.

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question