blog

Retina graphics for your website

by Richard Han
28 Jan 2015
2 min read
Share this article:
Retina graphics for your website

In the short time since Apple first introduced ‘Retina’ display to the world with the iPhone 4, similar technology has been featured as standard in subsequent Apple products and in the tablet and mobile device offerings of its many competitors.

Current market trends indicate high resolution displays aren’t going anywhere, but rather will continue to improve with later models.

The post-Retina world demands images with sharper pixels and less blur. The good news, several options are available to optimise website graphics for high resolution displays.
 

Retina <img>

Image path is set in html which cannot be set by media query, there are several methods to serve high resolution assets to Retina devices.
 

1. Serving @2x image to both non-Retina and Retina devices
 

Pros
  • Easy to use
Cons
  • Not optimized
  • Consumes more bandwidth
  • <img> tag mush have a width or height specified

2. JavaScript - Retina.js
 

Pros:
  • Easy to use
  • Serves normal image to non-retina devices and high-resolution image to retina devices
Cons:
  • Longer loading time
  • May cause a 404 Error if there is no @2x image

3. Server-side way
 

Pros:
  • Only one image downloaded.
  • All type images can be served.
Cons:
  • This relies on JavaScript, enable cookies, PHP and .htaccess file.
  • Not easy to implement.
  • Width or height attribute needs to be set specified.

     

Retina background image

The background images can be served based on the device screen density, so, the CSS media query can detect Retina screen and update the original background-image path to @2x image for a Retina screen. In the meanwhile, it will update background size property.

 

Scalable Vector Graphics
 

Pros:
  • A SVG sprite contains all your graphics to reduce the amount of http requests, ideal for icons, logos and graphs.
Cons:
  • Not supported by IE8 below, however, it can be investigated by raphaeljs and svg2vml
     

Retina-ready favicons

Icon could be a small part of a website, however, a high resolution favicon could make your site sharper in Retina environment, therefore, you can upload 64 x 64 size image, and export to (64, 32, 24, 16 pixels) icons.

Reference:

Share this article: