How should I be preparing images for the web?
Each device seems to have a different resolution. I've always exported images at 72PPI. Is that even the proper number these days? Do some people use 96PPI? Which is better for non "retina" images?
Most of the tutorials I've encountered have suggested for UI graphics in the stylesheet that you take this sort of approach.
http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
Basically, make two images one exactly 2x the size of the other. Then...
background-size: 50% auto;
...on the @2x image. Note this article never specifies what PPI to export the images as.
Is it possible to export 1 image at 72PPI and one at 144PPI? Then you wouldn't need to even background-size the higher resolution one in the media query.
What should I be aiming for here? What are the defacto best practices for exporting images for the web?
Also, does anyone have a better article on the media query for higher dpi displays and handling it?
