<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
<figure
>
<picture>
<!-- Auto scaling with imagemagick -->
<!--
See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
-->
<source
class="responsive-img-srcset"
srcset="/img/kink/movingWall-480.webp 480w,/img/kink/movingWall-800.webp 800w,/img/kink/movingWall-1400.webp 1400w,"
sizes="95vw"
type="image/webp"
>
<img
src="/img/kink/movingWall.png"
class="img-fluid rounded z-depth-1"
width="100%"
height="auto"
onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
>
</picture>
</figure>
</div>
<div class="col-sm mt-3 mt-md-0">
<figure
>
<picture>
<!-- Auto scaling with imagemagick -->
<!--
See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
-->
<source
class="responsive-img-srcset"
srcset="/img/Rosa-480.webp 480w,/img/Rosa-800.webp 800w,/img/Rosa-1400.webp 1400w,"
sizes="95vw"
type="image/webp"
>
<img
src="/img/Rosa.jpg"
class="img-fluid rounded z-depth-1"
width="100%"
height="auto"
onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
>
</picture>
</figure>
</div>
</div>
<div class="caption">
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
</div>