Way Smaller Cross-Browser Images and Video with Webp and React
Offered By: egghead.io
Course Description
Overview
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!
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!
Syllabus
- Optimize Cross-browser Images with webp and the 'picture' Element
- Handle Next-gen Image Formats in React with the 'picture' Element
Taught by
Josh Comeau
Related Courses
Creating a Personal Site with GatsbyCoursera Project Network via Coursera WordPress: Building Apps with Angular
LinkedIn Learning Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Udemy From zero to a Gatsby developer
Udemy Gatsby Tutorial
Net Ninja via YouTube