@sahand-masoleh
Posted
Hey there!
What you're doing right now is loading the desktop version of all images first, and then loading the mobile versions and replacing them with your media query. So if anyone opens your page on a mobile device, this will just waste bandwidth, storage, and performance. You check out the network tab of your devtools and see that all images are loaded.
The built-in way of avoiding this in HTML is using the srcset attribute with either the picture tag or the img tag with media queries directly in your HTML. That way the browser can decide which image to load.
In short, don't update images hard-coded in your HTML with CSS, choose where you want to define your images (HTML or CSS), put all versions there, and use the provided methods to choose the appropriate version.
Marked as helpful
@osaaroh
Posted
@sahand-masoleh thanks for this. Will use the srcset attribute going forward
