Retina website optimization tools

Recently, there are more and more devices with screens whose pixel density is very high: Apple has released a MacBook with Retina, Google announced Nexus 10 with a resolution of 2560x1600 pixels. Together with modern technologies come new problems for website developers. For example, on new screens, raster images do not look very good, they need to be optimized for Retina. This compilation presents some tools to help with this.

Picturefill ( demo ) by Scott Jehl

Makes images responsive and independent of screen resolution.


')

JPEGmini by Andy Clarke

On the fly optimizes graphics, reducing weight several times. PNGmini - analogue for .png-format.

Modernizr

It does not need to be presented - a tool that can determine the capabilities of the user's browser, which helps the developer achieve cross-browser compatibility.

Sketch

An OS X application that helps you quickly prepare images for Retina screens.

Slicy

Another application for OS X, can cut a .psd-template with the requirements of Retina-screens.

TypeButter by David Hudson

A jQuery plugin that optimizes font kerning, which makes text look more readable.

X-Icon Editor

Web application to create a high resolution favicon.



From the article netmagazine.com