3.4 The Downside: Browser Support

Remember, when we were talking about our ideal solution to responsive images it needed to meet three criteria. The first one, simple and semantic markup, then a great performance. And finally, the third one was large browser support. So let's analyze the picture element along with the source set and sizes attributes and see how it fits in our ideal solution. First of all, it's the markup and this one is pretty simple, especially if you're loading a, a small number of images. The picture element is self-explanatory and you can easily deduct that sources represents an image source. The source set attribute is also self-explanatory and sizes. Well, it's easy to remember. So, in terms of simple markup, I think we're doing pretty well. Maybe here the exception would be media queries inside HTML. As you know, it's not a good idea to mix CSS with HTML. You should always keep these separate, but considering the fact that this technology is kind of new and everyone is still trying to figure out where to go with it. We'll just let it slide for now. Then there's performance. And here, we're doing pretty good. The technique speeds up the page. It doesn't load unnecessary images, so that’s very good. Finally, there is the browser support. And unfortunately, our dreams of finding the perfect solution are kind of shattered. As we can see from this table, support is limited for both the picture element and the source set attribute. They are only available in some modern versions of Chrome, Firefox and Opera. If you need to support Internet Explorer, bad luck. So, it seems for the time being we're stuck with a handful of browsers. But what if you love this technology so much that you want to use it in unsupporting browsers no matter what? Well, if you wanna do that, there's always the polyfill solution. So next up, let's talk about that.