Udemy, Coursera, 2U/edX Face Lawsuits Over Meta Pixel Use

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

Treehouse

Responsive Images Course (How To)

via Treehouse

Go to class Write review

Overview

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.

What you'll learn

  • Image formats
  • srcset attribute
  • sizes attribute
  • <picture> element
  • Art direction

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.

Chevron 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.

Chevron 4 steps

  • What is Art Direction?

    2:42

  • Art Direction

    3 questions

  • The Picture Element

    9:24

  • The Picture Element

    1 objective

  • Extra Credit

    Try experimenting with the <picture> element using media conditions other than orientation. For example, you could create a media condition based on min-width as is typical in many responsive sites.

Reviews

Start your review of Responsive Images Course (How To)

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.