Upload
eeeps
View
1.318
Download
2
Embed Size (px)
Citation preview
IMAGE SCRIMMAGE
A TECHY, STRETCHY
ERIC PORTIS • SMASHINGCONF FREIBURG • 2015
WHO?QUESTION #1
SHIP HAPPENS
★URBANA!
RESPONSIVE IMAGES COMMUNITY GROUP
http://ricg.io
WHAT!?QUESTION #2
<img>
src="insufficent"><img
WHY?QUESTION #3
BITMAPS ARE
FLUID
FIXED
THE WEB IS
vs.
BITMAP IMAGES ARE THE BIGGEST PERFORMANCE BOTTLENECK ON THE RESPONSIVE WEB
63%of the web is
IMAGEShttp://httparchive.org/interesting.php#bytesperpage
736 kb 2015
2011 228 kb
http://httparchive.org/trends.php#bytesImg&reqImg
30” Cinema Display 2560 x 1600
iPhone 6 Plus 2280 x 1242 (logical)
30” Cinema Display 2560 x 1600
iPhone 6 Plus 2280 x 1242 (logical)
30” Cinema Display 2560 x 1600
Retina iMac 5120 x 2880
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
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
VIEWPORT WIDTH WASTED IMAGE BYTES360px 72%
760px 53%
1260px 42%
http://timkadlec.com/2013/06/why-we-need-responsive-images/
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
ADAPTABILITY PRESENTS NEW OPPORTUNITIES FOR VISUAL DESIGN
The day after the release of the original iPhone
~10 years later
nytimes.com on a small screen
Cropping
Some sort of… mammal? Look at that adorable Portuguese Water dog!
Otherwise altering
Otherwise altering
HOW?QUESTION #4
LIVE CODING!x descriptors
2x = (min-device-pixel-ratio: 2) ?
NO!
IF the user’s device has a device-pixel-ratio >= 2 THEN load this resource.
NO EXCEPTIONS!
MEDIA QUERIES:
Hey, browser! Here are some fun facts about the available resources.
SRCSET DESCRIPTORS:
YOU DECIDE!
x 2x
<img>large.jpg
2x = this resource has an “image density” of 2!
resource width in pixels — <img>’s width on the layout in CSS px
= image density e.g., 2x
..
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
..
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
..
resource width — <img>’s width on the layout
= image density
..
x descriptors only work for fixed-width images!
LIVE CODING!w and sizes
LIVE CODING!picture and media
TAYLOR HUNT: When Responsive Images Get Ugly
http://codepen.io/Tigt/blog/when-responsive-images-get-ugly
LIVE CODING!picture and type
“Groovy”
WHEN?QUESTION #5
NOW!
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
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
ENHANCE <img src=“mobile-first.jpg” srcset=“progressive.jpg 640w, enhancement.jpg 1280w, works.jpg 1920w” alt=“Really.” />
https://scottjehl.github.io/picturefill/
POLYFILL WHEN YOU NEED TO
Picturefill!
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
THANKS!ericportis.com
@etportis P.S. I write a fortnightly respimg newsletter!
Sign up here: ricg.io