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.
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
- Not optimized
- Consumes more bandwidth
- <img> tag mush have a width or height specified
- Easy to use
- Serves normal image to non-retina devices and high-resolution image to retina devices
- Longer loading time
- May cause a 404 Error if there is no @2x image
3. Server-side way
- Only one image downloaded.
- All type images can be served.
- 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
- A SVG sprite contains all your graphics to reduce the amount of http requests, ideal for icons, logos and graphs.
- Not supported by IE8 below, however, it can be investigated by raphaeljs and svg2vml
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.