My Z News

A new generation of Retina displays with high pixel densities is now on the market. Unfortunately, that means your website imagery could instantly become ugly and pixelated if you don’t take action.

With the introduction of the iPhone 4 in 2010, Apple no longer measured its screens in pixels, but in points. The scaling factor of the screen changed, which determines how a point relates to a pixel. A Retina display now has a scale of two, so one point is equal to two pixels — if you draw a one-point line, it shows as two pixels wide. If you’re imagery isn’t optimized to account for this, your product won’t make a great first impression.

Most standard desktop displays fall between 96 to 100DPI, with web-ready graphics normally at 72DPI. However, Retina displays have a much higher DPI (generally acknowledged at 200 pixels per inch, or greater), so the images will look blurry if you don’t make adjustments. It’s therefore essential to ensure your website images are optimized to scale up properly.

We’ll cover four approaches to convert your site to Retina, while ensuring its imagery looks great on all devices.

If you have found alternative solutions to serving Retina images, please share your recommendations with readers in the comments below.

1. CSS Sprites

One method to serve responsive Retina images is to use CSS Sprites. To cater for high-resolution displays, you need two images: a normal resolution (@1x) and a high-resolution image (@2x); this means doubling the number of files, selectors and references in your CSS.

However, if you use a CSS Sprite, “you only need to override the link to the @1x sprite file for all the selectors that include high-resolution assets,” says Maykel Loomans, user interface designer at Instagram. This technique reduces network requests and stylesheet file size, an efficient process for creating Retina assets.

The CSS Sprite solution, though, is only for assets referenced in your CSS. For the images on your page, Imulus has developed Retina.js, a very useful plugin that checks your server to see if you have any image source with @2x at the end. For example, if you have an image on your page that looks like this: img src=”/images/my_image.png, the script will check your server to see if an alternative image exists at this path: /images/my_image@2x.png. It then automatically replaces images on your page with high-resolution variants. To use it, just place the Retina.js file on your server and include the script on your page at the bottom of your template, before the closing </body> tag.

While it is often more time-consuming to produce multiple graphics, the end result produces an optimal file size and is a “future-friendly” approach to development.

2. Retina Images

Retina Images is a server-side solution, which serves high-resolution images automatically without double loading resources. It relies on PHP, a modified .htaccess file, enabled cookies and JavaScript. Once set up on your website, all you have to do is create a high-res version of each image you would like optimized for Retina, and the rest is done for you. If you have the height and width attributes specified, you don’t even need to change the <img> tags. If a @2x image isn’t available, or if JavaScript, CSS or cookies are disabled, it falls back to the regular image.

The main benefit of this approach is the view only downloads one image, and all standard raster images (.jpg, .png, .gif & .bmp) can be served high-res. If you’re using WordPress, there is a plugin available to make the installation even easier.

3. Scalable Vector Graphics

Another approach is to use SVGs, which as the name suggests, are scalable. Even though they’ve been around for years, SVGs are often overlooked. But bypassing this format is a real oversight — utilizing them to ensure Retina compatibility makes perfect sense. No matter what size they are scaled up to, because they are vector (using lines and shapes, instead of pixels), the image will always look sharp. Because of their infinite scaling abilities and resolution independence, they’re actually considered “future-proof.”

SVG isn’t appropriate for all image types (it isn’t practical for photographs), but it’s ideal for icons, patterns, logos, graphs, maps, navigation and repeating backgrounds. There are several ways to use SVG, as an <embed>, <object>, <iframe>, and using the <img> tag. One particular method is to use “inline” SVG (an emerging HTML5 standard), which gives you even greater control over their appearance (as they are subject to CSS selectors), allowing you to control individual elements using special SVG CSS. To do this simply grab the XML code from the SVG and insert it into your HTML document; this will also cut down on additional HTTP requests.

This particular SVG approach does have its drawbacks, though, one of which is bloat. To combat this, use an SVG Optimizer or a Nodejs-based SVG tool.

When using SVGs, browser support awareness is essential. Using a tool like Modernizr means you can test for feature detection and then provide a fallback option, such as PNG. This will swap all “.svg” on the page with “.png,” for older browsers such as IE8 and below. You can take the SVG approach even further and create an SVG sprite, which contains all your graphics and helps to reduce the number of HTTP requests.

SVG isn’t necessarily the best solution for all situations; however, their small footprint and resolution independence mean they’re viable contenders when adapting your site for Retina displays.

4. Icon Fonts

One further approach is to use Icon Fonts, which are easily scaled, edited and maintained. Instead of using image files for your icons, create a font file out of vector icons (or use one of those readily available).

An Icon Font will be a much smaller file size than an image. Plus, the icon renders instantly once the font has been loaded, with no need to wait on an image to download. There is also only one HTTP request for any size set of icons, meaning less bandwidth usage. Once embedded using “@font-face” in your CSS, they will scale to any size and still remain crisp and clear, and can be styled and animated using CSS. You can also apply text effects, such as drop shadows, rollover states and colors. Browser support is excellent; Icon Fonts are supported on all modern browsers and even legacy browsers, such as IE6.

To create an Icon Font you will need a dedicated font-creation app like Glyphs, or an online service like Shifticons. Once your custom font has been created, export it as an SVG and reference it in your CSS, create your markup and then create the properties for your icons (such as color, size and padding).

If you don’t want to create your own Icon Font, there are tons of fonts available to use, including the popular Font Awesome, Fontello, Entypo and Pictos Server. There are even free, open source services that allow you to host your icon fonts.

There are many use cases for Icon Fonts, and with very few downsides, they are worth exploring as a viable Retina solution for certain images.

The future is mobile, as more and more users reach for their smartphones or tablet devices first when browsing the web. It makes sense to take some simple steps to make your site more usable and visually appealing, by ensuring it’s ready for today’s high-resolution screens. You could even use a combination of these approaches to craft a solution that works for your site.

Image via iStockphoto, Greyfebruary

Read more: http://mashable.com/2013/05/22/convert-to-retina/