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
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
5.0
27
people completed
Published 2 years ago
|
Updated 2 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!

Learner Reviews

  • Learner
    4 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Well explained, to the point. Josh is a legend!

Course Content

6m • 2 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    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.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    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

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    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.