Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Retina Images

Brett Marshall
February 13, 2014

Retina Images

Brett Marshall

February 13, 2014
Tweet

Other Decks in Design

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