Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading

I’ve been running the new Kirby 3.6 alpha for a few versions now and my favorite new feature is the support for AVIF and WEBP image generation. I’m a sucker for better web performance and finally finished my small improvement to the image blo…


This content originally appeared on foobartel.com :: All Posts and was authored by foobartel.com :: All Posts

I’ve been running the new Kirby 3.6 alpha for a few versions now and my favorite new feature is the support for AVIF and WEBP image generation. I’m a sucker for better web performance and finally finished my small improvement to the image block. This version of the image block outputs a picture element with an AVIF, WEBP and the original format image. The width and quality parameters are currently hard-coded at 1200px and 60%/55%, respectively, which works well for me so far. Mileage might vary.

For a future iteration I want to add a field for image width and quality, but for now this simple version will do.

Find the code in this Gist.


This content originally appeared on foobartel.com :: All Posts and was authored by foobartel.com :: All Posts


Print Share Comment Cite Upload Translate Updates
APA

foobartel.com :: All Posts | Sciencx (2021-08-16T22:00:00+00:00) Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading. Retrieved from https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/

MLA
" » Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading." foobartel.com :: All Posts | Sciencx - Monday August 16, 2021, https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/
HARVARD
foobartel.com :: All Posts | Sciencx Monday August 16, 2021 » Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading., viewed ,<https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/>
VANCOUVER
foobartel.com :: All Posts | Sciencx - » Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/
CHICAGO
" » Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading." foobartel.com :: All Posts | Sciencx - Accessed . https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/
IEEE
" » Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading." foobartel.com :: All Posts | Sciencx [Online]. Available: https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/. [Accessed: ]
rf:citation
» Kirby 3.6 Image Block with Support for webp, avif & Lazy Loading | foobartel.com :: All Posts | Sciencx | https://www.scien.cx/2021/08/16/kirby-3-6-image-block-with-support-for-webp-avif-lazy-loading/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.