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.5 Providing Fallback Images

In this lesson, you will learn how to use the picture and source elements to provide fallback options for browsers that don’t support WebP files.

2.5 Providing Fallback Images

Hello and welcome back, in our last lesson we saw that putting a Webp image in the image tag works fine and most modern browsers. But in browser like Internet Explorer we see that it didn't work. So we need to provide some kind of fall back, for our users so that people who are using I.E or other browsers that don't support WebP. Can still see our images because our images are gonna be one of the main parts of our webpage. So I'm gonna jump back into our code, and we're gonna talk about something very, very simple we can do to provide a fallback for these images. What I wanna do is I wanna wrap each of our images inside a picture element. Now our older browsers are not going to recognize this picture element, but we're gonna talk about how we can provide a fall back for those browsers. So what we're gonna do is, again, we're gonna create a picture element here. And inside that picture element, we're gonna use the source element, and we're going to set the source set attribute equal to our webP file. Then we are gonna set the type here to image/webP. Then for browsers that do recognize the picture element, we're gonna have supply another source attribute here. And this time we're gonna set these source set attribute equal to a jpg image. So it's gonna be similar expect instead of webP It's gonna be dot, and this is not our jpg, this is our png. And then again type= image/png. Now again some browsers are not going to recognize the picture element or the source element. So we can provide another image element inside our picture element, that these older browsers will fall back to. And so for this image element, we're going to fall back to the png version of our image. And we can supply some alt text if we want to, for now I'm just going to close it off. So now we have two different fallback. We have a fallback here for browsers that recognize the picture element, but don't support webP. So the way the picture element works is, it's going to try the first one, if it doesn't support the first one, then it'll try the second one. If it doesn't support that, then it'll try the third one. So, for browsers that support the picture and source element again, but don't support webP, it's going to show this second one, this png. But for browsers that don't support the picture element or the source element either, it will fall back to this image element. It will just grab the first thing it recognizes and it will display that. So we've done that for our first image. Now we're gonna do the same thing for our second image. We're gonna create another picture element. And let's go ahead and copy that URL. So we'll create our first source which is going to be our prioritized image, which is our webp file. And then our type here is gonna be set to image/webp. And then we'll have our second source element. And the source for that one will be our backup image. So, same thing except this time it's a jpg, so .jpeg and then type=image/jpeg. And then four browsers that don't support either of those. We're gonna have our image tag with our source equal to, we need to put our quotation marks there, equal to our jpg file, and there we go. So let's get rid of our extra webp down here, and so now we have two picture elements. I'm gonna put a line break in between them. And we'll save our file, jump back into our Chrome browser where it was working to start with. But let's go and refresh it, and we see it still works fine there. And then we'll jump into Internet Explorer, and refresh that one, and now we see everything showing up just fine. So again, when we do it this way, when we're using this picture element, it's going to prioritize the first item. And if the first item isn't supported, it'll go to the next one. And if that one's not supported either, it'll jump down to this third option. But for browsers that don't support the picture, element, it will just ignore the picture element. It will ignore the source elements, but it will see the image element there and it will render that. So that gives us a really powerful and really easy way to provide fallbacks for our webp images. Thank you for watching, and I'll see you in the next lesson.

Back to the top