Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Image Delivery with Srcset and Sizes Using Srcset

Posted by E S
E S
922 Points

Browser is not invoking srcset images

Hello,

Compared my index.html code w/ project files yet somehow, browser not invoking srcset images (banner-large.jpg, banner-medium.jpg, banner-small.jpg). No matter what size I scale browser (w/ Network tools/disable cache open), only src images images display (banner.medium.jpg, photo-1x.jpg.

Any feedback appreciated!

E

Flavio Carvalho
Flavio Carvalho
26,636 Points
Flavio Carvalho
Flavio Carvalho
26,636 Points

Post your code so we can see what you have and try to help you from there :)

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

And let us know what browser and version you're using!

Anton Bredl
Anton Bredl
15,359 Points
Anton Bredl
Anton Bredl
15,359 Points

It appears that I am having the same issues.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Images</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/picturefill.min.js" async></script>

  </head>
  <body>

    <div class="wrapper">

      <div class="content-block">

        <div class="profile-description">

          <div class="profile-image">
            <img
              srcset="
                img/banner-small.jpg 2x,
                img/photo-@1x.jpg 1x"

              alt="Photograph of a flower."
            />
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere nec quam vitae aliquet. Etiam sodales feugiat gravida. Donec tincidunt facilisis arcu, ut sagittis eros iaculis a. Nam fringilla erat id lorem pellentesque ornare. Curabitur sed interdum tellus. Etiam imperdiet, dui id condimentum ullamcorper, lectus nibh venenatis lectus, id ullamcorper nibh nibh id dolor. Suspendisse tempor turpis vel commodo consequat. Phasellus at posuere velit. Sed vehicula lacinia mauris sit amet mollis. Etiam semper leo blandit massa molestie congue. Sed ac purus ipsum.</p>
          <p>Integer dignissim ultrices lacus tincidunt aliquet. Cras maximus eleifend felis. Pellentesque in nulla condimentum, aliquet orci sed, gravida velit. Pellentesque mattis ex at magna consectetur porta. Aenean eget volutpat urna. Maecenas sed nisl sit amet tortor vulputate vulputate non nec elit. Mauris bibendum erat nec purus finibus, eget molestie dolor placerat. Pellentesque at massa et ligula sagittis gravida. Nunc libero dolor, luctus ac imperdiet ac, suscipit nec nibh. Ut non diam urna.</p>
          <p>Cras blandit at urna sagittis consequat. Integer tristique mollis metus, at varius leo imperdiet vitae. Donec a porta tellus. Sed sit amet euismod urna. Vestibulum varius urna vitae odio eleifend, et consectetur felis congue. Sed vulputate mattis mauris, eget euismod ante condimentum nec. Integer augue ex, pharetra vitae rutrum a, tristique vitae mauris.</p>
        </div>

      </div>

    </div>


  </body>
</html>

4 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Try using Chrome DevTools Device Emulation. Resizing the browser window won't change the fact that your screen still has a particular resolution.

With srcset, it's leaving it up to the browser to select the most appropriate sized image. Most 'normal' PCs will just use a 1x image/resolution. I think some things like the 'Retina' MacBooks and possibly the iMacs will use 2x or similar.

E S
E S
922 Points
E S
E S
922 Points

Thank you for sharing, Iain. Great tool!

E S
E S
922 Points
E S
E S
922 Points

Hello,

Revisited video...was not refreshing browser @ each point. Another question - browser, version, and code follows. Why the is banner image changing w/ resize and not flower image (photo-@1x, 2x)? Thank you!

Browser & version: Chrome Version 43.0.2357.124 (64-bit)

Code: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Images</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>


    <div class="wrapper">

      <img
        srcset="img/banner-large.jpg 2048w,
                img/banner-medium.jpg 1400w,
                img/banner-small.jpg 800w"
        src="img/banner-medium"
        alt="Photograph of Nick Pettit in front of trees."
        class="banner-image"
        />

      <div class="content-block">

        <div class="profile-description">

          <div class="profile-image">
            <img
              srcset="img/photo-@2x.jpg 2x,
                      img/photo-@1x.jpg 1x"
              src="img/photo-@1x.jpg"
              alt="Photograph of a flower."
              />        
          </div>
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Because when you resize the browser window, you're changing the width, which the banner image is using to select the source.

The resolution of your screen (how 'sharp' it is) won't change though, since it's dependent on the device. That's what the flower image is using.

E S
E S
922 Points
E S
E S
922 Points

I see....and the flower image fits at any width. Thanks again!