Go beyond image tags! Learn how to make images a part of your responsive design workflow.
Overview
Syllabus
- Getting Up and Running
- Sam Dutton, developer advocate at Google, explains the importance of getting responsive images right and helps you setup mobile developer tools.
- Units, Formats, Environments
- Optimize images to display beautifully on all screen sizes. Learn about the difference between Raster vs Vector images, responsive CSS units, and setting up optimization tools.
- Images with Markup
- Dive deep into image alternatives like CSS and icon fonts and learn common strategies to alleviate latency.
- Full Responsiveness
- Learn to use the srcset attribute and the picture element to choose images of the right size for your application for every viewing context.
Taught by
Sam Dutton
Related Courses
Related Articles
Reviews
4.2 rating, based on 4 Class Central reviews
-
Fantastic little course that is full of professional tidbits on image optimization, responsiveness, quality and web fonts. After completion I was able to create my own automated image optimization environment with Grunt and Image Magick. I still dont quite get the final section on using srcset, media queries and the picture polyfill together (where the browser chooses the image it thinks is best) never really worked out for me. At any rate it is very successful in introducing some advanced image rendering techniques and will encourage you to research more.
-
This course has more and more content and less explanation .
They should include a little more explanation with more examples. -
