How to make PNGs crisp using Imager + Optipng and Craft 3? I've installed Imager in a Craft 3 site and everything looks fine except my PNGs are fuzzy. I've set 'pngCompressionLevel' =&gt; 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).



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
   }) -%}

   &lt;img src="{{ sizes[0].url }}" 
        sizes="100vw" 
        srcset="{{ craft.imager.srcset(sizes) }}" 
        width="150"&gt;
{%- 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.

&lt;img src="/imager/partners/acme-2018_12345.png"
     sizes="100vw"
     srcset="/imager/partners/acme-2018_12345.png 150w"
     width="150"&gt;


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

Any help would be appreciated!
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' =&gt; '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.