@Peleke I do everything in Twig so it might be a bit of a stretch for you to understand it if you are not familiar with Twig.
But here is the Twig macro I use in one project.
{% macro picture(props) %}
<picture class="c-picture">
{% if props.sources and (props.sources|length) > 0 %}
{% for source in props.sources %}
<source type="{{ source.type }}" srcset="{{ source.srcset }}" sizes="{{ props.sizes|default('') }}" />
{% endfor %}
{% endif %}
<img src="{{ props.src }}"
alt="{{ props.alt }}"
width="{{ props.width }}"
height="{{ props.height }}"
loading="{{ props.loading|default('eager') }}" />
</picture>
{% endmacro %}
(Where props is the output of the uiPicture method)
In another project, I have a more advanced form of that, which includes the media tag on the sources. But anyway, you might get the idea.
I find this whole approach excellent now as Kirby has native support for webp and avif. Before, with the webp plugin, the server used to crash as I have a high amount of different image sizes for different situations, leading to the generation of around 20 sizes per image.
Still, there would probably be a better solution for defining the sizes. I’m just a poor HTML/JavaScript programmer (not much PHP experience), which leads to a very pragmatic config with a lot of repetition.
'thumbs' => [
'driver' => 'im',
'presets' => [
'thumb' => ['width' => 232, 'height' => 232, 'crop' => true, 'quality' => 100],
'alternative_thumb' => ['width' => 825, 'height' => 564, 'quality' => 100, 'crop' => true],
'leaderboard' => ['width' => 1530, 'height' => 470, 'crop' => true, 'quality' => 80],
'portrait' => ['width' => 362, 'height' => 640, 'crop' => true, 'quality' => 80],
],
'srcsets' => [
'default' => [
'150w' => ['width' => 125, 'quality' => 100],
'256w' => ['width' => 256, 'quality' => 100],
'320w' => ['width' => 320, 'quality' => 100],
'768w' => ['width' => 768, 'quality' => 80],
'1560w' => ['width' => 1440, 'quality' => 90],
'2000w' => ['width' => 2000, 'quality' => 80],
'3000w' => ['width' => 3000, 'quality' => 60]
],
'default_webp' => [
'150w' => ['width' => 125, 'quality' => 100, 'format' => 'webp'],
'256w' => ['width' => 256, 'quality' => 100, 'format' => 'webp'],
'320w' => ['width' => 320, 'quality' => 100, 'format' => 'webp'],
'768w' => ['width' => 768, 'quality' => 80, 'format' => 'webp'],
'1560w' => ['width' => 1440, 'quality' => 90, 'format' => 'webp'],
'2000w' => ['width' => 2000, 'quality' => 80, 'format' => 'webp'],
'3000w' => ['width' => 3000, 'quality' => 60, 'format' => 'webp']
],
'default_avif' => [
'150w' => ['width' => 125, 'quality' => 100, 'format' => 'avif'],
'256w' => ['width' => 256, 'quality' => 100, 'format' => 'avif'],
'320w' => ['width' => 320, 'quality' => 100, 'format' => 'avif'],
'768w' => ['width' => 768, 'quality' => 80, 'format' => 'avif'],
'1560w' => ['width' => 1440, 'quality' => 90, 'format' => 'avif'],
'2000w' => ['width' => 2000, 'quality' => 80, 'format' => 'avif'],
'3000w' => ['width' => 3000, 'quality' => 60, 'format' => 'avif']
],
'thumb' => [
'232w' => ['width' => 232, 'height' => 232, 'quality' => 100, 'crop' => true],
'464w' => ['width' => 464, 'height' => 464, 'quality' => 80, 'crop' => true]
],
'thumb_webp' => [
'232w' => ['width' => 232, 'height' => 232, 'quality' => 100, 'crop' => true, 'format' => 'webp'],
'464w' => ['width' => 464, 'height' => 464, 'quality' => 80, 'crop' => true, 'format' => 'webp']
],
'thumb_avif' => [
'232w' => ['width' => 232, 'height' => 232, 'quality' => 100, 'crop' => true, 'format' => 'avif'],
'464w' => ['width' => 464, 'height' => 464, 'quality' => 80, 'crop' => true, 'format' => 'avif']
],
// This is a 1.4/1 format
'alternative_thumb' => [
'232w' => ['width' => 232, 'height' => 158, 'quality' => 100, 'crop' => true],
'464w' => ['width' => 464, 'height' => 318, 'quality' => 80, 'crop' => true],
'825w' => ['width' => 825, 'height' => 564, 'quality' => 80, 'crop' => true],
'1650w' => ['width' => 1650, 'height' => 1328, 'quality' => 80, 'crop' => true]
],
'alternative_thumb_webp' => [
'232w' => ['width' => 232, 'height' => 158, 'quality' => 100, 'crop' => true, 'format' => 'webp'],
'464w' => ['width' => 464, 'height' => 318, 'quality' => 80, 'crop' => true, 'format' => 'webp'],
'825w' => ['width' => 825, 'height' => 564, 'quality' => 80, 'crop' => true, 'format' => 'webp'],
'1650w' => ['width' => 1650, 'height' => 1328, 'quality' => 80, 'crop' => true, 'format' => 'webp']
],
'alternative_thumb_avif' => [
'232w' => ['width' => 232, 'height' => 158, 'quality' => 100, 'crop' => true, 'format' => 'avif'],
'464w' => ['width' => 464, 'height' => 318, 'quality' => 80, 'crop' => true, 'format' => 'avif'],
'825w' => ['width' => 825, 'height' => 564, 'quality' => 80, 'crop' => true, 'format' => 'avif'],
'1650w' => ['width' => 1650, 'height' => 1328, 'quality' => 80, 'crop' => true, 'format' => 'avif']
],
'leaderboard' => [
'1530w' => ['width' => 1530, 'height' => 470, 'crop' => true, 'quality' => 80],
'3050w' => ['width' => 3050, 'height' => 940, 'crop' => true, 'quality' => 60]
],
'leaderboard_webp' => [
'1530w' => ['width' => 1530, 'height' => 470, 'crop' => true, 'quality' => 80, 'format' => 'webp'],
'3050w' => ['width' => 3050, 'height' => 940, 'crop' => true, 'quality' => 60, 'format' => 'webp']
],
'leaderboard_avif' => [
'1530w' => ['width' => 1530, 'height' => 470, 'crop' => true, 'quality' => 80, 'format' => 'avif'],
'3050w' => ['width' => 3050, 'height' => 940, 'crop' => true, 'quality' => 60, 'format' => 'avif']
],
'portrait' => [
'362w' => ['width' => 362, 'height' => 640, 'crop' => true, 'quality' => 100],
'724w' => ['width' => 724, 'height' => 1280, 'crop' => true, 'quality' => 60],
],
'portrait_webp' => [
'362w' => ['width' => 362, 'height' => 640, 'crop' => true, 'quality' => 100, 'format' => 'webp'],
'724w' => ['width' => 724, 'height' => 1280, 'crop' => true, 'quality' => 60, 'format' => 'webp'],
],
'portrait_avif' => [
'362w' => ['width' => 362, 'height' => 640, 'crop' => true, 'quality' => 100, 'format' => 'avif'],
'724w' => ['width' => 724, 'height' => 1280, 'crop' => true, 'quality' => 60, 'format' => 'avif'],
]
],
],