Way Smaller Cross-Browser Images and Video with Webp and React
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-imageto 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
webminstead ofmp4
Subscribe to make sure you don't miss it!
Course Content
You might also like these resources:
Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.
This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio
git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.