<p>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:</p>

<ul>
<li>Make sure you're using the Imagick image driver in Craft, that gives you alot more options to play with (<code>'imageDriver' =&gt; 'imagick'</code> in your general config).</li>
<li>Try playing around with the <a href="https://github.com/aelvan/Imager-Craft/#resizefilter-string" rel="nofollow noreferrer"><code>resizeFilter</code> config setting</a>. 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.</li>
<li>Make sure <code>smartResizeEnabled</code> is set to <code>false</code> (it's the default), as this does a lot of up and down scaling to create a file that has a smaller filesize.</li>
<li>Consider running the <a href="https://github.com/aelvan/Imager-Craft/#sharpen-bool" rel="nofollow noreferrer">sharpen</a> or <a href="https://github.com/aelvan/Imager-Craft/#unsharpmask-array" rel="nofollow noreferrer">unsharpmask</a> 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.</li>
<li>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.</li>
<li>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.</li>
</ul>

<p>Hope this helps.</p>

CC BY-SA 4.0
2018-06-30T19:03:12.510Z
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
CC BY-SA 4.0
2018-06-30T19:29:47.703Z
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..
André Elvan
CC BY-SA 4.0
2018-06-29T08:27:23.013Z
2018-06-29T08:27:23.013Z
André Elvan
<p>I've installed Imager in a Craft 3 site and everything looks fine except my PNGs are fuzzy. I've set <code>'pngCompressionLevel' =&gt; 0,</code> because I'm using Optipng and <a href="https://github.com/aelvan/Imager-Craft#pngcompressionlevel-int" rel="nofollow noreferrer">the docs</a> 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).</p>

<p><a href="https://i.sstatic.net/HGDUA.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/HGDUA.png" alt="enter image description here"></a></p>

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

<pre><code>{%- 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 %}
</code></pre>

<p>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.</p>

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

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

<p>Any help would be appreciated!</p>

CC BY-SA 4.0
2018-06-28T06:59:25.030Z
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..)?
André Elvan
CC BY-SA 4.0
2018-06-28T18:19:05.190Z
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
<craft3><image-transforms><plugin-imager>
How to make PNGs crisp using Imager + Optipng and Craft 3?
# How to make PNGs crisp using Imager + Optipng and Craft 3?

(Asked by: username_0 on 2018-06-27)

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).

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

   
{%- 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.


I've tried taking out the different config settings like mode, allowUpscale, and interlace but they have no effect.
Any help would be appreciated!

**Tags:** craft3, image-transforms, plugin-imager

> **Comments:**
> **username_1**: 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..)?  
> **username_0**: 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?  

---

## 1 answers

### Answer by username_1 on 2018-06-29. Score: 3 | Accepted answer

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](https://github.com/aelvan/Imager-Craft/#resizefilter-string). 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](https://github.com/aelvan/Imager-Craft/#sharpen-bool) or [unsharpmask](https://github.com/aelvan/Imager-Craft/#unsharpmask-array) 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.

> **Comments:**
> **username_0**: 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.  
> **username_1**: 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..  

---

