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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now