From the course: Responsive Images

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using the <picture> element for image type fallbacks

Using the <picture> element for image type fallbacks - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

Using the <picture> element for image type fallbacks

- Before I wrap up this course, I want to plant an idea in your head. I know it sounds nefarious, but it's not. On the web, we now have a bunch of new types of image formats that allow us to do new things with images. The problem is, in many cases people are using older browsers that don't support these types of formats. What I'm talking about here are things like SVG, or Scalable Vector Graphics. Or the new image format called WebP, which allows you to basically upload JPEGs that have transparency layers and are a tenth of the size of a regular JPEG and so on. Now the challenge with all these image formats is that, if the browser doesn't support them, then the user gets nothing. So if you want to use these formats, you have to provide fallbacks. And providing fallbacks can be a really clunky experience that often involves really complex JavaScript. Well the thing is, you can use the picture element to solve those problem. You can use the picture element for what's known as…

Contents