@dusan-b
Posted
Hello Luke,
you can allow the browser to choose the appropriate image regarding the screen size by using the <picture> element.
You could do something like this:
<picture>
<source srcset="./images/image-product-desktop.jpg" media="(min-width: 900px)">
<img src="./images/image-product-mobile.jpg" alt=" Some alternative text">
</picture>
This way the browser will load the desktop image if the viewport width is equal to or greater than 900px, and otherwise it will load the mobile image. You can also add more image versions by adding multiple <source> elements.
I would also consider to make the image accessible to screen reader users, since it's an essential part of the content. However, if you want to hide an image from screen readers, you should simply leave the alt attribute empty. aria-hidden="true" would be redundant in this case. The support of ARIA varies among browsers and screen readers and is in most cases not as reliable as plain HTML solutions.
Hope this helps. Keep it up, and happy coding :).
Marked as helpful
