0

Is there any way to set a specific level of jpeg compression and vary that according to the upload destination? I'm trying to work out how best to integrate EE's native image upload features with the soon-to-be-standard picture element, and in particular to make use of the compressive images technique. This method involves saving retina images at maximum compression/minimum picture quality, generally resulting in smaller file sizes than those of non-retina resolutions saved at a more 'normal' compression level.

The problem comes when EE performs any sort of resizing, because it resaves the jpeg at a fairly high quality (level 9 out of 10, I think), which completely undoes the file size benefits of an image originally saved using the compressive images method. So either the client must create the retina image at a size that requires no resizing by EE (not very end user-friendly, and doubly-unwieldy if you need more than one size of retina image), or one must do away with trying to use the compressive images method.

I know that CE Image can adjust the compression on the fly, but AFAIK it does so on the image tag itself, which won't mesh very well with the picture element syntax (you'd need to apply CE Image's 'quality=""' parameter to the source srcset attribute of the Picture element… I think). So the only way around it would seem to be to establish separate upload destinations (or specific image-manipulation sub-destinations) that have their own specified compression level.

So I upload a big image, say 1700px wide, to the upload destination blog_images. The max width for the destination is set to 1200px and maximum compression (quality = 0) -- this becomes my retina image. There is also an image manipulation set for that destination that resizes the image to a width of 600px and saves it with normal compression (quality = 9). That becomes my non-retina image. Of course I can imagine various further image manipulations with different compression levels -- mobile size retina and non-retina images, for example.

Is this varying of compression levels possible any way?

  • I already did a Feature Request, because of the same reasons. Try to send a link to this post to Wes Baker. – Robson Sobral Jun 27 '14 at 19:38
1

There is no native way, and I have not seen anything in the 3rd party market. I would make a good FR - I can see just being able to set the compression level on each image manipulation.

| improve this answer | |
2

CE Image can output just a URL to a manipulated image. Meaning that it could compress the image on the fly (if the image hasn't already been compressed on a previous page load), and can still output the image's URL where needed. CE Image has a quality= setting for jpg images, and uses filters to optimize png images automatically when possible.

Additionally, CE Lossless can be enabled to take the compression with CE Image even further. Between jpegtran, jpegoptim, optipng, pngout, pngcrush, smushit, and pngquant, those images can be squeezed pretty tight. For example, jpegtran strips all image metadata, provides lossless optimization via Huffmann compression, and changes the images to progressive.

By default, CE Lossless will also compress images as they are uploaded to EE (but that can be disabled in the config).

The smush.it driver for CE Lossless can be used without even having to install anything on the server.

Disclaimer: I'm the author of the CE Image and CE Lossless add-ons.

| improve this answer | |
  • Hi Aaron, thanks for the input. Looking at the docs for CE Image it still seems unclear how well it would mesh with the syntax for Picture (the docs of course predating Picture). As I understand it the picture element feeds one of a variety of scrset URLs (contained within the child source element) to its child IMG element. Can CE Image's 'quality' setting, then, be applied to specific 'source srcset' URLs? If so then it might well do the job and perhaps I ruled it out it unfairly. – RickL Jun 28 '14 at 10:48
  • If it is something like the Embedded content whatwg spec (which the picture element specification will be folded into): <img alt="" src="banner.jpeg" srcset="banner-HD.jpg 2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x">, then you could manipulate the quality of each image's URL via CE Image as needed. I don't have enough characters for the example, see next comment. – Aaron Waldon Jun 29 '14 at 4:40
  • This example isn't beautiful or elegant, but this is what it would look like if you wanted to set the quality of the main image and each image in the srcset individually: {exp:ce_img:single alt="" src="banner.jpg" quality="90" srcset="{exp:ce_img:single src='banner-HD.jpg' quality='70' url_only='y'} 2x, {exp:ce_img:single src='banner-phone.jpg' quality='70' url_only='y'} 100w, {exp:ce_img:single src='banner-phone-HD.jpg' quality='60' url_only='y'} 100w 2x" parse="inward"} A default quality can be set in the config, and snippets for the params could be used to clean it up a bit. – Aaron Waldon Jun 29 '14 at 4:42
  • Interesting. Not having used CE_Image (yet) and still feeling my way through the picture element's syntax (which seems to be a combination/conflation of the earlier picture element spec and the competing srcset syntax) it's hard to work it through in my head without actually buying a licence for CE_Image and trying it out to see what html gets output. That's probably the best option. – RickL Jun 29 '14 at 11:34
  • Aaron: Just coming back to this in the context of responsive images (picture, srcset, etc). Say I had a particularly gnarly picture element, with loads of source and srcset parameters -- literally dozens of image options for the browser to choose from (eg. the last example on this page: dev.opera.com/articles/responsive-images). Would CE need to generate the manipulated image for each option, even though only one was eventually going to be downloaded? – RickL Jun 4 '15 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.