@dusan-b
Posted
Hello Kevin,
to allow the browser to choose the appropriate image regarding the screen size, you should use the <picture>
element.
You could do something like this:
<picture>
<source srcset="./img/image-mobile.jpg" media="(max-width: 400px)" type="image/jpeg">
<img src="./img/image-desktop.jpg" alt=" Some alternative text">
</picture>
This way you are saying to the browser to load the smaller image for devices that are up to 400px wide, and otherwise to load the bigger image. You can also add more image versions by adding multiple <source>
elements.
MDN has a great article about it, to get started:
<picture>: The Picture element
Hope this helps. Happy coding!
Marked as helpful
@kevcoder247
Posted
@dusan-b Wow you're awesome, I was unaware of the picture element. I even looked up each html 5 element lol. Thanks I will definitely be using this in the future.