Slide 1
Slide 1 text
FRONTEND
Jarkko Laine
graphics in the era of retina screens
YOUR
SCALING
Slide 2
Slide 2 text
@JARKKO
Slide 3
Slide 3 text
RUN
Slide 4
Slide 4 text
SKI
Slide 5
Slide 5 text
BIKE
Slide 6
Slide 6 text
COFFEE
Slide 7
Slide 7 text
WHAT?
Slide 8
Slide 8 text
RETINA
Slide 9
Slide 9 text
RETINA
HIGH DPI
≈
in Apple-speak, 2 x normal DPI
Slide 10
Slide 10 text
RETINA
HIGH DPI
≈
generally anything >1.5 x normal
Slide 11
Slide 11 text
iPhone 4+ Retina MBP 15”
iPad “3”+ Retina MBP 13”
WHY?
Slide 12
Slide 12 text
iPhone 4+ Retina MBP 15”
iPad “3”+ Retina MBP 13”
WHY?
YOUR GRAPHICS
WILL LOOK LIKE
SHIT
Slide 13
Slide 13 text
iPhone 4+ Retina MBP 15”
iPad “3”+ Retina MBP 13”
WHY?
BUT I HATE APPLE,
WHY SHOULD I
CARE?
Slide 14
Slide 14 text
WHY?
NOKIA N770
in 2005
225dpi on a 4-inch screen
Slide 15
Slide 15 text
WHY?
NEXUS ONE
254 dpi
Slide 16
Slide 16 text
WHY?
NEXUS S
316 dpi
Slide 17
Slide 17 text
WHY?
NEXUS 7
216 dpi
Slide 18
Slide 18 text
WHY?
EVEN LAPTOPS
Samsung Series 9
prototype
Slide 19
Slide 19 text
iPhone 4+ Retina MBP 15”
iPad “3”+ Retina MBP 13”
WHY?
HIGH IS THE NEW
LOW
Slide 20
Slide 20 text
“Given that it’s clearly not possible to
support all current and future pixel
densities explicitly, it’s better to try to
target the highest density as a
default”
– Thomas Fuchs
retinafy.me
Slide 21
Slide 21 text
“Always target high-
density displays by
default, don’t make it an
afterthought”
– Thomas Fuchs
retinafy.me
Slide 22
Slide 22 text
HOW?
Slide 23
Slide 23 text
HOW?
It depends.
Slide 24
Slide 24 text
DETECTING A HIGH-
DPI SCREEN
Slide 25
Slide 25 text
IN JAVASCRIPT
function isRetina(){
return (('devicePixelRatio' in window &&
devicePixelRatio > 1) ||
('matchMedia' in window &&
!matchMedia("(-moz-device-pixel-
ratio:1.0)").matches))
}
from retinafy.me
Slide 26
Slide 26 text
IN CSS: MEDIA QUERIES
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
/* your retina rules here */
}
from retinafy.me
Slide 27
Slide 27 text
HOW?
Text
just works.
*mostly
Slide 28
Slide 28 text
HOW?
Photos
Slide 29
Slide 29 text
Photos One day...
W3C
W3C
Slide 30
Slide 30 text
http://www.flickr.com/photos/nzdave/2238376926/
Slide 31
Slide 31 text
Photos One day...
WHATWG
WHATWG
Slide 32
Slide 32 text
The Apple Way
Meanwhile...
Just load the 2x version with
Javascript
Slide 33
Slide 33 text
The Apple Way
Meanwhile...
Uses extra bandwidth
Slower to load the 2x version
Slide 34
Slide 34 text
Picturefill Meanwhile...
Slide 35
Slide 35 text
Picturefill Meanwhile...
Only loads the correct version
Slide 36
Slide 36 text
Picturefill Meanwhile...
Still relies on Javascript
...and lots of image versions
...and possibly specialized server-side
support
Slide 37
Slide 37 text
Thijs Method Meanwhile...
Only serve the 2x version
And size it correctly using CSS
http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-
displays/
Slide 38
Slide 38 text
Thijs Method Meanwhile...
“Needlessly” loads the 2x version
even for low-DPI screens.
Slide 39
Slide 39 text
Thijs Method Meanwhile...
But...
Slide 40
Slide 40 text
Thijs Method Meanwhile...
You can use vastly higher compression
without losing quality with HiDPI
images
Slide 41
Slide 41 text
Thijs Method Meanwhile...
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 42
Slide 42 text
Thijs Method Meanwhile...
Caveats with large JPGs
e.g. 2MP on iOS 4 and 5
Larger ones will be downsampled
Artefact issues sometimes with IE9
Slide 43
Slide 43 text
HOW?
Backgrounds
Slide 44
Slide 44 text
body {
background-size: 100px 100px, 100% 100%;
background: url('images/bg.png') 0 0 repeat;
}
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
body {
background: url('images/[email protected]') 0 0
repeat;
}
}
Slide 45
Slide 45 text
HOW?
UI Elements
Slide 46
Slide 46 text
UI Elements
Consider using CSS
whenever possible
Gradients
Rounded corners
Drop shadows
Slide 47
Slide 47 text
UI Elements
Consider using CSS
whenever possible
Retina-readiness for free
Slide 48
Slide 48 text
UI Elements
If you still need bitmaps
Use PNG, not JPG
Either larger version and scale down with
CSS
Or two versions and media queries
Slide 49
Slide 49 text
UI Elements
If you still need bitmaps
...maybe you don’t after
all
Slide 50
Slide 50 text
SVG
Slide 51
Slide 51 text
SVG
The ugly duckling of
graphics
Slide 52
Slide 52 text
SVG
Vector-based
TEH SCALES
„
Slide 53
Slide 53 text
SVG
XML-based DOM
Style with CSS
„
Manipulate with JS
Slide 54
Slide 54 text
SVG
Old skool
In the works since 1999
Slide 55
Slide 55 text
SVG
Had a great future
Until got swallowed by
the Flash clusterfuck
Slide 56
Slide 56 text
The return of SVG
Inline in HTML5
Very good browser support*
*Still need fallback for Android 2 and IE < 9
Output directly from your graphics app
Slide 57
Slide 57 text
The return of SVG
raphaël.js
Slide 58
Slide 58 text
The return of SVG
d3.js
Slide 59
Slide 59 text
SVG
CAVEATS
Can be CPU-intensive
Still might need fallbacks
Sometimes larger than equiv. bitmap
Slide 60
Slide 60 text
ICON FONTS
Nice hack
Only one color per glyph
No per-density special cases
Hard to debug
Still might be better than scaled-up
bitmap icons
Slide 61
Slide 61 text
CREDITS
Thomas Fuchs:
retinafy.me
Slide 62
Slide 62 text
PLUG
forgottensvg.com
Slide 63
Slide 63 text
THANK YOU!
?