Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:8Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Adding WebP Images to a Web Page

In this lesson, you will discover just how easy it is to add WebP images to your web pages. Saying that, you’ll also notice a slight problem...

2.4 Adding WebP Images to a Web Page

Hello and welcome back. Now that we know how to create WebP files, in this lesson I wanna talk about inserting them into our HTML. And it's a really simple process but we're quickly gonna find some issues with browser compatibility. So I'm using Visual Studio Code, you can use whatever text editor you want here. I've got a folder opened up that has our png, jpg, and our webp files in it. And I'm gonna create a new file here, I'm just gonna call it index.html and I'm just gonna throw in some basic HTML5 code here. I'm gonna call it webp, and then in our body I'm just gonna insert images. So I need a couple of image tags. Our source here for the first one, I'm gonna use our png and jpeg first, and then we'll swap them out. So Acme_DetailIcon.png and usually you'll put an alt attribute in there. I'm just going to keep it simple for now. And then we'll put another one here for our other file which is nature-10.jpg. All right, so I'm going to open up that index.html file in the browser, and there we go. So we see that those rendered just fine. Obviously they're just plain png and jpg files. And I'm also going to throw a different color background so we can show that there is transparency behind this. So again, normally I would put this in a separate file, but we're going to keep it simple here. So I'm just gonna put some style tags inside the head of our document. And I'm just gonna put a background on the body. And we'll just do a light medium gray, save it, refresh, there we go. So we can see that transparent background behind the png. So everything looks good so far. Let's swap these out now with our WebP files and see how it looks. So we'll go back into our code and for WebP files it works just like pngs and jpegs. We're just gonna use an image tag. So instead of png here I'm going to point to webp and instead our jpeg file we're going to point to .webp. So we'll save that. Refresh our page and we see no noticeable difference. However, if we take this page ,and I'm gonna open it up with Internet Explorer, You'll see that we have a problem. Internet Explorer does not support the WebP format. There are also some older versions of Firefox and Chrome, obviously, that don't support it as well. And even though Microsoft is no longer making new versions of Internet Explorer, there are still a lot of people that use it. So it would behoove you to take the time to make all of your images backwards compatible. So we'll start talking about how to do that in the next lesson. Thank you for watching.

Back to the top