0

Is there a way of using the <picture> element to stop a page downloading an image when using mobile phone?

I have a site which displays a header image. Due to the site functionality, it is not possible to use CSS (background image + media query) to prevent the header image being loaded on mobile. As such I need to use a solution which makes use of either <img> or <picture> elements.

I was thinking that perhaps I could use the <picture> element to load a small, clear image (e.g. 1 pixel image) on mobile and then full background image on larger screens.

<picture>
  <source srcset="./images/clear-1pixel.png">
  <source srcset="./images/banner.jpg" media="(min-width: 1000px)">
  <img src="./images/banner.jpg" alt="Header background">
</picture>

Would this be the best approach? I tried testing it, but it seems that the mobile browser is still loading both images.

Benjen
  • 2,835
  • 5
  • 28
  • 42

1 Answers1

0

Your best bet would probably be to implement the image with CSS. Make a generic div in the images place then use code such as the one located here: What does @media screen and (max-width: 1024px) mean in CSS?

Community
  • 1
  • 1
Seb
  • 1
  • 1
  • Unfortunately, as I mentioned in the original post, CSS and media queries are not an option. – Benjen Feb 12 '16 at 08:39