Responsive Web Design Tutorial #10 - Responsive Images & Polyfills
Economy | Information | History | Online | Facts | World | Global | Money
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 - https://scottjehl.github.io/picturefill/ SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Comments
-
Awesome video like always. Thanks!
-
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.
-
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 -
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.
-
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 ...
-
I did not find the image files in the Github download, were they removed or am I looking at the wrong zip files?
-
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 :)
9m 59sLenght
106Rating