progressive image rendering

[konrad]

Hi,

this is more of a question: How is image rendering handled in Lay Theme? Besides lazyloading, there seems to be a JS function that only displays the images, once they are fully loaded. Is that correct?

With Jpeg and now with JpegXL progressive loading is speeding up the loading times. Especially with JpegXL you can get a high quality preview at 100kB and the rest of the file is then progressively loaded in. Is there an option to enable the display of images before they are fully loaded?

Thanks

[arminunruh]

there seems to be a JS function that only displays the images, once they are fully loaded. Is that correct?

hey yes that is correct. it just sets opacity: 0; to opacity: 1; once an image is loaded

Is there an option to enable the display of images before they are fully loaded?

yes, you can use custom css:

.col img.setsizes{
    opacity: 1!important;
}
.col img.lay-gif{
    opacity: 1!important;
}
.col img.lay-image-original{
    opacity: 1!important;
}
.col img.carousel-img{
    opacity: 1!important;
}
.background-image img.setsizes{
    opacity: 1!important;
}
.background-image img.lay-gif{
    opacity: 1!important;
}
.background-image img.lay-image-original{
    opacity: 1!important;
}
#search-results-region img.setsizes{
    opacity: 1!important;
}
#search-results-region img.lay-gif{
    opacity: 1!important;
}
#search-results-region img.lay-image-original{
    opacity: 1!important;
}
#search-results-region img.carousel-img{
    opacity: 1!important;
}
#search-results-region video.video-lazyload{
    opacity: 1!important;
}

[arminunruh]

look, there is this article too

https://www.liquidweb.com/kb/what-is-a-progressive-jpeg/

[arminunruh]

if u upload jpgs that have this JpegXL format, i think you may need to enable "never show resized versions of images" in lay options

because otherwise, resized versions are used to show images based on their width in the layout

and these resized versions are versions generated by wordpress. these resized versions are probably just normal jpegs.

wordpress uses imagick or sth in the background to resize jpegs, not sure if that keeps the jpgxl

u may be able to find a plugin for this

[konrad]

Wow that was quick! Thank you for the support and frohe Ostern noch :-)

[arminunruh]

thx for u too!