2

I am using srcset to display an animated GIF for users on large devices, but need to display a static JPG to users on small and medium devices.

The following code works great when I resize my browser window on a 1x screen. The issue I'm running into is when viewing the page on iPad in portrait mode (768px), the animated GIF is displaying. I get that the browser is trying to display a higher quality image, since it's a 2x resolution, but in my case, it needs to be an entirely different image.

How can this be changed to only show the GIF if the user's screen is wider than 940px?

<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt="">
Cofey
  • 11,144
  • 16
  • 52
  • 74

1 Answers1

4

This is not a job for srcset at all - srcset handles multiple sources that are all exactly identical except for resolution. If you're providing different images, use <picture> and multiple <source> elements.

For example, to answer your question precisely as asked:

<picture>
  <source media="(min-width: 940px)" srcset="animated.gif">
  <img src="static.jpg">
</picture>

But the meta-question remains: why are you only sending the gif to large-screen devices? Are you imagining that large-screen devices have more bandwidth or something?

Xanthir
  • 18,065
  • 2
  • 31
  • 32
  • You guessed correct. The animated GIFs can be up to 4 MBs, so we're serving mobile users JPEGs that are _much_ smaller in file size. – Cofey Feb 19 '16 at 21:23