3

I am trying to bring image file sizes down as much as possible, but the images on the server turn out to be quite a bit larger than the same images I have saved locally.

For example, I have one local image that is 70KB. When I upload it into Assets it‘s 180KB. On the page itself it is being transformed like so:

{% set imgSize = {
    mode: 'crop',
    width: 960,
    height: 450,
    quality: 75,
    position: 'center-center'
} %}

That transformed image on the page is then 208KB.

So rather than optimising file sizes as I thought it did, my set up is making the files 3 times larger.

I have checked the server with phpinfo, and I can't see Imagick installed, but GD v2.1.0 is.

What can I do to prevent the images from becoming larger?

Katrin
  • 674
  • 5
  • 16

2 Answers2

3

This is likely to be a combination of factors.

Firstly; GD isn't all that great, so if you can get ImageMagik installed it's possible you'll get better results.

Secondly; This can depend on the image format too. PNGs for example are far more complicated to save optimised and it's unlikely that a PNG generated by a server is going to match the level of optimisations you can get locally through tools like TinyPNG and ImageOptim. PNGs have many more options for quality control than JPG's simple slider. Try to avoid transforms on anything other than JPGs.

Thirdly; check you're uploading an image that's larger than the crop you're creating. Craft has a horrible behaviour of blowing up images to match the crop. It's not really cropping, it's just taking any image and making it the size requested. That can mean 'cropped' images larger in filesize and dimension than the source.

Matt Wilcox
  • 3,199
  • 1
  • 14
  • 28
  • Thanks Matt. In a different answer Brad Bell says that Imagick produces larger files size, so that’s confusing. But you are absolutely right, the problem seems to be with PNGs. JPG images are pretty much the same size on the server, though again a bit larger once transformed (by a third). None of the images are upsized with the transform. Having PNGs 2.5 times larger on the server is still not ideal though. Wonder if there’s anything else that can be done to bring that down. – Katrin Nov 16 '15 at 12:03
  • Worth asking for clarification from the Craft devs; I had thought that ImageMagik had been tweaked to give smaller results in addition to better quality.

    I would try to avoid PNGs as client-addable assets altogether. They're just not appropriate most of the time. I switch all Transforms to output JPGs. You could possibly try detecting the image type and conditionally applying transforms to avoid the issue and keep PNG Transparency (Assuming that's why you need PNG).

     – Matt Wilcox Nov 16 '15 at 12:21
  • PS: if you're also getting larger JPG file sizes than what you're uploading as source, try dropping the quality of the transform. – Matt Wilcox Nov 16 '15 at 12:23
  • JPGs seem pretty identical. Unfortunately, the site has images that contain some fine text, and using JPGs for those has resulted in the text looking too fuzzy. Also just spotted an image that is 75KB on local and is output at a whopping 470KB on the site. So still keeping my fingers and toes crossed for some solution with PNGs... – Katrin Nov 16 '15 at 12:34
  • Imagick/ImageMagick did the trick! Now the difference in size is only about 5% - so very minimal. Hooray! – Katrin Nov 18 '15 at 11:38
2

Image optimization has been greatly improved in Craft 2.5, for servers running ImageMagick. If you are OK with running beta software, install that and future uploads should be much smaller. http://buildwithcraft.com/beta

Brandon Kelly
  • 34,307
  • 2
  • 71
  • 137