Using The Quality Attribute With The CFImage WriteToBrowser Action

Posted August 3, 2012 at 9:33 AM by Ben Nadel

Tags: ColdFusion

The other day, I needed to do some on-the-fly conversion of PNG image files to JPG format in ColdFusion. This was part of stop-gap measure at InVision for mobile devices that can handle more JPG data than they can PNG data. ColdFusion makes this kind of process super simple with the WriteToBrowser action of the CFImage tag. All I had to do was the following:

  • <!--- Convert PNG to JPG on the fly and write IMG tag to browser. --->
  • <cfimage
  • action="writeToBrowser"
  • source="#pngFilePath#"
  • format="jpg"
  • />

This worked well; however, I noticed that some of the JPG images had undesirable compression artifacts showing up. It occurred to me that the quality setting used to convert the PNG image to JPG was less than 1 (ie. less than 100% quality).

After looking at the ColdFusion documentation, I didn't see any way to change the quality of the resultant JPG. So, as an experiment, I tried to add the "quality" attribute to the CFImage tag. Since this attribute works with other CFImage actions, I figured, though undocumented, it might work with the WriteToBrowser action.

And, it did!

To see this in action, I put together a simple ColdFusion script that outputs three images using three different CFImage-WriteToBrowser settings:

  • Default setting (guessing it's ~ 75% quality).
  • Quality 100% (ie. 1).
  • Quality 20% (ie. 0.2).

NOTE: I am guessing the default quality is 75% since this is the documented default value for CFImage-Write actions.

Take a look:

  • <!--- Read in our PNG image. --->
  • <cfset png = imageNew( "./pull.png" ) />
  •  
  •  
  • <!--- Write out as a JPG (default settings). --->
  • <cfimage
  • action="writeToBrowser"
  • source="#png#"
  • format="jpg"
  • />
  •  
  • <br />
  • <br />
  •  
  • <!--- Write out as a JPG at 100% (using "quality" attribute). --->
  • <cfimage
  • action="writeToBrowser"
  • source="#png#"
  • format="jpg"
  • quality="1"
  • />
  •  
  • <br />
  • <br />
  •  
  • <!--- Write out as a JPG at 20% (using "quality" attribute). --->
  • <cfimage
  • action="writeToBrowser"
  • source="#png#"
  • format="jpg"
  • quality=".2"
  • />

And here is what the page output looks like:


 
 
 

 
 CFImage WriteToBrowser quality can be changed using the quality attribute. 
 
 
 

As you can see, the second image with explicit quality of "1" has less compression artifacts than the first image at whatever the default quality setting is.

I don't know if this is an unintended side-effect of the underlying "write" action that ColdFusion must be performing; or, if this is simply a mistake in the documentation? But, it's pretty cool that this works.




Reader Comments

Aug 4, 2012 at 8:35 AM // reply »
8 Comments

My fiendish plan to spoil your day has been foiled by you figuing out the problem AND because I'm leaving the first comment thereby MAKING your day!


Aug 4, 2012 at 2:46 PM // reply »
11,238 Comments

@Evil Ben,

Ha ha, you're a nut!


Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
May 17, 2013 at 7:42 PM
HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data
Ben - thanks so much for posting these Angular articles and findings, they've been a huge help towards learning one of the more 'complex' JavaScript frameworks out there (IMO). I have been using Angu ... read »
May 16, 2013 at 5:01 PM
UPDATE: Parsing CSV Data Files In ColdFusion With csvToArray()
Your code was the closest thing I've found to obtaining some direction for converting ISO fields to values that CF can translate properly. Thank you for posting! ... read »
May 15, 2013 at 10:37 PM
Very Simple Pusher And ColdFusion Powered Chat
hi id making plz easy ... read »
May 15, 2013 at 6:07 PM
Making SOAP Web Service Requests With ColdFusion And CFHTTP
Ben, you once again saved my bacon at work. Thank you, thank you, thank you! ... read »
May 15, 2013 at 4:15 PM
What If All User Interface (UI) Data Came In Reports?
@Josh, Thanks! @Ben, I definitely recommend the David West book "Object Thinking" I've been quoting from. It goes deeply into the philosophy and history of OO programming. His breadth ... read »
May 15, 2013 at 11:36 AM
Ask Ben: Print Part Of A Web Page With jQuery
I found this helpfull when you need to keep (refresh) the original parent page after closing the iframe child print dialog (Hoping you're not using a form at this time so it won't submit again): On ... read »
May 14, 2013 at 7:13 PM
What If All User Interface (UI) Data Came In Reports?
@Jonah, If there's any books you'd recommend on the subject of domain modelling, I'd love to hear it. I just downloaded the free PDF of "Domain Driven Design Quickly". Figured I'd give it ... read »
May 14, 2013 at 6:57 PM
The UX Of Prototyping: Low-Fidelity Is The New High-Fidelity
@Phillip, I'm not sure I follow what you mean? Are you saying that you looked at the list of widgets provided by the jQuery UI and let that be your style guide? ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools