Suggestion: Optional image quality setting w/ each upload section editor
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!
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.
You can use HTML5 picture tag and SRCSET Attribute :
"srcset defines the set of images we will allow the browser to choose between, and what size each image is."
I also use lazysizes :
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.
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!
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?
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.