I've installed Imager in a Craft 3 site and everything looks fine except my PNGs are fuzzy. I've set 'pngCompressionLevel' => 0, because I'm using Optipng and the docs say to do this. The PNGs have transparency. Here's a screenshot of the two (left is the normal asset, right is the asset after sent through Imager).

enter image description here

My template code mostly looks like this (a lot of it is originally refactored in a reusable macro):

{%- set logos = entry.partners.all() -%}
{% for logo in logos -%}
   {%- set sizes = craft.imager.transformImage(logo, [{ width: 150 }], {
      format: 'png',
      mode: 'crop',
      allowUpscale: false,
      interlace: true,
      pngCompressionLevel: 0
   }) -%}

   <img src="{{ sizes[0].url }}" 
        srcset="{{ craft.imager.srcset(sizes) }}" 
{%- endfor %}

The HTML it produces is below. I'm only using one resize width for these logos since they are small, but my macro is setup to accommodate other images with larger srcsets.

<img src="/imager/partners/acme-2018_12345.png"
     srcset="/imager/partners/acme-2018_12345.png 150w"

I've tried taking out the different config settings like mode, allowUpscale, and interlace but they have no effect.

Any help would be appreciated!

  • That's a pretty huge difference in sharpness.. Couple of questions; what image driver are you using, what size is the original file, and have you tried without optipng (don't think that should make any difference, but..)? Jun 28 '18 at 6:59
  • How can I check which image driver I'm using? The size of the original file is 275 × 169, so it's being resized downward, and it's originally a png file. I have not tried without optipng. Do you have a preference I should test with?
    – Ryan
    Jun 28 '18 at 18:19

Unfortunately, resizing images always tends to make them a little bit blurry, especially if the size that it's resized from isn't very big. But, here's a few things you can try:

  • Make sure you're using the Imagick image driver in Craft, that gives you alot more options to play with ('imageDriver' => 'imagick' in your general config).
  • Try playing around with the resizeFilter config setting. This is the algorithm used to resize the image. Some are good for photos, some are good for illustrations. Some give the resized image a "softer" look, some a "harder" one.
  • Make sure smartResizeEnabled is set to false (it's the default), as this does a lot of up and down scaling to create a file that has a smaller filesize.
  • Consider running the sharpen or unsharpmask effects on the transform. It might give undesired results if the image is too blurry, or the sharpen is too heavy, but it could be useful to just add a little bit more sharpness in the end.
  • AFAIK, optipng shouldn't be doing anything to the image that would impact the visual quality of it. But, just to eliminate that, make sure you try without any post optimization tools also.
  • Also, make sure that the image is actually displayed in the size that you've intended it to be (150px), and that you don't have any CSS rules on it that would result in it being treated as an GPU accelerated layer (transforms, etc). That blurs things like crazy. But, you can easily test if that's the case by opening the transformed image in a separate browser/application.

Hope this helps.

  • I managed to solve the fuzziness by taking off the [{ width: 150 }] set in the 2nd argument. FYI, when I added the 'imageDriver' => 'imagick' option to my general config, I got an error saying Class 'Imagick' not found on line 197 of the ImagerService.php file.
    – Ryan
    Jun 30 '18 at 19:03
  • Ok, that means you don't have the Imagick PHP extension installed/activated. You really should, this means you're using GD for transforming images, which is inferior to Imagick in so many ways. :) But glad you found a solution, although not resizing it might not always be desirable.. Jun 30 '18 at 19:29

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.