Choosing images in srcset

Question

I'm trying to choose between two images in srcset: if screen is less than 1120px I want to get image_a.jpg; if it is bigger, I want image_b.jpg. I'm trying to figure out how to do this, but reading the documentation I can't get a precise idea. It should be easy, my best try is:

<div 
src="image_a.jpg" 
srcset="image_b.jpg 1121px" 
alt="My image">

Does anyone know how to do this?

It would be nice to get an answer from the questioner or a answer marked as correct. — Heinz Schilling, Feb 10 '18 at 10:47

Heinz Schilling · Accepted Answer · 2018-02-17T19:30:43.443

If you use srcset the browser catch the image that fits best. But your HTML need a <img> instead of a <div>. And every image need width in pixels (720w ...). Additional you can add sizes for different viewports. In my example the images are full width of screen on small viewports and in smaller columns on wider viewports. Example:

<img 
src="storage/_processed_/f0396ca7ab.jpg"     
srcset="storage/_processed_/4f9d1ad698.jpg 520w,
    storage/_processed_/ab73a280b5.jpg 720w,
    storage/_processed_/8613bd3302.jpg 940w,
    storage/_processed_/164f576264.jpg 1140w,
    storage/_processed_/3a7536450d.jpg 1440w,
    storage/_processed_/7466e52f7a.jpg 1980w" 
class="img-responsive" 
sizes="(min-width: 992px) 255px,
    (min-width: 768px) calc(100vw - 60px),
    calc(100vw - 60px)" 
alt="">

Choosing images in srcset

1 Answers1