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

belen almonacid
belen almonacid
8,495 Points
Posted by belen almonacid
belen almonacid
8,495 Points

Why srcet is not invoking my banner images? when i rezise and refresh only the medium image appear, it doesnt change it

<!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">
  <img 
       srcet="img/banner-large.jpg 2048w, 
              img/banner-medium.jpg 1400w, 
              img/banner-small.jpg 800w"
       src="img/banner-medium.jpg"
       alt="banner image"
       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="profile image"
           class="profile-image"/>
        </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>

Haytham Badran
Haytham Badran
216 Points

Can you send live URL to check it

3 Answers

Michael Braga
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Michael Braga
Full Stack JavaScript Techdegree Graduate 24,174 Points
Michael Braga
.a{fill-rule:evenodd;}techdegree seal-36
Michael Braga
Full Stack JavaScript Techdegree Graduate 24,174 Points

For anyone who still has problems with invoking the proper banner image, even with disabling cache from developer tools, I found this page on overflow that was helpful:

http://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working?answertab=votes#answers

belen almonacid
belen almonacid
8,495 Points
belen almonacid
belen almonacid
8,495 Points

i found the mystake i wasnt unclicking de disable cahche in chrome thank you

Haytham Badran
Haytham Badran
216 Points

You are welcome any time

Jose M Aboytes
Jose M Aboytes
2,775 Points

I'm also having the same problem with the <srcset>, what was your solution? How do you unclick the disable cahche in chrome? I was also using Firefox and it was giving me the same problem. The <srcset> was not responding.

Antonio English
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Antonio English
Front End Web Development Techdegree Graduate 18,103 Points
Antonio English
.a{fill-rule:evenodd;}techdegree seal-36
Antonio English
Front End Web Development Techdegree Graduate 18,103 Points

even when I disable cache and refresh the page after resizing, the image still shows medium.

<div class="wrapper">

  <img
    sizes="50vw,
           (min-width: 1024px) 512px"
    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">

<!-- larger 2x has to come first --> <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>