<picture>
<source
media="(max-width: 768px)"
srcSet="https://placeimg.com/300/300/nature"
/>
<source
media="(max-width: 992px)"
srcSet="https://placeimg.com/200/200/tech"
/>
<img src="https://placeimg.com/200/200/arch"
className="card-img-top"
alt=""
/>
</picture>
The above code is from a React App i’m playing with. If you where wondering about className and srcSet.
I felt I had to shorten down this post since it reaches a conclusion that is good practice.