Thu, July 5 2012 • html

Retina display graphics problem, all your JPGs now officially suck

Tags: SVG, Retina Display, html

As a publisher I’m stuck between the need to give people Retina quality graphics (and thus a better reading experience), and the need to keep the site as fast as possible - especially on smartphones and tablets.

Thomas Baekdal Retina Displays are Tricky For Publishers

Wikipedia

SVG logo

This kind of ties back to the ongoing discussion for responsive graphics. How do we address low bandwidth devices? How do we “future proof” the graphics we’re currently using?

Somewhere, part of the answer lies within the architecture we use to create content. Obviously, shoving everything into a WordPress textarea isn’t going to work. In order to manage graphics, you need to plan for mobile graphics, thumbnails, desktop, windscreens, etc., and hopefully appropriate tagging and meta data for them as well.

SVG is another answer. Frustratingly, as an already established technology, adaptation and support for it is really poor. Support scripts like Raphaƫl and mobile support with WebKit brought much needed life to the format. However, without better tools for authoring, we still have a way s to go before it starts to compete with JPG and PNG.

Pictos lets users choose their own icons as one encoded webfont.

Also, take a look at web fonts. They are retina display-ready out of the gate. And with the usage of icon and sprite replacement with fonts like Pictos and Iconic, all your dingbat icons now scale beautifully. Not that those are the only options. Some designers may want their own font options.