In this episode, we take our quest to improve page load performance to the next level by introducing responsive WebP images. Using responsive images, we can minimize the number of bytes downloaded to render images by specifying different images that are more appropriately sized for different sizes of screens. Let’s take our mobile lighthouse score from 66 to 100!
Previous Episode:
Optimizing Web Images with WebP - https://youtu.be/nx4UHooI-is
Useful Links:
https://12daysofweb.dev/2021/image-display-elements/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://caniuse.com/?search=picture
https://caniuse.com/?search=webp