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:
gatsby-image
to do the same thing in Gatsbydisplay: contents
webm
instead of mp4
Subscribe to make sure you don't miss it!