retina display textures

RETINA DISPLAY TEXTURESTap 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

4 4S The New iPad

640x960 px(Previously 320x480)

1536x2048 px(Previously 768x1024)

Mac

2880x1800 px(Previously 1440x900)

Macbook Pro

SO IT MAKES STUFF LOOK MAGICALLY 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)600x600

image.png (Reduced)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)

Before (300x300) After (600x600)

SWEET! LET’S SUMMARIZE

IN SUMMARY

• Enhances Quality for Users

• Easy to Implement (minimal code)

• Try Limiting to High Traffic Areas

• Can be Labor Intensive

• Increases Bandwidth Usage

• Impact on Future of Web?

RETINA DISPLAY TEXTURESTap Into Better Clarity For Your Mobile Projects

Mark RigganTwitter (@asuwebdesign)

Dribbble (markr)