Get started with custom lists to organize and share courses.

Sign up

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

Responsive Images

via Udacity

Taken this course? Share your experience with other students. 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.



Why Take This Course?

Quick load times and responsive content leads to higher conversions. There's much more to images on the web than <img>. Attributes like srcset, markup techniques using CSS, fonts, and inline images, and the brand new <picture> element are now available to help you create the best possible experience for your users. This course will help you ensure that you deliver the highest quality images with the fewest possible bytes.

Syllabus

Lesson 1 - Getting up and Running

Before you start working with responsive images, you need to start debugging on your mobile devices. This lesson will help you get started with Developer Tools and mobile debugging.

Lesson 2 - Units, Formats, Environments

You can't optimize what you can't measure. In this lesson, you will start with comparing different kinds of images on the web and getting familiar with different units you can use to scale them.

You will also get a chance to set up your development environment so that responsive images become a painless part of your workflow.

At the end of the lesson, you will start working on the responsive blog project, where you have a chance to apply responsive image principles in a real-world scenario!

Topics covered:

  • Sizing Images
  • File Types
  • Automation Tools

Lesson 3 - Images with Markup

Not all graphics need to be .JPGs or .PNGs. This lesson dives into using markup techniques like CSS and icon fonts to create responsive graphics. While markup techniques are awesome because they are natively responsive, they are often extremely lightweight, requiring a fraction of the bytes of traditional images!

At the end of the lesson, you will replace extraneous images with markup techniques and take advantage of font icons to add social media icons to the responsive blog project!

Topics covered:

  • CSS Techniques
  • Inlining Images
  • Unicode
  • Icon fonts

Lesson 4 - Full Responsiveness

Here comes the full monty! In this lesson, you will make your images fully responsive using the new <picture> element! Along the way, you will use the srcset and sizes attributes. You will also learn the importance of alt attributes for your visually impaired users.

At the end of this lesson, you will make the blog project fully responsive, as you implement <picture> to display beautiful images across a range of device widths and pixel ratios.

Topics covered:

  • <picture>
  • sizes attribute
  • srcset attribute
  • alt attributes

Taught by

Sam Dutton

Help Center

Most commonly asked questions about Udacity Udacity

Reviews for Udacity's Responsive Images
4.0 Based on 5 reviews

  • 5 stars 60%
  • 4 star 0%
  • 3 star 20%
  • 2 star 20%
  • 1 star 0%

Did you take this course? Share your experience with other students.

Write a review
  • 1
Bobby B
5.0 3 years ago
by Bobby completed this course, spending 1 hours a week on it and found the course difficulty to be easy.
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.
1 person found
this review helpful
Was this review helpful to you? Yes
Anonymous
2.0 2 years ago
Anonymous completed this course.
This course has more and more content and less explanation .

They should include a little more explanation with more examples.
Was this review helpful to you? Yes
Jelena S
5.0 2 years ago
by Jelena completed this course.
Was this review helpful to you? Yes
Said A
3.0 3 years ago
Said completed this course.
Was this review helpful to you? Yes
Qz Q
5.0 4 years ago
by Qz completed this course.
Was this review helpful to you? Yes
  • 1

Class Central

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

Sign up for free

Never stop learning Never Stop Learning!

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