Download - A Techy, Stretchy Image Scrimmage
![Page 1: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/1.jpg)
IMAGE SCRIMMAGE
A TECHY, STRETCHY
ERIC PORTIS • SMASHINGCONF FREIBURG • 2015
![Page 2: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/2.jpg)
WHO?QUESTION #1
![Page 3: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/3.jpg)
![Page 4: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/4.jpg)
![Page 5: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/5.jpg)
SHIP HAPPENS
![Page 6: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/6.jpg)
★URBANA!
![Page 7: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/7.jpg)
RESPONSIVE IMAGES COMMUNITY GROUP
http://ricg.io
![Page 8: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/8.jpg)
WHAT!?QUESTION #2
![Page 9: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/9.jpg)
<img>
![Page 10: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/10.jpg)
src="insufficent"><img
![Page 11: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/11.jpg)
WHY?QUESTION #3
![Page 12: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/12.jpg)
BITMAPS ARE
FLUID
FIXED
THE WEB IS
vs.
![Page 13: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/13.jpg)
BITMAP IMAGES ARE THE BIGGEST PERFORMANCE BOTTLENECK ON THE RESPONSIVE WEB
![Page 14: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/14.jpg)
63%of the web is
IMAGEShttp://httparchive.org/interesting.php#bytesperpage
![Page 15: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/15.jpg)
736 kb 2015
2011 228 kb
http://httparchive.org/trends.php#bytesImg&reqImg
![Page 16: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/16.jpg)
30” Cinema Display 2560 x 1600
![Page 17: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/17.jpg)
iPhone 6 Plus 2280 x 1242 (logical)
30” Cinema Display 2560 x 1600
![Page 18: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/18.jpg)
iPhone 6 Plus 2280 x 1242 (logical)
30” Cinema Display 2560 x 1600
Retina iMac 5120 x 2880
![Page 19: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/19.jpg)
1024 x 768 32%
1280 x 800 23%
1280 x 1024 11%
1440 x 900 10%
2009
OTHER 4%
OTHER 24%
1366 x 768 13%
1920 x 1080 9%
360 x 640 8%
768 x 1024 7%
2015http://statcounter.com
![Page 20: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/20.jpg)
1024 x 768 32%
1280 x 800 23%
1280 x 1024 11%
1440 x 900 10%
http://statcounter.com2009
OTHER 4%
OTHER 24%
1366 x 768 13%
1920 x 1080 9%
360 x 640 8%
768 x 1024 7%
2015
![Page 21: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/21.jpg)
![Page 22: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/22.jpg)
![Page 23: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/23.jpg)
![Page 24: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/24.jpg)
VIEWPORT WIDTH WASTED IMAGE BYTES360px 72%
760px 53%
1260px 42%
http://timkadlec.com/2013/06/why-we-need-responsive-images/
![Page 25: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/25.jpg)
![Page 26: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/26.jpg)
TIM KADLEC: Mobile Image Processing
VIDEO: https://www.youtube.com/watch?v=jP68rCjSSjM SLIDES: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
![Page 27: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/27.jpg)
ADAPTABILITY PRESENTS NEW OPPORTUNITIES FOR VISUAL DESIGN
![Page 28: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/28.jpg)
The day after the release of the original iPhone
~10 years later
nytimes.com on a small screen
![Page 29: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/29.jpg)
Cropping
Some sort of… mammal? Look at that adorable Portuguese Water dog!
![Page 30: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/30.jpg)
Otherwise altering
![Page 31: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/31.jpg)
Otherwise altering
![Page 32: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/32.jpg)
HOW?QUESTION #4
![Page 33: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/33.jpg)
LIVE CODING!x descriptors
![Page 34: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/34.jpg)
2x = (min-device-pixel-ratio: 2) ?
![Page 35: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/35.jpg)
NO!
![Page 36: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/36.jpg)
IF the user’s device has a device-pixel-ratio >= 2 THEN load this resource.
NO EXCEPTIONS!
MEDIA QUERIES:
![Page 37: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/37.jpg)
Hey, browser! Here are some fun facts about the available resources.
SRCSET DESCRIPTORS:
YOU DECIDE!
![Page 38: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/38.jpg)
x 2x
<img>large.jpg
![Page 39: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/39.jpg)
2x = this resource has an “image density” of 2!
![Page 40: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/40.jpg)
resource width in pixels — <img>’s width on the layout in CSS px
= image density e.g., 2x
..
![Page 41: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/41.jpg)
![Page 42: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/42.jpg)
medium.jpg is 640 pixels wide — its <img> has a width of 640 px on the layout
= medium.jpg has an image density of 1x
..
![Page 43: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/43.jpg)
large.jpg is 1280 pixels wide — its <img> has a width of 640 px on the layout
= large.jpg has an image density of 2x
..
![Page 44: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/44.jpg)
resource width — <img>’s width on the layout
= image density
..
![Page 45: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/45.jpg)
x descriptors only work for fixed-width images!
![Page 46: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/46.jpg)
LIVE CODING!w and sizes
![Page 47: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/47.jpg)
LIVE CODING!picture and media
![Page 48: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/48.jpg)
TAYLOR HUNT: When Responsive Images Get Ugly
http://codepen.io/Tigt/blog/when-responsive-images-get-ugly
![Page 49: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/49.jpg)
LIVE CODING!picture and type
![Page 50: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/50.jpg)
“Groovy”
![Page 51: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/51.jpg)
WHEN?QUESTION #5
![Page 52: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/52.jpg)
NOW!
![Page 53: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/53.jpg)
X W + SIZES PICTURE
CHROME 34+ 38+ 38+
OPERA 21+ 25+ 25+
FIREFOX 38+ 38+ 38+
IE Nope.
EDGE 12+ 12+ SOON!
SAFARI 7.1+ 9+ ? *
* But probably soonish
![Page 54: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/54.jpg)
X W + SIZES PICTURE
ANDROID STOCK Nope.
CHROME FOR ANDROID 44+ 44+ 44+
OPERA MINI Impossible?
IE MOBILE Nada.
EDGE MOBILE Probably!
iOS SAFARI 7.1+ 9+ ? *
* But probably soonish
![Page 55: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/55.jpg)
ENHANCE <img src=“mobile-first.jpg” srcset=“progressive.jpg 640w, enhancement.jpg 1280w, works.jpg 1920w” alt=“Really.” />
![Page 56: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/56.jpg)
https://scottjehl.github.io/picturefill/
POLYFILL WHEN YOU NEED TO
Picturefill!
![Page 57: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/57.jpg)
image-set(): lets you use srcset syntax in CSS
Client Hints: let you do srcset-y things on the server
Container Queries: The RICG’s next trick?
WICG: Everyday developers shaping the web
EXTRA CREDIT
![Page 58: A Techy, Stretchy Image Scrimmage](https://reader036.vdocuments.site/reader036/viewer/2022062522/5886cfbf1a28abcc7d8b814b/html5/thumbnails/58.jpg)
THANKS!ericportis.com
@etportis P.S. I write a fortnightly respimg newsletter!
Sign up here: ricg.io