Responsive html5 images with srcset with pixel breakpoints

HTML & CSS
1

I’ve hit a block with how to properly use srcset and sizes in the correct way for my situation. I want to be able to load the appropriate image for either desktop retina or non-retina, mobile retina or non-retina. I just want to be able to use a pixel based breakpoint in the sizes attribute (most examples I’ve seen use em) and also ensure I serve the correct image for retina. E.g

<img
  src="mobile.jpg"
  srcset="
     mobile.jpg,
     mobile-retina.jpg 2x,
     desktop.jpg, 
     desktop-retina.jpg 2x"
 sizes="
  (min-width: 768px)"
>

Thanks in advance for any help!

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.