Suggestion: Optional image quality setting w/ each upload section editor

10 posts by 5 authors in: Forums > CMS Builder
Last Post: June 21, 2019   (RSS)

By Deborah - June 20, 2019

This may be a feature request, but maybe someone here has a solution.

My sites often require image uploads of varying quality needs. For example, the same site could contain all of the following:

1) highly detailed line art map (high-quality needed for clarity)
2) general photos (medium-quality okay)
3) full-screen background images (low-quality needed for reasonable download size)

I usually set the CMSB quality to "Normal", but in the above scenarios that doesn't benefit #1 and #2.

I can't speak of one client who has image editing skills needed for creating an appropriately resampled image prior to upload, so linking directly to the uploaded image won't help.

My current solution is to create use Mobile Detect (http://mobiledetect.net/) and size images for three sizes of viewports for larger images, but this is still not ideal. With Mobile Detect and "Normal" quality setting, images can still be too large in terms of (download) file size.

Does anyone here have a workaround for this? Interactive Tools, have you a custom plugin?

All ideas are welcomed!

~ Deborah

By Toledoh - June 20, 2019

I've played around with https://cloudinary.com/ a few times, and have bounced the idea of integrating it with CMSB a couple of time - but never had the right project for it.  

Cheers,

Tim (toledoh.com.au)

By Djulia - June 21, 2019

Hi,

You can use HTML5 picture tag and SRCSET Attribute :
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

"srcset defines the set of images we will allow the browser to choose between, and what size each image is."

I also use lazysizes :
https://github.com/aFarkas/lazysizes

Thanks,
Djulia

By Deborah - June 21, 2019

Tim and Djulia, I'm having a look at your suggestions. I can envision uses for each of them - good additions to my toolbox.

If CMSB had in addition to the general image quality setting an optional quality setting for image upload fields, that would offer additional flexibility. Regardless of viewport size, I'd still ideally want to control image quality.

Thanks so much for your ideas.

~ Deborah

By darylm - June 21, 2019

Hi Deborah,

See if you can override the image quality global variable value using a plugin hook.

$SETTINGS['advanced']['imageResizeQuality'] = '80'; // 80 for normal, 65 for lowest and 100 for max quality

If your upload fields that require different image quality are in separate sections, you can use section_init hook.

Hope that helps!

Cheers,

Max

By Deborah - June 21, 2019

Hi, Daniel.

Thanks for your response and the helpful article. I do graphics work and am familiar with the pros/cons of various image formats.

Are you saying that during upload a PNG image (unlike the other image formats) is not downsampled when the various thumbs are created?

~ Deborah

By daniel - June 21, 2019

Hi Deborah,

PNGs will still experience downsampling when generating smaller images sizes meaning there's still some potential for loss of fidelity (I think the only way to avoid this is with vector formats); the main difference is the PNG (both the original and generated thumbnails) should remain uncompressed through the upload process, regardless of the image quality setting.

Daniel
Technical Lead
interactivetools.com

By Deborah - June 21, 2019

Daniel, I wasn't aware that PNGs were handled differently by CMSB. That can certainly help in specific situations where clarity is more important than file size.

Thanks.
~ Deborah

By Deborah - June 21, 2019

Max, you may have the perfect suggestion, however I'm not experienced at coding plugins and wouldn't know where to start.

I'll run your idea by Interactive Tools and see if it's something I could hire them to create.

Thank you!
Deborah