Covers how to optimize images for high pixel density displays using media queries or SVG.

1. BUILDING WEBSITES FOR RETINA DISPLAYS:
MAKING FRIENDS
WITH PIXELS
Shoshi Roberts
@shoshizilla

2. PIXEL PERFECTION,
NOT JUST FOR APPS
• Many devices have a 2x pixel density or higher (the iPhone 4
is among them)
• Images that are not optimized for them will be blurry and sad
• There is no automatic standard for including hi-res images
BUT THERE ARE SOME SOLUTIONS...

3. HOW BLURRY?
Not Optimized Optimized

4. HOW BLURRY?
Not Optimized Optimized

5. SHOW ME THE CODE!

6. #1 - FLUID LAYOUT
• First, use
responsive or fluid design to create a page that
looks great on all devices
• Alternatively, make a mobile specific version of your site

7. #2 - USE CSS3
• Really, as much as you like
• Mobile browsers, especially webkit, are largely up to date
and support the latest properties.
• CSS3 for gradients, shadows, etc. will eliminate the need
for using images in many cases
• It improves performance! (like anything, when used in moderation)

8. #3 - OPTIMIZE YOUR IMAGES
• Make 2 versions:
• One at normal size (e.g. 100px by 100px)
• One at double size (e.g. 200px by 200px)

9. #4A - WRITE MEDIA QUERIES
h1.icon {
width: 100px;
height: 100px;
/* This is your 100px by 100px image */
background: transparent url(icon.png) 0 0 no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and
(-o-min-device-pixel-ratio: 2) and
(min--moz-device-pixel-ratio: 2) and
(min-device-pixel-ratio: 2) {
h1.icon {
/* This is your 200px by 200px image */
background: transparent url(icon-2x.png) 0 0 no-repeat;
-moz-background-size: 100px 100px; /* Firefox 3.6) */
-o-background-size: 100px 100px; /* Opera 9.5 */
-webkit-background-size: 100px 100px; /* Safari 3.0 */
background-size: 100px 100px;
}
}

10. #4B - OR USE SVG
HTML
<object data="icon.svg" type="image/svg+xml" class="vector">
</object>
CSS - Fluid
.vector {
/* Use whatever percentages you like, the content will scale */
width: 90%;
height: 90%;
}

11. #5 - TEST, TEST, TEST!
• Look at it on as many devices as you can.
• Pay the most attention to the platforms your users visit on.

12. WRAPPING IT UP
• The arms race for pixel density is on, make images that scale
• Use a CSS3 when you can
• Use media queries and SVG to optimize your image display

13. THANKS
AND HAPPY HACKING!
@shoshizilla for @ladieswhocode
Special Thanks to @mintdigital for hosting