Different images for mobile than desktop web

Solved
Highlighted
Astronaut
1069 145 260

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 <object> or <embed> instead of <img>, 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. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Expert
2653 60 650

I would not worry too much about it, since images are lazy-loaded anyway. 

Probably worth spending some extra time to tweak lazysizes and try with src attributes removed, but this is nit-picking -- those 300x300 images are not that big to cause any delays.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
17 0 0

@Ninthony i try this for Venture Theme and its not working for me

.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}

 

 

 

<div class="mobile-image">
<img src="img src">
</div>
<div class="desktop-image">
<img src="img src">
</div>

 

On desktop all is okay - i see only one image but on my mobile i see 2 images :/
Can you help me pls?

0 Likes
Tourist
15 0 0

I think I've found a workaround to my problem. I've made a new copy of slider.liquid and added this code to the two slider.liquid files

@media (max-width: 768px){ 
.index-section.slideshow-section {    display: none;
}
}

I changed the index-section.slideshow-section of the second slider.liquid  into another name, and for the second slider.liquid i changed it from max-width to min-width.

 

This effectively hides one slideshow if its in a screen with less than 768px width, and hides the other one if the screen is wider. I would love to hear what you think in terms of load efficiency (i don't know if this will make my site load slower, if it will have to load both the slideshows despite only showing one, I haven't tested it yet), but I think it should solve my problem and make me select nicer photos to optimize for a mobile and desktop experience.

0 Likes