MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Responsive Images

Course Summary

Using the new source-set and sizes attributes, and the new picture element, it's possible to create images that behave better in a responsive design. These new pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors we define. This will help web pages load faster and look better, and the most capable devices will get the best looking images possible.

  • +

    Course Syllabus

    Image Delivery with Srcset and Sizes

    Web browsing devices come in all sizes, resolutions, and pixel densities. Most of them can be in either a landscape or portrait orientation. We can use media queries to adjust the layout of our web pages, but it's also important that the right image reaches the right device. 9 steps
    • Delivering Responsive Images 3:41
    • Image Formats 4:55
    • Delivering Responsive Images and Image Formats 6 questions
    • Srcset with Picturefill 8:27
    • Srcset with Picturefill 4 questions
    • Using Srcset 10:41
    • Using Srcset 1 objective
    • Adding Sizes 6:52
    • Adding Sizes 4 questions
    • Extra Credit Try using the srcset and sizes attributes in other projects. For example, you could use the portfolio website featured in the Treehouse course How to Make a Website to further exercise your responsive image skills.

    Art Direction with the Picture Element

    Art direction is a technique for drawing attention to the most important parts of an image as it's viewed on different devices. Using the element, we can provide the ideal crop on images based on media conditions like min-width and orientation. 4 steps

Course Fee:
USD 25

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Data Centre Management and Project & Service Management Community

Related Posts:

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url