CODEWITHSUNDEEP
htmlimageresponsive-designsrcset
Joel Hoelting
Joel Hoelting

Reputation: 1992

HTML img srcset not behaving as intended?

I am trying to load responsive images and things seem to be working in the latest version of firefox. However, my images are not loading as intended in Safari and Chrome.

<img 
  src="/images/pages/arrivals/02_exterior_1000.jpg" 
  srcset="/images/pages/arrivals/02_exterior_400.jpg 400w, 
          /images/pages/arrivals/02_exterior_600.jpg 600w, 
          /images/pages/arrivals/02_exterior_800.jpg 800w, 
          /images/pages/arrivals/02_exterior_1000.jpg 1000w"
  alt="Blank" 
/>

The goal is to have each of these images load on their respective screen. 02_exterior_400.jpg should load on screens less than 400px. 02_exterior_600.jpg loads on screens less than 600px, etc. Each of these images should be taking up 100vw.

On Chrome (see below) my page is at 386px but it's loading the 800px image and I want it to load the 400px:

Improperly loading images

Same issue on Safari. What am I doing incorrectly?

Edit: Chrome/Safari seem to be doubling my screen width when deciding which image to load. For example: if my screen is at 350px the browser is interpreting it at as 700px and then loading 02_exterior_800.jpg.

Any help appreciated, thanks

Upvotes: 1

Views: 4455

Answers (1)

hyper_text_coffee_pot
hyper_text_coffee_pot

Reputation: 448

You may be missing the "sizes" attribute. Also, put the regular "src" attribute after the "srcset" attribute. This is used as a fallback if the first srcset is either not supported, or the images are not found.

<img srcset="/images/pages/arrivals/02_exterior_400.jpg 400w,
             /images/pages/arrivals/02_exterior_600.jpg 600w,
             /images/pages/arrivals/02_exterior_800.jpg 800w,
             /images/pages/arrivals/02_exterior_1000.jpg 1000w"
     sizes="(max-width: 400px) 400px,
            (max-width: 600px) 600px,
            (max-width: 800px) 800px,
            1000px"
     src="/images/pages/arrivals/02_exterior_1000.jpg" alt="A Sense of Arrival">

Upvotes: 1

Related Questions