A bit confused as to how to get responsive images working?

[AdamDSherman]

Describe your problem/question I've linked up lazysizes to my site no issues. Adding the lazyload class seems to work. However, I cannot figure out how to swap out images at different break points.

Make it reproduce-able I have the line:

<img data-srcset="medium.jpg 768w, small.jpg 634w" data-src="small.jpg 634w" data-size="auto" class="lazyload">

But no matter what screen size I have it will always display the medium image.

How do I get it to display the smaller image?

Many thanks!

Add tags/keywords responsive images

⚠️ Search for existing open/closed issues/discussions before you ask your question. ⚠️ I work on my spare time on helping users out. This means make it easy for me to simply see your live problem and help to fix it. 🤘 No panic: Don't be afraid to ask a question.

[Allmedialab]

Hi Adam,

Here is an example of a normal image with webp and jpg fallback.

the class img-responsive:

width: 100%; height:auto;

Image ratio = in this case 3:2 but can be any ratio!

David

<picture>
<source media="(max-width: 3500px)"
type="image/webp"
data-sizes="auto"
srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)"
data-srcset="
assets/img/responsive-img/small-images/anton-kantoor/webp/sociale-innovatie-3-2-500-px.webp 500w,
assets/img/responsive-img/small-images/sociale-innovatie/webp/sociale-innovatie-3-2-800-px.webp 800w,
assets/img/responsive-img/small-images/sociale-innovatie/webp/sociale-innovatie-3-2-1200-px.webp 1200w" class="lazyload img-responsive">
<img
data-sizes="auto"
data-src="assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-800-px.jpg"
srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)"
data-srcset="
assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-500-px.jpg 500w,
assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-800-px.jpg 800w,
assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-1200-px.jpg 1200w"
src="[assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-800-px.jpg](https://www.360zuid.nl/assets/img/responsive-img/small-images/sociale-innovatie/jpg/sociale-innovatie-3-2-800-px.jpg)" class="lazyload img-responsive"
alt="Some alt text">
</picture>

Here a header with art direction for mobile phones
phone = ratio 4:3 wide = ratio 4:1 But you can make it the way you want!

<picture  style="filter: brightness(0.7)">
                   <source media="(max-width: 475px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" 
                   data-srcset="assets/img/responsive-img/headers/intro-2/webp/mieren-portrait-4-3-500px.webp 500w,
                                assets/img/responsive-img/headers/intro-2/webp/mieren-portrait-4-3-1000px.webp 1000w,
                                assets/img/responsive-img/headers/intro-2/webp/mieren-portrait-4-3-1500px.webp 1500w" class="lazyload img-responsive">
                                <source media="(max-width: 475px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" 
                   data-srcset="assets/img/responsive-img/headers/intro-2/jpg/mieren-portrait-4-3-500px.jpg 500w,
                                assets/img/responsive-img/headers/intro-2/jpg/mieren-portrait-4-3-1000px.jpg 1000w,
                                assets/img/responsive-img/headers/intro-2/jpg/mieren-portrait-4-3-1500px.jpg 1500w" class="lazyload img-responsive">
                                <source media="(max-width: 3500px)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" 
                   data-srcset="assets/img/responsive-img/headers/intro-2/webp/mieren-wide-4-1-2000px.webp 2000w,
                                assets/img/responsive-img/headers/intro-2/webp/mieren-wide-4-1-3000px.webp 3000w,
                                assets/img/responsive-img/headers/intro-2/webp/mieren-wide-4-1-4000px.webp 3000w,
                                assets/img/responsive-img/headers/intro-2/webp/mieren-wide-4-1-5000px.webp 5000w" class="lazyload img-responsive">
                                <img data-sizes="auto" data-src="assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-2000px.jpg" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.360zuid.nl/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" 
                    data-srcset="assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-2000px.jpg 2000w,
                                assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-3000px.jpg 3000w,
                                assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-4000px.jpg 3000w,
                                assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-5000px.jpg 5000w" src="[assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-2000px.jpg](https://www.360zuid.nl/assets/img/responsive-img/headers/intro-2/jpg/mieren-wide-4-1-2000px.jpg)" class="lazyload img-responsive" alt="Some alt text">
                            </picture>