illustration for Way Smaller Cross-Browser Images and Video with Webp and React
pro

Way Smaller Cross-Browser Images and Video with Webp and React

Instructor

Josh Comeau

6m closed-captioning
·
2 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
5.0
47
people completed
Published 5 years ago
|
Updated 5 years ago

On many websites, images and video make up the vast bulk of the data being sent over the wire; websites will often have several megabytes of images!

There's a lot of low-hanging fruit in this area. In this collection, we'll learn how to convert our images to the webp format—a format often 2-3x smaller than png/jpg—and how to use the picture element to ensure graceful fallback on unsupported browsers. We'll see how to come up with a great abstraction for React to make it as painless to use as possible.

Later in this collection, we'll also cover:

  • Automatically generating webp images on build
  • Leveraging gatsby-image to do the same thing in Gatsby
  • Smaller images across the browser spectrum with jpeg2000 and jpegxr
  • Avoiding layout problems with display: contents
  • Smaller video with webm instead of mp4

Subscribe to make sure you don't miss it!