It was a tease, I'm happy you ask the question.
When I said "UI designers never...", they actually DO, but they really should not. I'm talking about UI elements here, so buttons, icons, important recurrent peices of UI. A lot of designers will design for @2 or @3x and then downscale automatically for @1x. And they end up with graphics that aren't pixel perfect. Pixel perfection has many aspects, the most important one is elements have to fit in the pixel grid, edges and lines can't be in the middle of a pixel line or they'll be blurred. So it's easy to realize that any odd value can't automatically be resized. Also, a 1 pixel line highlight at 1x can totally be transferred to... a 1 pixel line of highlight at 2x, it's not a technical thing, it's an artistic appreciation thing. The best wrokflow to follow here is to design things at @1x, always, then proceed to make at least the @2x manually, and the @3x.
What designrs do is they'll use resources like App Icon Template and generate tons of icons with one high res source. Like this:
When they should produce them for every resolution, manually (here in Photoshop)
Another example, hot linked from Bjango (see at the end of this answer for details):
A detail, produced automatically:
Detail, the shape doesn't fit in the grid:
And the same but drawn for pixel perfection:
Comparison at 1:1
This example is subtle I reckon, but UI deserve this treatment.
- Create a page that you name Dashboard or Master.
- Add a div give it a unique class, add your @2x image as a bg
Keep the Dashboard page, so when you clean unused styles, your special style isn't nuked. Also for reference.
Now your image is being uploaded, published. Mobile hdpi devices will start looking for the email@example.com version of your image.png version.
It should work, I haven't tested it, I'm more into SVG right now, but I'm kind of disappointed with the rendering so I'm going to be back to pixels soon. I think I'll make @2x versions of the icons I put in the toolbar menu (à-la Facebok) I now build for handsets, to ditch the hamburger thing.
I'll leave here one of the best resources around for app/UI workflow, from Marc Edwards @ Bjango:
Also all the articles here are worth reading: