Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Images
in 10 minutes
Responsive
Images Responsi
ve
Images
Resp
onsiv
e
Image
s
Screen Size.
Pixel Density. Image Focus.
Layout.
Bonus: Art direction..
http://www.panmacmillan.com/
Flipboard does Responsive really well..
http://engineering.flipboard.com/2014/03/web-layouts/
What are the options?
● Don’t do anything*
● Use the srcset attribute
● Use the Picture element
● Use SVG (the Clown Car t...
Do nothing*
Link: http://fluidity.sexy/
Available for: Everything*
Pros: Makes every default element ‘fluid’ by default. M...
srcset attribute
Useful links: http://longhandpixels.net/blog/2013/09/responsive-images-srcset
Available for: Chrome deskt...
picture element
Useful links: http://html5hub.com/html5-picture-element/
Pros: More flexible than srcset, taps directly in...
SVG (the Clown Car technique)
http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-
for-adaptive-imag...
Javascript
Available for: Everything*
Pros:
● Works everywhere*.
● Effective if you use data-attributes, or polyfill-type ...
So, the future.
Is the <picture> element.
Media queries & multiple sources,
without messy syntax.
But what about now?
Use srcset + polyfill
But avoid making multiple requests.
(consider using it only for desktop resolutions)
What about SVG?
If we could make them easier to manage,
I’d say use them all the time.
Responsive Icons
Iconic: SVG is really freakin’ cool.
https://useiconic.com/tour/
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Git 101: Force-sensitive to Jedi padawan
Next
Upcoming SlideShare
Git 101: Force-sensitive to Jedi padawan
Next
Download to read offline and view in fullscreen.

Share

Responsive images in 10 minutes

Download to read offline

A 10 minute ripping yarn through the world of responsive images.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Responsive images in 10 minutes

  1. 1. Responsive Images in 10 minutes Responsive Images Responsi ve Images Resp onsiv e Image s
  2. 2. Screen Size. Pixel Density. Image Focus. Layout.
  3. 3. Bonus: Art direction.. http://www.panmacmillan.com/
  4. 4. Flipboard does Responsive really well.. http://engineering.flipboard.com/2014/03/web-layouts/
  5. 5. What are the options? ● Don’t do anything* ● Use the srcset attribute ● Use the Picture element ● Use SVG (the Clown Car technique) ● Use Javascript
  6. 6. Do nothing* Link: http://fluidity.sexy/ Available for: Everything* Pros: Makes every default element ‘fluid’ by default. Mobile first? Cons: It’s still loading the same resources on any platform. Doesn’t really solve the underlying issue, but it’s a cheap hack. img,canvas,iframe,video,svg { max-width:100% } .overflow-container { overflow-y:scroll; -webkit-overflow-scrolling:touch }
  7. 7. srcset attribute Useful links: http://longhandpixels.net/blog/2013/09/responsive-images-srcset Available for: Chrome desktop, Safari desktop Pros: Graceful degradation to src attribute. Cons: Polyfill = loading 2 files, Doesn’t solve every problem. Polyfill: https://github.com/JimBobSquarePants/srcset-polyfill
  8. 8. picture element Useful links: http://html5hub.com/html5-picture-element/ Pros: More flexible than srcset, taps directly into media queries Cons: Spec isn’t final, so not production ready. Polyfill: https://github.com/scottjehl/picturefill
  9. 9. SVG (the Clown Car technique) http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving- for-adaptive-images-in-responsive-web-design/ Available for: Chrome, Firefox, Safari, IE9+ Pros: Widely supported, now. Gracefully degrades. Full media query support. Solves art direction issues. Cons: Fugly markup. Creation is really complex.
  10. 10. Javascript Available for: Everything* Pros: ● Works everywhere*. ● Effective if you use data-attributes, or polyfill-type approach. ● Allows you to combine art-direction data with image resources. Cons: ● Needs an accessible fallback, which means loading more images. ● Doing things with Javascript is less efficient than having the browser do the same task, and it’s also slower. ● It can be render-blocking. ● It can’t detect network quality.
  11. 11. So, the future.
  12. 12. Is the <picture> element. Media queries & multiple sources, without messy syntax.
  13. 13. But what about now?
  14. 14. Use srcset + polyfill But avoid making multiple requests. (consider using it only for desktop resolutions)
  15. 15. What about SVG? If we could make them easier to manage, I’d say use them all the time.
  16. 16. Responsive Icons Iconic: SVG is really freakin’ cool. https://useiconic.com/tour/
  • bigbigyuan

    Jun. 12, 2016
  • windkoo

    May. 29, 2015

A 10 minute ripping yarn through the world of responsive images.

Views

Total views

2,889

On Slideshare

0

From embeds

0

Number of embeds

1,816

Actions

Downloads

12

Shares

0

Comments

0

Likes

2

×