Retina Display Textures

RETINA DISPLAY TEXTURES Tap Into Better Clarity For Your Mobile Projects Mark Riggan

WHAT’S A RETINA DISPLAY?

RETINA DISPLAYHigh Resolution Screen Technology introduced by Apple.Provides greater pixel density and higher contrast ratios. Standard Retina Display

iPhone iPad Mac 4 4S The New iPad Macbook Pro640x960 px 1536x2048 px 2880x1800 px (Previously 320x480) (Previously 768x1024) (Previously 1440x900)

SO IT MAKES STUFF LOOKMAGICALLY BETTER, RIGHT?

THAT DEPENDS• Text and CSS-generated art are super sharp. AWESOME• Images and CSS background textures are pixelated. UH OH, PROBLEM

OK, LET’S CLEAR THIS UP

FOR DESIGNERS• Setup document at 200% scale of baseline resolution • Export at 50% scale for non-Retina Display • Preserves image quality• Total of 2 output files • Low-res file • High-res file (2x resolution)

image2x.png (Original) image.png (Reduced) 600x600 300x300

FOR DEVELOPERS/* Original Image */selector { width: 300px; height: 300px; background-image: image.png; }/* For Retina Displays */@media all and (-webkit-min-device-pixel-ratio: 2) { selector { background-image: image2x.png; background-size: 300px auto; }}

Before (300x300) After (600x600)

SWEET! LET’S SUMMARIZE

IN SUMMARY• Enhances Quality for Users• Easy to Implement (minimal code)• Try Limiting to High Traﬃc Areas • Can be Labor Intensive • Increases Bandwidth Usage• Impact on Future of Web?

RETINA DISPLAY TEXTURES Tap Into Better Clarity For Your Mobile Projects Mark Riggan Twitter (@asuwebdesign) Dribbble (markr)

http://notes.georgieff.it	31
http://us-w1.rockmelt.com	5
http://fp.edu.gva.es	5
http://www.cricket.com	4
http://georgieff.it	2
http://www.linkedin.com	2
http://www.onlydoo.com	1

Retina Display Textures

by Mark Riggan

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 50

Statistics