Support multiple image formats for the same file

[MaluNoPeleke]

As Kirby 3.6 will support AVIF and Webp image files natively it would be great to have an option to automatically provide the most optimized image format of an image source as possible. With a tag it is possible to define multiple sources and Kirby can convert them with the thumb method. Having lazy srcset as a plugin could make it very easy to always provide the best image file based on the browser capabilities.

[bnomei]

not sure i follow. can you provide me with an ideal php input and html output example.

[MaluNoPeleke]

PHP Input could be:

​<picture>
  <source srcset="<?= $image->thumb(['width'   => 512, 'quality' => 48, 'format' => 'avif'])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 48, 'format' => 'avif'])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 48, 'format' => 'avif'])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 48, 'format' => 'avif'])->url() ?> 2048w" type="image/avif"> -->
  <source srcset="<?= $image->thumb(['width'   => 512, 'quality' => 55, 'format' => 'webp'])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 55, 'format' => 'webp'])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 55, 'format' => 'webp'])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 55, 'format' => 'webp'])->url() ?> 2048w" type="image/webp">
  <img src="<?= $image->url() ?>" height="<?= $image->height() ?>" width="<?= $image->width() ?>" srcset="<?= $image->thumb(['width'   => 512, 'quality' => 50])->url() ?> 512w, <?= $image->thumb(['width'   => 1024, 'quality' => 50])->url() ?> 1024w, <?= $image->thumb(['width'   => 1536, 'quality' => 50])->url() ?> 1536w, <?= $image->thumb(['width'   => 2048, 'quality' => 50])->url() ?> 2048w" decoding="async" loading="lazy" alt="<?=$image->alt()?>" style="display: unset; background-size: cover; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\' xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\' xlink%3Ahref=\'data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII=\'%3E%3C/image%3E%3C/svg%3E'); ">
</picture>

Output:

<picture>
  <source srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-512x-q48.avif 512w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1024x-q48.avif 1024w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1536x-q48.avif 1536w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-2048x-q48.avif 2048w" type="image/avif"> -->
  <source srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-512x-q55.webp 512w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1024x-q55.webp 1024w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1536x-q55.webp 1536w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-2048x-q55.webp 2048w" type="image/webp">
  <img src="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img_20170217_122206.jpg" height="3142" width="4190" srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-512x-q50.jpg 512w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1024x-q50.jpg 1024w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-1536x-q50.jpg 1536w, https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-2048x-q50.jpg 2048w" decoding="async" loading="lazy" alt="" style="display: unset; background-size: cover; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\' xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\' xlink%3Ahref=\'data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII=\'%3E%3C/image%3E%3C/svg%3E'); ">
</picture>

I have used the information from these articles for it: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture https://www.industrialempathy.com/posts/image-optimizations/

[bnomei]

ah picture element. sorry i have no plans to bring that back anytime soon.

see readme

Where is the picture element support? This plugin v2.x.x versions could do picture element. I removed that and focused on a better kribytag and lazyloading to make the plugin simpler again.

[MaluNoPeleke]

Oh, I see, thanks for the information.

[bnomei]

you could give the latest v2 release a try. readme should be included.