[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


images resize performance

Posted on 2010-11-23
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…
Suggested Courses

650 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