Html img

Newly Html Image Loading

Matt 2021/04/09 15:54:49
95

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:

img

content-visibility

lazy loading

picture

AVIF has landed

AVIF for Next-Generation Image Coding

Maximally optimizing image loading for the web in 2021

Matt