Update Lighthouse docs for modern image formats

src/site/content/en/lighthouse-performance/uses-webp-images/index.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Serve images in next-gen formats
+title: Serve images in modern formats
 description: |
   Learn about the uses-webp-images audit.
 date: 2019-05-02
@@ -13,17 +13,20 @@ web_lighthouse:
 
 The Opportunities section of your Lighthouse report lists all images
 in older image formats,
-showing potential savings gained by serving WebP versions of those images:
+showing potential savings gained by serving AVIF versions of those images:
 
 <figure class="w-figure">
-  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/VmK3YIRiXNjbzEXxx1Ix.png", alt="A screenshot of the Lighthouse Serve images in next-gen formats audit", width="800", height="306", class="w-screenshot" %}
+  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/VmK3YIRiXNjbzEXxx1Ix.png", alt="A screenshot of the Lighthouse Serve images in modern formats audit", width="800", height="306", class="w-screenshot" %}
 </figure>
 
-## Why serve images in WebP format
+## Why serve images in AVIF or WebP format?
 
-JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
+AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
 
-WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web.
+AVIF is supported in Chrome and Opera and offers smaller file sizes compared to other formats with the same quality settings.
+See [Serving AVIF Images Codelab](https://codelabs.developers.google.com/codelabs/avif) for more on AVIF.
+
+WebP is supported in the latest versions of Chrome, Firefox, Safari, Edge, and Opera and provides better lossy and lossless compression for images on the web.
 See [A New Image Format For The Web](https://developers.google.com/speed/webp/)
 for more on WebP.
 
@@ -33,8 +36,8 @@ for more on WebP.
 
 ## How Lighthouse calculates potential savings
 
-Lighthouse collects each BMP, JPEG, and PNG image on the page,
-and then converts each to WebP,
+Lighthouse collects each BMP, JPEG, and PNG image on the page, converts each to WebP,
+and estimates the AVIF file size,
 reporting the potential savings based on the conversion figures.
 
 {% Aside 'note' %}
@@ -43,14 +46,15 @@ Lighthouse omits the image from its report if the potential savings are less tha
 
 ## Browser compatibility
 
-Browser support is not universal for WebP, but similar savings should be available in most major browsers in an alternative next-gen format. You'll need to serve a fallback PNG or JPEG image for other browser support. See
+WebP is supported by the latest versions of Chrome, Firefox, Safari, Edge, and Opera, while AVIF support is more limited.
+You'll need to serve a fallback PNG or JPEG image for older browser support. See
 [How can I detect browser support for WebP?](https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp) for an overview of fallback techniques and the list below for browser support of image formats.
 
-To see the current browser support for each next-gen format, check out the entries below:
+To see the current browser support for each modern format, check out the entries below:
 
+- [AVIF](https://caniuse.com/#feat=avif)
 - [WebP](https://caniuse.com/#feat=webp)
-- [JPEG 2000](https://caniuse.com/#feat=jpeg2000)
-- [JPEG XR](https://caniuse.com/#feat=jpegxr)
+
 
 ## Stack-specific guidance
 
@@ -90,7 +94,7 @@ formats.
 
 ## Resources
 
-- [Source code for **Serve images in next-gen formats** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/uses-webp-images.js)
+- [Source code for **Serve images in modern formats** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/byte-efficiency/modern-image-formats.js)
 - [Use WebP images](/serve-images-webp)
 
 <!-- https://www.reddit.com/r/webdev/comments/gspjwe/serve_images_in_nextgen_formats/ -->