7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 The Ideal Solution

The “proper” way of using responsive images is still fairly unknown to us. Techniques are relatively new and don’t necessarily play well with existing browsers.

So let’s mentally sketch our perfect solution.

2.5 The Ideal Solution

The proper way of using responsive images is still unknown to us. The techniques are relatively new and most of them don't really play well with the existing browsers. But what would be the ideal solution to this? Maybe if we can sketch it mentally, when we see, or when we find a solution in the real world we can then compare to what’s in our head and maybe choose the closest one. Now, the solution will have to meet three criteria. And the first one is simple and Semantic Mark Up. Both of these attributes are self explanatory. First of all, we need to keep things simple not only for ourselves, but who, for whoever is maintaining that website. Plus, we need to make sure that our solution plays well with some existing visual editors, like the one in WordPress. The second criteria is Performance. Now, we can have the simplest mark up ever. We could just have a simple IMG tack, but if performance wise that falls short. Then it's useless. You know, especially when we consider the fact that we're using responsive images to cater for mobile devices. Finally, the third criteria is Browser Support. And without browser support the first two criteria are useless. It doesn't matter if we have great markup or great performance. If there's no browser around to support those features, it's kind of pointless. So, it doesn't mean that our solution has to support very old browsers, like IE7 or 8, but it should definitely support some of the newer ones. So, this is the perfect responsive image solution that we can think of. It needs to have great markup, very simple, great performance and great browser support. Now this solution doesn't exist just yet. The existing solutions come close to being ideal but they still need improvements in certain areas. So let's kick things off and see the very first solution in the form of the source set and sizes attributes.

Back to the top