5 ms·

Anyone aware of any promising client-side solutions for responsive images? I'm hoping to see something like the picture element suggested here: http://www.sma

Anyone aware of any promising client-side solutions for responsive images? I'm hoping to see something like the picture element suggested here: http://www.smashingmagazine.com/2011/11/html5-semantics/ http://www.smashingmagazine.com/2011/11/html5-semantics/ <picture alt="angry pirate"> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png>  <img src=midres.png alt="angry pirate"> </picture> Would something like this be possible to implement with React or Web Components? Or will we have to wait for HTML6? In my opinion, responsive images really shouldn't be a server-side concern, much less something that should require a third party service.

mrbig4545 11y ago
have you looked at srcset? https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ https://css-tricks.com/responsive-images-youre-just-changing...
- lewisl9029 11y ago
  Beautiful! This is exactly what I was looking for. =)
  - mrbig4545 11y ago
    No problem, I only know this because I had to use it yesterday. It's not fully supported yet, but it's good enough as long as you keep using src as a fallback http://caniuse.com/#feat=srcset http://caniuse.com/#feat=srcset
acdha 11y ago
<picture> is available in about half of the shipped browsers (http://caniuse.com/#search=picture http://caniuse.com/#search=picture) and there's a robust polyfill available: https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill
- lewisl9029 11y ago
  Wow. This is even more exactly what I was looking for. =) The polyfill looks amazing too. Looks like it polyfills both the picture tag itself as well as the srcset property on img that mrbig4545 mentioned.
  - acdha 11y ago
    Yeah, I prefer <picture> for two reasons – being able to gracefully use new image formats and being able to do art-direction type changes using media queries – but the great thing about the polyfill is that you're not forced to pick one.

mrbig4545 11y ago

have you looked at srcset? https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ https://css-tricks.com/responsive-images-youre-just-changing...

lewisl9029 11y ago
Beautiful! This is exactly what I was looking for. =)
- mrbig4545 11y ago
  No problem, I only know this because I had to use it yesterday. It's not fully supported yet, but it's good enough as long as you keep using src as a fallback http://caniuse.com/#feat=srcset http://caniuse.com/#feat=srcset

acdha 11y ago

<picture> is available in about half of the shipped browsers (http://caniuse.com/#search=picture http://caniuse.com/#search=picture) and there's a robust polyfill available: https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill

lewisl9029 11y ago
Wow. This is even more exactly what I was looking for. =) The polyfill looks amazing too. Looks like it polyfills both the picture tag itself as well as the srcset property on img that mrbig4545 mentioned.
- acdha 11y ago
  Yeah, I prefer <picture> for two reasons – being able to gracefully use new image formats and being able to do art-direction type changes using media queries – but the great thing about the polyfill is that you're not forced to pick one.