Responsive images questions

[jimbobrjames]

@Mark_E

I’ve contacted my host and they inform me that ImageMagick is on my server

Thats great, however not all hosts are hot on keeping these things up to date. Avif is fairly new and webp is a little older. its possible to have hosting that has IM installed but its not quite new enough to have AVIF support but does have WebP support.

@Mark_E

Urm, what’s a command line?

I think you are on a mac. If you go in your applications and run the app called terminal you can do the command @texnixe described and also php -i | grep AVIF

Your hosting control panel (like cPanel maybe) might have a sever side terminal you can use to check things out. you can run those commands there too.

[Mark_E]

I’m about to give up.

My larger responsive thumbs (in terms of pixels) are considerably larger than my original images (in terms of KB). Which I find hard to understand how that can happen. Surely if the original file is seriously compressed, then smaller thumbs can’t be finding image quality that isn’t there.

And getting ImageMagick to work is well beyond my small brain. I think I’ll have to stick to the default and accept that half of my thumbs are larger and half smaller, than my original images. You win some, you lose some!

I’ll move on now to trying to get Kirby to convert my JPEGs and PNGs to AVIF and WebP. I have a feeling this will take another day of my life, just trying to get that to work, and a lot of help on this forum!

Thanks for the help

[texnixe]

@Mark_E

Surely if the original file is seriously compressed,

That’s probably exactly the point, that’s why I already suggested a few posts above, to play around with the quality settings of the thumb() method to achieve smaller thumb results.

[Mark_E]

I’m contacting my host and asking them if their system can convert my JPEG and PNG files to AVIF and WebP. If they can, is the following code correct?

<?php

return [
  'debug'  => false,

  'thumbs' => [
    'driver' => 'im'
  ]
];

I’ve put a comma after false

[texnixe]

I can only repeat, it depends, see thumbs | Kirby CMS, so you might or might not have to set the path to the convert binary file.

[Mark_E]

Sure. Now I know that first bit of code is correct I’ll try it on my server and see what happens. Hopefully I won’t have to change the path. Thanks

[Mark_E]

@jimbobrjames

As someone who builds alot of portfolio / image heavy sites, i can share my own personal workflow, if it helps:

1. Export the source image from your graphics program and 100% Jpeg for photos. PNGs should be for graphics like logos and charts. Personally I use images not more than 2,000px wide.
2. Run the images through ImageOptim (on a mac ImageOptim — better Save for Web ) or Optimize Images (cross platform python script optimize-images · PyPI)
3. Use ImageMagick if you can on the server, as it yeilds better results in my experience
4. From there use Kirby srcset / thumb methods as appropriate.
5. Make use of WebP and Avif if your server allows.

I find that way i get good quality images, and usually 100% score in Chrome Lighthouse.

Okay, so no JPEG compression, or very little, for example 95%.

When using Kirby thumbnails do you change the default thumb quality (the default is 90)?