I'll use it other sites I have done as well that are non couchcms ones as does look like I can easily convert from webp to avif format using a online tool to do it.

This is wise. I also recommend serving non-avif versions to visitors with old browsers. CouchCMS has a hook alter_page_output which is invoked in the very last moment before sending the generated page to the browser. This hook is perfect for checking if visitor accepts AVIF, for instance —

Code: Select all

$allow_avif = ( strpos( $_SERVER['HTTP_ACCEPT'], 'image/avif' ) === false ) ? 0 : 1;

And if the format is accepted/allowed, then I programmatically search and replace all image links (at least those that have a converted counterpart — I check if those exist on disk) on page like test.jpg → test.jpg.avif and leave JPG/PNG alone otherwise.

Thank you for the info etc, really appreciate it, it sounds really good. I'll start doing it when I have integrated couchcms on this site and start converting webp to avif images on the non couchcms sites

[trendoman]

While we are at it, here is an interesting web-dev hack to allow progressive load of AVIFs (native progressiveness is being developed into the format). https://www.techie-jim.net/blog/AVIF-pr ... e-example/

Code: Select all

<picture id="avif-cats" class="block" style="background-image: url('https://assets.techie-jim.net/path-to/preview-image.avif');">
    <img class="block" width="4032" height="3024" style="display:none;" src="https://assets.techie-jim.net/path/to/preview-image.avif" decoding="async">
    <img class="block" width="4032" height="3024" src="https://assets.techie-jim.net/path/to/large-image.avif" decoding="async">
</picture>

While we are at it, here is an interesting web-dev hack to allow progressive load of AVIFs (native progressiveness is being developed into the format). https://www.techie-jim.net/blog/AVIF-pr ... e-example/

Code: Select all

<picture id="avif-cats" class="block" style="background-image: url('https://assets.techie-jim.net/path-to/preview-image.avif');">
    <img class="block" width="4032" height="3024" style="display:none;" src="https://assets.techie-jim.net/path/to/preview-image.avif" decoding="async">
    <img class="block" width="4032" height="3024" src="https://assets.techie-jim.net/path/to/large-image.avif" decoding="async">
</picture>

Thank you