Retina Display Textures
-
Upload
mark-riggan -
Category
Design
-
view
5.237 -
download
0
description
Transcript of 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)