I think the answer is SVG for anything we've got vectorized, and I've started delving more deeply into the format, which turns out to be pretty awesome.
First, to create them, I draw icons with vectors at the actual size the final icon will be rendered on regular non-retina displays, then export as SVG with Illustrator. But what I really want are the paths; fill and stroke colors and shading effects can be added manually.
Then, I open the SVG output in a text editor, and since it's all XHTML formatted, I can easily modify everything to get the look I want. I can re-organize the path and fill elements, change their fill colors, and add things like shadows right in the SVG file as filter elements, in case your editor makes sub-optimal choices as to how to encode your design.
These icons look perfect when rendered on both normal screens at 1x and retina displays at 2x resolution. If I needed an in-between size, I'd have to design a new vector for the new target size. One vector design will typically not work well for different rendered sizes at this small scale, as every pixel counts, and anti-aliasing does more harm than good. That problem is just unavoidable, even when you try to make a flattened PNG at all these in-between sizes.
I've also found SVG ideal for small bits of text with special non-web-safe fonts. Converting text to paths and exporting to SVG is the way to go over gif or png text, and looks great on retina displays.
I'm curious if there are any standards for "patching" vector graphics. So you could download the base SVG and a separate vector and/or bitmap-based patch to produce something appropriate for the resolution. (As well as being appropriate for the bandwidth constraints etc.)
The patch could be downloaded simultaneously or progressively, i.e. after the base image has been rendered.
I've always wondered if adding something like "font hinting" would cover most use cases. Although I suppose for e.g. icons sometimes at the smaller sizes the actual graphic is pretty much a completely different image, rather than just a hand-tweaked rasterization.
[+] [-] WiseWeasel|14 years ago|reply
First, to create them, I draw icons with vectors at the actual size the final icon will be rendered on regular non-retina displays, then export as SVG with Illustrator. But what I really want are the paths; fill and stroke colors and shading effects can be added manually.
Then, I open the SVG output in a text editor, and since it's all XHTML formatted, I can easily modify everything to get the look I want. I can re-organize the path and fill elements, change their fill colors, and add things like shadows right in the SVG file as filter elements, in case your editor makes sub-optimal choices as to how to encode your design.
These icons look perfect when rendered on both normal screens at 1x and retina displays at 2x resolution. If I needed an in-between size, I'd have to design a new vector for the new target size. One vector design will typically not work well for different rendered sizes at this small scale, as every pixel counts, and anti-aliasing does more harm than good. That problem is just unavoidable, even when you try to make a flattened PNG at all these in-between sizes.
I've also found SVG ideal for small bits of text with special non-web-safe fonts. Converting text to paths and exporting to SVG is the way to go over gif or png text, and looks great on retina displays.
[+] [-] luminarious|14 years ago|reply
[+] [-] mmahemoff|14 years ago|reply
The patch could be downloaded simultaneously or progressively, i.e. after the base image has been rendered.
[+] [-] natevw|14 years ago|reply
[+] [-] alexchamberlain|14 years ago|reply
[+] [-] ars|14 years ago|reply
Some of the options: https://etherpad.mozilla.org/responsive-assets
[+] [-] ricardobeat|14 years ago|reply
[+] [-] LachlanArthur|14 years ago|reply
[+] [-] alsomike|14 years ago|reply
[deleted]