The Responsive Images Saga

Yoav Weiss

Edge - NYC, September 2013

yoavweiss.github.io/respimg-edge-presentation

In the begining - mobile only sites

Then - RWD happened

Followed by BLOAT!!!

WHY???

72% Serve same resources

guypo.com

Which resources?

Images - over 60%

httparchive.org

How much can be saved?

Up to™ 72% image data savings

tkadlec.com

Retina only increases these gaps

Responsive Images Problem

2 major use cases

Resolution switching

Serving different image dimensions to different devices

DPR switching

Sending retina images only to retina screens

viewport switching

Sending images adapted to their display dimensions

Art Direction

Getting images to match layout

Client Hints

  • HTTP based content-negotiation solution
  • Client sends hints/capabilities
  • Server side logic decides on resource

Opt-in only

Not sent on first HTML request

Responsive Image Container

  • File format approach
  • A "layer" per resolution
  • Both resolution switching and art-direction

Resolution switching

336x635

Is split into

106x200

211x400

336x635

Art-direction

770x512

Is split into

200x200

400x288

770x512

Advantages

  • Markup left untouched
  • A single file per image
  • Better for post-download dimensions changes

disadvantages

  • Touches many layers. Will take time
  • Decoding performance???
  • Fetching mechanism network performance???

Oh... One more thing

Progressive image download

Questions?

Thanks!

Attribution

RWD - http://www.flickr.com/photos/axbom/6263640150/sizes/o/in/photostream/

Bloat - http://www.flickr.com/photos/lorenjavier/5013332959/sizes/l/in/photostream/

CNN - http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/