Newly Html Image Loading
There're some fancy image loading techniques about optimizing we need to know, in which the web browsers were grown more powerful.
content-visibility
The content-visibility, is a very new css attribute supporting by some new version browsers. We can read content-visibility for more details.
As the information shown us, set content-visibility: auto; to render a ＜img /＞ element only when it's in viewport.
＜style＞
img {
content-visibility: auto;
}
＜/style＞
Lazy loading
Before this, we should including a javascript or jQuery plugin while we need ＜img /＞ element to implement lazy loading. It's a old-school way. For now, a Native api of lazy loading supported by browsers.
＜img src="image.jpg" alt="..." loading="lazy" /＞
An ＜iframe＞ can do it in the same way.
＜iframe src="video-player.html" title="..." loading="lazy"＞＜/iframe＞
And more details can read from img element.
Asynchronous decoding
Decode the image asynchronously to reduce delay in presenting other content. This will let the image off the main thread while browser loading pages.
＜img src="image.jpg" alt="..." decoding="async" … /＞
More details can read from img element.
AVIF
AV1 Image File Format, AVIF, a brain new image format. It's a good choice for both images and animated images due to high performance and royalty free image format. It offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. Note that when using AVIF, we should include fallbacks to formats with better browser support.
For better supporting, using ＜picture＞ element to implement AVIF.
＜picture＞
＜source
sizes="(max-width: 600px) 100vw, 600px"
srcset="
/images/example-1920w.avif 1920w,
/images/example-1280w.avif 1280w,
/images/example-640w.avif 640w"
type="image/avif"
/＞
＜img /＞
＜/picture＞
Provide more ＜source＞ elements with srcsets for browsers that did not recognize AVIF, and they could fullback to legacy image formats supported.
＜picture＞
＜source
sizes="(max-width: 600px) 100vw, 600px"
srcset="
/images/example-1920w.avif 1920w,
/images/example-1280w.avif 1280w,
/images/example-640w.avif 640w"
type="image/avif"
/＞
＜source
sizes="(max-width: 600px) 100vw, 600px"
srcset="
/images/example-1920w.webp 1920w,
/images/example-1280w.webp 1280w,
/images/example-640w.webp 640w"
type="image/webp"
/＞
＜source
sizes="(max-width: 600px) 100vw, 600px"
srcset="
/images/example-1920w.jpg 1920w,
/images/example-1280w.jpg 1280w,
/images/example-640w.jpg 640w"
type="image/jpg"
/＞
＜img src="/images/legacy-image.jpg" width="600" alt="..." /＞
＜/picture＞
Read AVIF for Next-Generation Image Coding,AVIF has landed, picture for more details.
Responsive layout
Providing the right number of pixels is more important than any others. It can help us to prevent from Cumulative Layout Shift (aka. CLS) side effect.
＜style＞
img {
max-width: 100%;
height: auto;
}
＜/style＞
＜img height="768" width="1024" … /＞
Read CLS for more details.
Cover image from:
https://unsplash.com/photos/Py9Qds7QLko
References:
