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

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

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 Forrest

Toledoh Enterprises

www.toledoh.com.au

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!

Daniel
PHP Programmer
interactivetools.com

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 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
PHP Programmer
interactivetools.com

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