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
Slide 30
Slide 30 text
http://www.flickr.com/photos/nzdave/2238376926/
Slide 31
Slide 31 text
Photos One day...
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