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 block. This v…


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

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 :: Stream and was authored by foobartel.com :: Stream


Print Share Comment Cite Upload Translate Updates
APA

foobartel.com :: Stream | 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-2/

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

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.