Woldu Tsegazgi• 910
@weldu0
Posted
👋 Hey, @thanhsHai! I have a few suggestions for your project:
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 above markup tells the browser to use images/mobile.jpg if the viewport width is less than 48rem. Otherwise, it will use images/desktop.jpg as the default image.
If you want to learn more about <picture>, here is greet doc from MDN. 📚
0
