A Responsive Image Container – Now to something completely different

View Github Repository Open presentation in a new window

yoavweiss

See all presentation from yoavweiss

A Responsive Image Container – Now to something completely different

0 0

respimg-paris-presentation

On Github yoavweiss / respimg-paris-presentation

A Responsive Image Container

Yoav Weiss

Responsive Images Meet-up - Paris, September 2013

AKA: The "magical" image format

Solutions!

Markup solutions

HTTP solutions

But, But

we wanted an image format!!!

At first

then

How?

A container with multiple layers and an offset table on top

Layer: A residual image between the previous decoded image resolution, and the current one*

* with a twist

*The twist

The previous decoded image resolution can be repositioned and upscaled

Layer payload can be in various formats

  • e.g. WebP, JPEG-XR
  • Not JPEG, since residual images are too big

Resolution switching

336x635

Is split into

106x200

211x400

336x635

Art-direction

770x512

Is split into

200x200

400x288

770x512

Fetching?

  • HTTP ranges
  • Fetch an initial range
  • Browser fetches the rest of the image gradually
  • Can be optimized with a manifest

Advantages

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

disadvantages

  • Touches many layers. Will take time
  • Decoding performance???
  • Network performance???

Questions?

Now to something completely different

While I'm here

Let's talk about srcset's future

Current implementation

<img src="cat.1X.jpg" srcset="cat.1x.jpg 1x, cat.2x.jpg 2x">

Suggested resolution switching qualifiers

<img src="cat.1X.jpg" srcset="cat.1x.jpg 1x 320w, cat.2x.jpg 2x 320w, cat.2x.jpg 1x 640w, cat.4x.jpg 2x 640w, cat 4x.jpg 1x 1280w">

Web dev's response to this

My proposal

Define a new qualifier as a multiple of a "base viewport" and DPR

<img src="cat.1X.jpg" srcset="cat.1x.jpg 1m, cat.2x.jpg 2m, cat.4x.jpg 4m">

Or...

<img src="cat.1X.jpg" srcset="cat.1x.jpg 1x 320w, cat.2x.jpg (2x 320w, 1x 640w), cat.4x.jpg (2x 640w, 1x 1280w)">
Same can be mirrored with CH

Thanks!

Attribution