0

I am trying to implement art direction and make the <picture> element show a square image on mobile and a landscape image on all other devices. For some reason, Safari keeps falling back to the <img> tag, when it should be able to recognize the <source srcset=""> values I've given here.

<picture>
  <source media="(max-width: 480px)" srcset="http://placehold.it/480x480">
  <source media="(max-width: 640px)" srcset="http://placehold.it/640x320">
  <source media="(max-width: 1024px)" srcset="http://placehold.it/1024x600">
  <img src="http://placehold.it/1224x1224/c00/fff" alt="">
</picture>

This seems to work find in chrome, but can anyone explain why Safari is ignoring these srcset attributes and how I can get it to work in Safari 9? Thanks!

Jae Zee
  • 3
  • 1
  • 4

2 Answers2

2

Safari 9 doesn't support <picture>, but it looks like Safari 9.1 does! https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html?ref=webdesignernews.com

Cœur
  • 37,241
  • 25
  • 195
  • 267
PopKernel
  • 4,110
  • 5
  • 29
  • 51
1

Safari 9 doesn't have support for <picture>. It only supports <img srcset>. If you need <picture> support for Safari, you probably want to add picturefill to your site.

Yoav Weiss
  • 2,220
  • 4
  • 17
  • 22