A Web Designer’s Guide to the WebP Image Format

by Craig Campbell8 Mar 2019

Lessons:8Length:33 minutes

Performance Google HTML Adobe Photoshop

Turn Autoplay Off

Next lesson playing in 5 seconds

Free Preview: A Web Designer’s Guide to the WebP Image Format

Welcome to the Course

00:35

The WebP image format was created by Google with the goal of creating high-quality images with smaller file sizes. In this course, you will learn how to convert your images into WebP files, insert them into your HTML and CSS, and provide fallbacks for browsers that don’t support the format.

1.Introduction
1 lesson, 00:35

Free Lesson

1.1
Welcome to the Course
00:35

2.WebP Images
6 lessons, 31:28

Free Lesson

2.1
What Is a WebP File?
03:24

2.2
Creating WebP Files in Photoshop
06:56

2.3
Creating WebP Files With Squoosh
05:25

2.4
Adding WebP Images to a Web Page
03:02

2.5
Providing Fallback Images
04:57

2.6
Using WebP With CSS
07:44

3.Conclusion
1 lesson, 00:30

3.1
Final Thoughts
00:30

Craig Campbell

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

Unlimited Downloads
From $16.50/month

Get access to over one million creative assets on Envato Elements.

Over 9 Million Digital Assets

Everything you need for your next creative project.

Create Beautiful Logos, Designs
& Mockups in Seconds

Design like a professional without Photoshop.

Join the Community

Share ideas. Host meetups. Lead discussions. Collaborate.

Quick LinksExplore popular categories