Woldu Tsegazgi• 910
@weldu0
Posted
👋 Hey, @istiefanus!
Use <picture> for Responsive Images
<picture>
<source srcset="images/desktop.jpg" media="(min-width: 48rem)">
<source srcset="images/mobile.jpg" media="(max-width: 47.99rem)">
<img src="images/desktop.jpg" alt="Product image">
</picture>
The HTML code above tells the browser to use images/mobile.jpg when the viewport width is less than 48rem. Otherwise, it will use images/desktop.jpg as the default image.
You don't need to use display: none; on specific breakpoints, as the <picture> element automatically selects image according to media=""
If you want to learn more about <picture>, here is greet doc from MDN. 📚
I hope this helps you. 😊
0
