How to optimize my pictograms for Retina screens?

Question

Surprise when I saved my pictograms for the Web (from Illustrator):
They are strictly not as clean as expected => totally blurred.

Here's an example from my Retina smartphone:

And the initial .ai file:

The difference is obvious...

Reading over the web, I read that Retina screens expect each element to be built at a specific resolution.

Assuming that my elements are made using vectors (thanks to Illustrator), what would be an efficient way to fit my Retina display? For instance, an iPhone 6.

I read so many distinct solutions from the web that I don't know what are the most usual steps that graphic design experts deal with.

Answer 1

I turn my vector images and logos in to a font (or fonts). Take your .ai files (after you clean them up, compound path, and crop the viewbox) and export as .svg. Then use the icomoon app to convert to a font. This will display at any size, any resolution crisply.

https://icomoon.io/app/#/select

Learn more: http://www.carbonsilk.com/development/convert-images-to-web-font-icons/

Answer 2

You need to export your graphics at double resolution, say if for a standard screen you need an image at 64x64 resolution, you need a 128x128 copy of it (or even not a copy) that will be later processed on retina/high-dpi screens. But different environments may process them in different way, e.g. in HTML/CSS you need additional media queries for every kind of screen to be shown properly on each screen.

With vectors it's quite simple to export assets at double resolution, raster sometimes requires complete redraw if you originally created a low-res image.

Also if the only one case of usage is web, you may look at what SVG may offer.