CF11: Problem with ImageResize()

[WolfShade]

Hello, all,

I've got an issue that has me perplexed.

We have a section on our restricted site for news.  There is an admin panel that allows someone (authorized) to create/edit news articles, and one of the optional fields is for uploading an image.

Now, so far this hasn't really presented any problems.  Until today, every image that was uploaded fit a particular format ratio, so everything appears correct.

Today, two images that are much more wide compared to the height have been uploaded.  When viewing the actual article, it looks okay.  However, on the 'landing' page of the site, there is a carousel that rotates among four selected articles that contain an image, along with four clickable thumbnails on the right side.  For both the thumbnails and the full-size image associated with it, those two images extend past the right of the image space, I'm assuming it's using overflow: hidden;.

I tried to update the page that processes the form, using imageInfo() to check height/width of all images, and use resizeImage() to bring the dimensions down.  First I check the height, and if it's more than 325px I resize it down to 325px.  Then I check for width, and if the width is greater than 528px, I resize it down to 528px.

But the images are pixelated and blurry.  I've put the old page back, for now, but would really like to understand why the jpg images are pixelated and blurry after going through resizeImage().

<cfif info.height gt 325>
     <cfset imageResize(myImage,"","325","highestQuality",0) />
</cfif>
<cfif info.width gt 528>
     <cfset imageResize(myImage,"528","","highestQuality",0) />
</cfif>

V/r,

^ _ ^

[Charlie Arehart]

On the surface, I see no reason why you would experience this, but it may depend on the image. Have you confirmed that? Have you dug into the various metadata about the images that you may be comparing, to find an answer there?

And are you sure the problem is in this processing of the image, to resize it? Couldn't it be in the carousel showing it? Have you don't something to prove that, looking at the resulting image on your own?

You may also want to make sure that the code you think is running is indeed running. Put some cflog or other debugging statements in to be sure.

Also, if you created some simple standalone code, you could try the code on cffiddle.org (which only supports cf2016 and 2018) or trycf.com, which supports them as well as 11 and 10, and lucee.

Or if nothing else, some of us may try what you share to confirm we see the same blurriness. The problem may not be with your code, but perhaps with something in your environment. And I realize you may say you can't share the code or the image. I'm just proposing that you consider making a small stand-alone proof case, if you don't get any better solution.

[WolfShade]

Hi, Charlie,

I have not dug into the meta data, as I'm not a 'graphics guy', but I can ask our designer to take a look at the files in question.

The fact that the image looks fine in the actual article, and is only screwed up in the carousel, does cast some doubt on the processing being the culprit.  But I can't see where any of the JavaScript for the carousel would have any impact on image quality, especially considering that if the image is resized it is resized to precisely the dimensions of the containing div.

https://forums.adobe.com/people/Charlie+Arehart  wrote

Or if nothing else, some of us may try what you share to confirm we see the same blurriness. The problem may not be with your code, but perhaps with something in your environment. And I realize you may say you can't share the code or the image. I'm just proposing that you consider making a small stand-alone proof case, if you don't get any better solution.

The code, I can most likely share.  The image, absolutely not.  If this were for our public site, no problem.  Unfortunately, this is for our restricted site, and any information or images posted there cannot be made publicly available.  One has to have a CAC (Common Access Card) in order to access our restricted site.

And as far as it possibly being something in our environment.. that would not surprise me, at all. 

V/r,

^ _ ^

[BKBK]

Might a change in aspect ratio be causing the problem? What happens when you test with the following code, which maintains aspect ratio.

<cfset maxHeight=325>

<cfset maxWidth=528>

<cfif myImage.height gt maxHeight or myImage.width gt maxWidth>

    <!--- Rounded up to nearest percent --->

    <cfset heightPercent=int((maxHeight/myImage.height)*100+0.5)>

    <cfset widthPercent=int((maxWidth/myImage.width)*100+0.5)>

    <cfset resizePercent=min(heightPercent,widthPercent) & "%">

    <cfimage action="resize" height="#resizePercent#" width="#resizePercent#" source="#myImage#" destination="absolute-path-to-image-file" overwrite="true">

</cfif>

[WolfShade]

It's my understanding that if one of the dimensions are left blank that the resize will keep the aspect ratio.  But I will see if we can give that a shot.  Unfortunately, the admin panel for this doesn't have a development environment equivalent, so testing would be done 'live'.  But we might be able to fake a way around it. 

What I have not mentioned in my OP was that the images are being stored in a database, and at one time a few years ago we were experiencing a severe lag (like, it literally took 60 seconds on average to load the page) that we eventually tracked down to being the result of the database working extremely slow (we have since corrected this issue.)  So while we were troubleshooting it, we decided to attempt a workaround while troubleshooting.  We set it so that once every five minutes the application.cfc would query the database for the carousel images, save those images to a folder in the web root, and set the four filenames to application variables, and used the variables to indicate source for the img tags.  This did speed things up, a bit (45 seconds as opposed to ~60 seconds.)  And we did make sure that the image used while testing was, indeed, the freshly uploaded image saved to the web root folder.

V/r,

^ _ ^