Yo ninjas, in this responsive design tutorial, I’ll show you how we can make our images responsive. There are 2 way – using relative measurements, or by using the relatively new HTML element, the picture tag, along with a polyfill called picturefill –


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. The explanation of how responsive images and polyfills work is perfect. But obviously, if you've got a site where users upload images, you will have to get a plugin/gem for that.

  2. Hi NetNinja. Thanks, but I have a question.

    I am used to link these images in the media queries

    For ex: the tablet media queries requesting the medium image as Header BG, the mobile media queries requesting the small image as Header BG and the normal css requesting the large one.

    What is the advantage of using Picture? Thanks again

  3. The point of <picture> having an <img> inside it is to fallback and work on old devices. So the <img> needs src and alt attributes. When you use <source>, the <img> does not need the srcset attribute.

  4. didn't know about this before … was struggling with retina js or some other js plugins … seems very cool … thank you for this and also your tutorials are great … very to the point … like a pocket book which I can come back again and again to watch … thanks once again …

  5. Great Tutorial NetNinja, I'm really liking the FlexBox Tutorial too, keep it up you have really clean and easy to understand tutorials, question: do you use a resource or a software to automatically reduce images in various resolutions for example. Preferably free 🙂


Please enter your comment!
Please enter your name here