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 - CSS Tutorial
From the course: Responsive Images
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.