Design comparison
Solution retrospective
Hello, I made the picture swap using HTML <picture> element, but I found another solution using CSS media query. Which is the better solution?
Community feedback
- @ssembatya-dennisPosted about 2 years ago
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 helpful0@K-MuzslayPosted about 2 years ago@ssembatya-dennis Thank you very much for this information. It is very useful for me.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord