It is currently supported in Chromium browsers, and available behind a flag in Firefox.
*/ĪVIF is the most recent image format that has gained adoption in web browsers. * This probably only makes sense for images within the main scrollable area of your page. Other browser engines do not yet () implement content-visibility: auto and would presumably follow Chromium's lead on this special case.
Update contain-intrinsic-size no longer needed #Īn earlier version of this post explained how to use contain-intrinsic-size to avoid CLS impact of content-visibility: auto but as of Chromium 88 this is no longer needed for images that provide width and height as explained above. This has all kinds of benefits, but the most important one might be that the browser will not bother decoding our blurry placeholder image or the image itself unless it has to, saving CPU. The new CSS attribute content-visibility: auto instructs the browser to not bother layouting the image until it gets near the screen. The second technique is more cutting edge. This avoids Cumulative Layout Shift (CLS). New in 2020 is that web browsers will reserve the correct vertical space for the image before it loads if the width and height attributes are provided for the img element. This is a well understood technique to make an image use the available horizontal space up until its maximum size while retaining the aspect ratio. Optimization techniques # Responsive layout # View the source of this sample image to see all the techniques in action: Reducing First Input Delay(FID) through reduced (main-thread) CPU usage.Keeping Cumulative Layout Shift (CLS) to zero.