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

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.  

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

Hi Deborah,

I'm not aware of any existing plugins/code that enables this feature, but it's an interesting idea!

One thing that I can suggest regarding #1 is to try using a lossless format such as PNG. This is a bit less complex to teach a user than resampling JPEGs and it won't lose any quality during upload. The main caveat is that PNG size depends a lot on the type of image, but if you're using images with crisp lines and flat colours it could be a good option. If you're able to switch the high-detail images over to PNG then you should have some more room to lower the overall quality/size of the other images.

Here's some more info on the difference between JPEG and PNG: https://www.interactivesearchmarketing.com/jpeg-png-proper-image-formatting/

Hope that helps!

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

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

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

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, 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

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