Amping Up Your Website for Next Generation Retina Displays

Retina displays—which use high-pixel densities and, in the case of Apple, “points”—are not only here to stay, but are getting better with each passing year. But with the new tech comes inevitable problems: website imagery can become sub-standard and pixelated if website designers don’t upgrade and adapt.

So how do you convert your site to accommodate Retina displays? Here are some relatively quick and easy solutions.

CSS Sprites
Taking two images—one in normal resolution and one in high-resolution—CSS Sprites reduces network requests and stylesheet file size, but only works for assets referenced in CSS. For page images use Retina.js, a plugin that communicates with your server and automatically selects and replaces a high-resolution image to display.

Retina Images
A server-side solution, once set up on your website Retina Images does all the work for you, instantly choosing high-res versions of all images you’ve created. This approach is especially convenient for sites hosted on WordPress, which features a plugin for easy installation.

Scalable Vector Graphics
No matter what size an image is they are scaled up because they are “vector”—using lines and shapes instead of pixels. This approach is ideal for icons, patterns, logos, graphs and maps, but does require an optimizer program and a sharp awareness of browser support.

Icon Fonts
Easily scaled, edited and maintained, Icon Fonts uses vector icons from a font file instead of image files, resulting in a smaller file size and instant rendering once the font is loaded. You will need a dedicated font-creation app however, like Glyphs or Shifticons.

Share This Post

Subscribe To Our Newsletter

Get updates and learn from the best