0

I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.

I am using the <picture> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices.

The code currently reads:

<picture>
  <source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
  <img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
</picture>

I understand that <picture> is not supported on all platforms, so I also tried srcset, as follows:

<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w, 
             http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w" 
     sizes="100vw” 
     src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>

I want the image to always be 100% width, and to switch to a different image when viewing below 950px.

I am referencing code from here http://alistapart.com/article/using-responsive-images-now#section3, but am I missing something? Can someone point me in the right direction?

My working site is http://phillipsperfections.com/. You should be able to view source for all of the code.

Thanks so much!

OKeefe
  • 1
  • 1

1 Answers1

0

Because the two versions contain different visual content, you are indeed “art-directing”, and should use the <picture> element (and not srcset) to switch between the two versions of your image.

(If the two versions were identical, scaled-up-and-down versions of each other, srcset would be the way to go).

Your <picture> markup looks correct; what mobile browser are you not seeing the expected version in? <picture> support is actually pretty good these days; here’s a current support matrix.

If you need the art direction to work in older browsers, you’ll need to use Picturefill — and inspecting your site, it looks like you are! But with some extra quotes which are preventing the script from loading:

<script src="“http://phillipsperfections.com/js/picturefill.js&quot;" async=""></script>

If you change that to:

<script src="http://phillipsperfections.com/js/picturefill.js" async></script>

Do you see the desired behavior in the mobile browser that wasn’t showing it to you before?

Eric Portis
  • 156
  • 3
  • Also! If you want the image to always occupy 100% of the viewport, the place to do *that* is CSS. Add a `class="full-width"` or whatever to the `` inside of the `` and then `.full-width { display: block; width: 100%; }` in your CSS. – Eric Portis Jun 01 '16 at 21:39
  • Eric, Thank you so much for taking a look! For some reason when I view the code on my end, I am not seeing those extra quotes. I took out the old line, and pasted your suggested version just in case. Still to no avail! Do you see the extras now? I am testing in Safari on iPhone 5 and 6s, as well as Chrome on iPhone 5. – OKeefe Jun 02 '16 at 17:15
  • OK! So I don't see the double quotes now but I do notice something loading on my iPhone 5C that I hadn't noticed before - you don't have an `@viewport` or `` declaration. So the iPhone renders the page at the iOS default viewport width of `980px` and then visually scales it down to fit the phone screen. Add this to your ``: ``. Does that lead to the desired behavior? – Eric Portis Jun 08 '16 at 03:40
  • Amazing!! That solved it! Except the body was not displaying at full width, so I added two notes about scale. It now reads: ``. There is only one tiny problem remaining—if you scroll horizontally or zoom out, you will see there is extra margin or padding on the right of the page. I added `overflow-x: hidden;` which worked on Chrome on desktop. But does not work on desktop Safari, nor iPhone 5 and 6s Safari and Chrome. Do you know why? – OKeefe Jun 09 '16 at 16:51