Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Images

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Delivering Responsive Images

3:41 with Nick Pettit

In this course, we're going to talk about two HTML attributes and an HTML element. The attributes are called srcset and sizes, and the element is the picture element. These pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [SOUND] 0:00
    [MUSIC] 0:00
    [SOUND] Web-browsing devices come in all sizes, resolutions, and pixel densities. 0:04
    Most of them can be in either landscape or portrait orientation. 0:09
    And we can use media queries to adjust the layout of our webpages, 0:14
    but what about images? 0:18
    The image element with the source, or SRC attribute, 0:21
    is great if we just want to deliver one image to every device and, 0:26
    in fact, that's still a valid technique in many cases. 0:30
    The problems is that sometimes we need to deliver different 0:34
    images to different devices. 0:38
    Say that we have an image that should take up a lot of space on the screen, 0:40
    such as a photo background and we also need to deliver it at two x resolution for 0:45
    high DPI screens, like Apple's retina displays and most modern phones. 0:51
    However if we send this single image to a mobile device that's only at one 0:56
    x resolution and has a small screen that won't show most of the background anyway, 1:02
    it will just make the page load slower for no added benefit. 1:07
    Put another way, the most basic approach for delivering responsive images 1:12
    is to just send one big image to all devices and hope for the best. 1:17
    As you may have guessed, we can do much better than that. 1:22
    In this course we're going to talk about two HTML attributes and an HTML element. 1:26
    The attributes are called, source set and sizes, and 1:32
    the element, is the picture element. 1:36
    These pieces of markup, 1:39
    allow us to deliver the right image to the right device based on resolution, 1:40
    pixels density, and other factors but before we get in to those, 1:45
    I want to clear up two aspects of this, that confuse a lot of people. 1:49
    First, why are we talking about using elements and 1:54
    attributes when we could just use CSS background images? 1:57
    After all, if we combine a mobile first approach of media queries 2:01
    with CSS backgrounds, devices will only download the images that they need. 2:05
    Much of the time, this is actually a perfectly valid solution however, 2:10
    we can't do this for every image on a page. 2:14
    Sometimes that's for technical reasons whether it's for 2:17
    CSS layout restrictions, or because a backend server that generates HTML 2:21
    needs to put images in the HTML and not in the CSS. 2:26
    [SOUND] A better reason is that many images are content. 2:30
    Including these images is good for SEO, accessibility, RSS Feeds, and basically 2:36
    any other mechanism that benefits from parsing a webpage into another format. 2:41
    As a general rule, images that are content should go in the HTML, and 2:47
    images that are purely for presentation, 2:51
    such as a repeating wallpaper background, should go in the CSS. 2:54
    Second, you might be wondering, why not just use JavaScript to figure out which 2:59
    image to deliver to the client browser? 3:04
    In some instances this might be necessary but generally we shouldn't 3:07
    have to rely on JavaScript to do something as simple as deliver an image file. 3:10
    JavaScript is much more error prone than HTML and CSS and again, 3:16
    if we deliver content using JavaScript instead of HTML, there are many instances 3:20
    where content [UNKNOWN] might not be able to grab all the content as we intend. 3:26
    If this doesn't really make sense so far don't worry. 3:32
    As we start to use these bits of mark up, we'll see why they're so powerful. 3:35

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up