Retina Images

Transcript

1. GETTING STARTED WITH RETINA IMAGES
2. WHY DOES THIS MATTER? Non-Retina Retina
3. ONLY IPHONE & IPAD THOUGH, RIGHT? ! • Samsung Galaxy S 3/4 • Samsung Galaxy Note 1/2/3 • Nexus 10 • Sony Xperia • HTC One • LG Nexus 5 • BlackBerry Z10 • LG Optimus LTE • Nokia E6 • over 40 other devices and counting…
4. HOW DO YOU PRODUCE RETINA IMAGES? • Smart Objects in Photoshop + Retinize It Action • Single color graphics in Illustrator + icon fonts • In the future: SVG via Illustrator
5. WON’T THIS MAKE OUR SITES SLOWER? • Yes, but if we stick to things like logos and icons, the performance hit isn’t
 too bad. • If we use solid colors, we can use an icon font, which only requires 1 request from the server.
6. THAT’S COOL…BUT MORE WORK, REALLY? Yep…there’s no getting around it (except for SVG in a couple years). It’s not outrageous to believe in a few years instead of 2x images, we may be outputting 4x images…seriously.
7. LINKS • Icon Fonts in Action:
 http://www.la2050.org/indicators/arts- cultural-vitality/ • IcoMoon:
 http://icomoon.io/ • Retinize It:
 http://retinize.it/ • Device Pixel Density List:
 http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density • Slides:
 https://speakerdeck.com/graphfx21/ retina-images