Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udacity

Responsive Images

via Udacity

Go to class Write review

Overview

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

Syllabus

  • Getting up and Running
    • Start debugging on your mobile devices to work with responsive images with Sam Dutton.,Get started with Developer Tools and mobile debugging.
  • Units, Formats, Environments
    • Compare different kinds of images on the web and the units you can use to scale them.,Set up your development environment so that responsive images are a part of your workflow.,Apply responsive image principles in a real-world scenario!
  • Images with Markup
    • Dive into using markup techniques like CSS and icon fonts to create responsive graphics.,Learn how to use markup techniques that are natively responsive and often extremely lightweight.,Replace extraneous images with markup techniques add social media icons to the responsive blog project!
  • Full Responsiveness
    • Make your images fully responsive using the new element!,Learn to use the srcset and sizes attributes.,Make the blog project fully responsive, by implementing to display beautiful images across a range of device widths and pixel ratios.

Taught by

Sam Dutton

Reviews

4.2 rating, based on 4 Class Central reviews

Start your review of Responsive Images

  • Profile image for Bobby Brady
    Bobby Brady @bob
    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.
  • Anonymous
    This course has more and more content and less explanation .
    They should include a little more explanation with more examples.
  • QZ
  • Profile image for Jelena Stein
    Jelena Stein
Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.