: How to optimize my pictograms for Retina screens? Surprise when I saved my pictograms for the Web (from Illustrator): They are strictly not as clean as expected => totally blurred. Here's an

@Becky351

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.
icomoon.io/app/#/select
Learn more: www.carbonsilk.com/development/convert-images-to-web-font-icons/

Vote Up Vote Down

@Angela777

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.

Vote Up Vote Down