John Mirage• 1,590
@john-mirage
Posted
Hello,
Yes, there is other ways to achieve the same result, but every other solutions basically do what picture is made for. So Instead i will try to explain you how picture works:
<picture class="picture">
<source srcset="path/to/desktop/image.jpg" media="(min-width: 1200px)" />
<source srcset="path/to/tablet/image.jpg" media="(min-width: 992px)" />
<img class="picture__image" src="path/to/mobile/image.jpg" alt="product image" />
</picture>
- The picture element is basically the container of your images. This element can be styled if you need to.
- The img element hold the default picture (in the src attribute). This is the element you style and describe in the alt attribute.
- The source elements are other images that can be conditionaly used if their media attribute condition are true. Their are not displayed so you do not have to style them.
If the above example:
- The default (mobile) picture is used if the screen width is lower than 992px.
- The tablet image (in srcset attribute) will replace the default image if the screen width is higher than 992px and lower than 1200px.
- The desktop image (in srcset attribute) will replace the default image if the screen width is higher than 1200px.
Marked as helpful
0
