How would you handle it @DariusWS ? Typically on my website’s I’ll use the picture element and source elements to swap out my images, but due to having a fallback for older browsers the fallback is always downloaded anyway, so two images are still downloaded:
<picture>
<source media="(min-width: 767px)" srcset="/path-for-double-resolution-desktop-image.jpg 2x,
/path-for-normal-resolution-desktop-image.jpg">
<source media="(min-width: 320px)" srcset="/path-for-double-resolution-mobile-image.jpg 2x,
/path-for-normal-resolution-mobile-image.jpg">
<img src="/path-for-fallback-image.jpg" alt="Some alt text for SEO">
</picture>
In this case on screens larger than 767px would download the normal resolution desktop image as well as the fallback image. The only way I really know around this is to have a parent div of an element and set a background image for the child and set the parent div to display none:
<style>
.child {
background-image: url('/path-to-image.jpg')
}
.parent {
display: none;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Personally I find working with background images irritating because you always have to give them a width and height, and for my general use I want the image to define the dimensions of the container.
I know there are some way to avoid the image loading with the picture element by using or instead of , but it’s hacky. I would like to hear your approach though if it can make me a better developer.
Most of all, these solutions are an attempt to make it as easy as possible for the users who aren’t too familiar with HTML or CSS to achieve what they want to do and arent too concerned with the background processes, as well as easier on myself by not having to rewrite theme code to work with picture elements or background images if they don’t already use them.