I personally believe the picture tag is the best way to approach this issue because the picture tag not only helps you to swap which image to display at what media screen size but also assists the user to download only the right recommended image for his screen size which saves band width.
The other way of doing it in CSS doesn't eliminate the fact that both images are still available in the DOM but just hiding one and displaying the other at different screen sizes hence wasting band width since the user has to download both the one is sees and the one that CSS is hiding.
Marked as helpful
@K-Muzslay
Posted
@ssembatya-dennis Thank you very much for this information. It is very useful for me.