Serve images in next-gen formats (.webp, .avif)

[adamjohnson]

Steps to reproduce the issue

1. Go to brownfields.wvu.edu
2. Open Developer Tools > Lighthouse
3. Check "Performance" and "Desktop"
4. Click "Generate Report"

Results

In the Lighthouse report, it should list "Serve images in next-gen formats" as a warning.

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Expected results

Here's one of the images it flags in this warning:

https://csassets.static.wvu.edu/qw77wz/1afb0156-7e04-48d2-b8e0-7790063297ed/68e58468aab2edf1f133eb4b78b87734/home-hero-dscn-3696-1780x1780.jpg

Format: JPG Size: 585.6kb

Here's the same image when converted to WebP:

https://aj.sandbox.wvu.edu/files/d/7706cf8c-23a4-4e43-ba3d-48d49a87ca87/brownfields-home-hero-dscn-3696-1780x1780.webp

Format: WebP Size: 414kb

And now AVIF:

https://aj.sandbox.wvu.edu/files/d/446f1c27-9d51-46a6-986d-e80618f98d61/brownfields-home-hero-dscn-3696-1780x1780.avif

Format: AVIF Size: 319kb

I used Sqoosh to convert JPG to WebP & AVIF. The AVIF image is ~47% smaller than the JPG.

How to implement:

Here's how you might go about implementing the HTML for this in CleanSlate:

<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <source srcset="img/photo.webp" type="image/webp">
  <img src="img/photo.jpg" alt="My alt text" data-asset-id="123456" data-asset-version="111x222"> <!-- NOTE: Should data-* attributes apply to <source> tags too? -->
</picture>

Resources

• What's the difference between <picture> and srcset?
• Serve images in modern formats on Web.dev
• Using modern image formats: AVIF & WebP on SmashingMagazine
• CanIUse data for WebP and AVIF
• AVIF rollout for ikea.com results in 21.4% bandwidth savings (Tweet)

Related to #257, #267.