r/webdev – Responsive images using srcset and sizes not rendering correct image

By Pro Web Design

2021-04-12 21:24:07

I am trying to test responsive images out in Codepen to ensure I have it working before implementing in my theme but I can’t get the correct images to render.

I am using srcset and sizes and although the networking tab in devtools is showing multiple images being downloaded the actual images being rendered are all the same.

Am I doing this right?

CODEPEN: https://codepen.io/chrisdevelops/pen/4f9d02a4cf76926cc9941ae7d678b120?editors=1000

SCREENSHOTS (website, devtools): https://imgur.com/a/zd1wimu

HTML


(min-width: 480px) 480px, (min-width: 768px) 768px, (min-width: 1024px) 1024px, 100vw

Testing responsive images

100vw

Testing responsive images

75vw

Testing responsive images

50vw

Testing responsive images

25vw

Testing responsive images

#rwebdev #Responsive #images #srcset #sizes #rendering #correct #image

Recent Posts