Images blurry after resize or cropResize

Support
1

Is there any way to configure the quality of the images that Grav resizes / crops? I have tried this with png and jpg so far and though I am just resizing the images by less than 20%, they all get a bit blurry. Any workarounds for that apart from saving images in different sizes from the start (but then why have resize)?

Regards
Nils

2

@vfor, I haven’t noticed a blurry result before.

Would you mind sharing your resizing/crop commands and before/after images?

3

There is not much happening there. Basically I am using the default Quark base.html.twig for general layout (loading css & js as well as defining navigation). And this is what I am using inside my template:

<div class="box">
  <div class="scroll-pane">
    <div class="scroll-content">
      <div class="padding">
        {{ page.content|raw }}
        <p><a href="#" class="button5">More info</a></p>
      </div>
    </div>
  </div>
</div>

Plus this piece of Markdown as content:

![](portrait.png?classes=float-right&resize=261,197)
# About me

Firstname Lastname  
Artist & Psychologist

I have a high resolution display but if I resize the image with other online-tools (even tried with ImageMagick) the result is always good and not blurry. So I assume there must be some kind of setting. If it helps I can post the results here as well as images. And it does not only happen with png but also jpg.

Any help/hint is highly appreciated.

4

@vfor,
I did some comparison using a download of the following image: https://unsplash.com/photos/_NNsOxgemgg (5866x7370).

default.md:

![](willie-fineberg-_NNsOxgemgg-unsplash.jpg?resize=261,328)
Resized using Grav

![](/user/pages/02.typography/willie-fineberg-_NNsOxgemgg-unsplash-gimp.jpg)
Resized using Gimp

![](/user/pages/02.typography/willie-fineberg-_NNsOxgemgg-unsplash.jpg)
Original
  • All resizing (factor ~ 1/20) is with keeping aspect ratio, using Grav and Gimp.
  • Used fresh installation of Grav 1.6.23 + Quark
  • Used browser Chrome
  • To exclude any effect of Quark’s css/js I used a bare template only containing {{ page.content|raw }}
  • The following image is a screenshot of the resulting page.

scaling
scaling800×357 512 KB

  • Yes, there is some blur and loss of quality, which is acceptable to me, but whether the loss is acceptable depends on the use-case I guess.
  • I would say that Gimp, using default settings, shows most artefacts and loss of quality. Something I did not expect…
1 Like
5

I have absolutely no idea what I am talking about : Does it make a difference if ImageMagick is installed vs. using the GD library ?

6

@anon76427325 Thank you for this particular interesting comparison. I am not surprised to see Gimp struggling with this task. It seems that the problem only occurs when using PNG-24 that have been compressed already and then using Grav to resize the pictures. And it seems that it is only really visible with faces. So I stick with resizing the images in an external graphics tool and then uploading them to Grav. But I will keep an eye on it throughout my next projects.

7

@vfor, Normally I always crop, resize and compress images outside of Grav using Gimp. But for a responses masonry with many images and multiple sizes, it felt too much work to do it manually, so I used the ‘derivatives’ function to create a srcset. I didn’t notice any image degradation. Maybe I should have a closer look…

Thanks for the feedback on your experience with PNG-24. Have you tried webp? The latest release candidate of Grav 1.7 has added support for webp.