<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Anti-Retina Graphics

Software Development, User Experience, Software Solutions

With Apple’s introduction of Retina Displays (for the purpose of having enough of a concentration of pixels where, typically, no one can see pixilation occurring), more companies have been creating displays with significantly more than 72ppi. Because of this, websites that have graphics built at the standard 72ppi are beginning to look rather off.
The reason that standard graphics look off on standard displays is that the pixels in the images are interpolated, meaning more pixels are added in order to compensate for more ppi.
There is a standard way to resolve this and that’s to add retina-sized images (which is usually accomplished with an image that is twice as big and setting it to 50% of the size in image tags.) Then to keep from punishing non-retina displays with image load time, JS logic and/or media queries are also added.
If a graphic generally has straight lines (more-so vertical and horizontal lines, like a QR code), one solution is to keep it small and make sure the pixels are all in alignment. For QR codes, make each square a pixel, and then size it accordingly in the image tag.
I don’t see many practical uses for that outside the QR code. But there is a solution that is better than either of these:
Create your own SVG web font
You may be thinking, “Wuuut? OMG LOL.” But it’s a perfect solution that’s not really talked about, probably because the cost of font creation software is ridiculous. The justification is now here with IcoMoon.
Check it out:
{ } d 5 4 8 2 9 1 X » > < ^ v g f w r l m b k B t h p T L J ° [ ] ( ) D | - / * C F W 0 E R M A P i s o ! " «
user experienceIcoMoon allows you to build your own font using SVG graphic you create in Illustrator. Simply put, you can:

  • import vector icons that you create
  • minimally edit each icon
  • map them to thousands of characters
  • export as a web font package
  • then style as you would any text on your site (including CSS3 styles)

The benefits to using a font for your images (besides being crisp on Retina displays) are:

  • One HTTP request, meaning (as long as you don’t get too overboard) pages load faster because it’s not loading each image separately.
  • Easier to manage than sprites
  • Scalable to any size (using CSS font-size)
  • Colors and other styles (including hover alterations) can be added with just CSS
  • You can recreate a version of your logo that's text
  • Text is better for SEO than images
  • Make 'em any size you want
  • If ppi ever becomes even bigger than Retina, you got it covered

IcoMoon even creates a logical way to display your icons by creating CSS (along with the font and sample HTML files) that you can easily toss into your site.
Oh, and it’s free. That makes me feel the happiness.
Sources:
http://www.newfangled.com/optimize_your_site_for_retina_displays
http://icomoon.io/

TAGS: Software Development, User Experience, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts