4

I'm using image transforms to create 1x versions of hdpi 2x images but one area I get slammed on web page performance is loading these images. Is it possible to compress them and if so, how?

4

All common image file formats are compressed, even lossless formats like RAW, TIFF or PNG use compression!

To reduce file size of you images you should choose a lossy format (avoid TIFF Baseline or BMP), and accept some degree of information loss to reduce the file size. You usually set this quality to file size ratio in percentages (for the web). Craft's default quality ratio applied on transforms, defaultImageQuality, is set to 75%, but you can always set it to your needs from the Control Panel or in your templates.

There's a nice chart on Wikimedia, illustrating the relative quality of quality settings for JPG formats.

Additionally I'd recommend you to have a look at this other question about transformation performance with image libraries supported by Craft.

  • I'm fully aware of how to optimize and export images for use on the web. I used to use Debabblizer back in the day after all. I'm looking for something along the lines of TinyPNG or jpegoptim compressing the image even further after it's transformed. My source files are all compressed using ImageOptim or TinyPNG on the desktop prior to uploading but the image transforms receive no further optimization and are flagged for it on web site performance tests. – Stuart McCoy Jul 31 '14 at 14:18
3

Yes, you can do this if you use the Imager plugin. Here's how: Creating Optimized Images in Craft CMS

2

Compress? No. But you can set a default image quality for transformed images with the defaultImageQuality config setting that can be overridden on a per-transform basis from the control panel.

That quality value gets passed onto the respective GD or Imagick driver when generating the image and will affect image size and quality.

  • 1
    I'm trying to avoid degrading image quality as much as possible. I'm already compressing the source images but all web speed tests flag the transformed images as candidates for compression. Would be nice to have this ability given the recent focus on site performance. Perhaps a feature request is in order? Find a way to have image transforms compress images using TinyPNG, jpegoptim, gifsicle, etc. – Stuart McCoy Jul 31 '14 at 14:15
  • Hrm... maybe. Feels like that might be falling into plugin territory, though. – Brad Bell Jul 31 '14 at 18:21
  • This has been on my mind too as I'd love to convert images to .webp too – Niall Thompson Aug 1 '14 at 14:31
  • Yeh it would be great to have Craft run something like jpegoptim (say if it's installed on the server) right after saving the transform. Really shaves a bit off with no degradation of quality. – RitterKnight Jul 18 '15 at 18:56
0

Double check that the page speed reports are not flagging the images because you're rendering them at a smaller size than their natural pixel size. I believe it give a very similar message if you do.

For example; check you're not using a 1000px wide image and displaying it at only 700px. You'll want to look into the Picture element if that's happening and you're not already using it. In fact you'd want to use the picture element for different pixel densities too.

https://developer.mozilla.org/en/docs/Web/HTML/Element/picture

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.