Images in low resolution

Hi, I upgraded my local installation to the 4.0 version, and all worked fine until I uploaded a new image. Kirby panel and the templates also display some images posterized, in low resolution. What happening?


Hi, I don’t really understand what exactly is happening.

So before you uploaded a new image, all images looked good both in the frontend and in the Panel?

And the low res images only appeared after uploading a new image?

What about the newly uploaded image? does it show up at all? Is it created inside the media folder?

Have you made sure to delete the media and cache folders when updating?

Are you using the standard GD or the IM thumb driver?

What is your local development environment?

Hi, thanks, Merry Christmas! I explain the issue:

  1. Yes, all images look good in both ambients before new uploads;
  2. Yes, only after new uploads;
  3. Many of them show as you see here both in the panel and the frontend, but some only in the panel;
  4. I deleted the media folder, not the cache folder. I think that I have to do it only to the media folder;
  5. Pardon, I don’t know anything about this. Where is the reference to this?
  6. Laravel Valet in MacOS 14.1, PHP Monitor to control the PHP versions.


Screenshot 2023-12-27 at 01.37.16

But if you don’t know this config option, you are probably using the default gd driver, but better double-check your config options.

Does the low resolution problem only affect certain image types, like only .png or only jpg? Is there anything that makes the affected images stand out from the rest that work (like huge size)? Or target size larger than original size?

Someone reported such an issue before (related to Kirby 3).

Hi @zebomfim some time ago I had a problem like yours, check this thread to see if that has the solution for you. Cheers Peter

I had the exact same problem but I forgot what fixed it… I think deleting the media folder did. Did you try that?

I recently upgraded from Kirby v3.6 straight to v4, and I’m coming up against this issue. It’s only happening on on a page where I’m using resize:

<img src="<?= $image->resize(800)->url() ?>" width="<?= $image->resize(800)->width() ?>" height="<?= $image->height() ?>" decoding="async"  alt="<?= $image->alt() ?>">

I only have GD as the driver, but that was fine with v3.6. I’ve tried various config changes and deleted the media folder each time, but no joy. My config is currently:

     'thumbs' => [
         'format' => 'webp',
         'quality'   => 100,
         'interlace' => false

Even with quality set to 100, the results are still very low res. Webp output is better than jpg (which was really low res) but still not as good as it was.

instead of doing the resize again and again i would try introducing a variable for performance reasons and because you can then read the height from the created thumb.

$thumb = $image->thumb(['width' => 800]); 
// alternatively define preset in config to set width/height/format/quality
// $thumb = $image->thumb('my-preset'); 
<img src="<?= $thumb->url() ?>" 
  width="<?= $thumb->width() ?>" 
  height="<?= $thumb->height() ?>" 
  alt="<?= $thumb->alt() ?>"

Yes only with JPGs. The size doesn’t matter.

try removing the color profiles (normalize to sRGB) of the images in the content folder using an lossless compression tool like ImageOptim — better Save for Web then remove media folder and try again.

For me, this has only occurred since upgrading from 3.6 to 4.0. Worked fine and dandy before that. Also the images are already optimised, but this was a handy way of making a thumbnail version without adding an extra step.

Update on this: solved me using the method outlined here: Image assets pixelated on frontend after Kirby update - #41 by pixelliquid. Running composer install after updating the version number did the trick. I’d missed that instruction, apologies!

Thanks, I have tried your suggestion but the bug persists.

Thanks, Hicks, but for me doesn’t work.

What’s your PHP version, have you tried a different one?