When building a web page, I've always created 2 different sprites for my icons. A sprite for normal images and a sprite for retina images. The retina images are saved out twice the size and twice the DPI.
Normal icon - 50x50 at 72 dpi Retina icon - 100x100 at 144 dpi
Using a retina display media query in my CSS, I would target the icon and replace the background image with a retina one and also apply the appropriate background sizing property. (e.g. if the image is 100x100, background-size: 50px 50px).
Instead of having 2 separate image sprites, I decided to combine my images into 1 sprite. Using 72 DPI, I have a normal icon and beneath it I have an icon that is twice the size (for retina). This seems to work just fine on a web page.
Aside from performance in downloading a larger image file, is there any reason why I should have separate images for retina and non-retina? Does DPI actually matter when saving out for retina or does it just need to be twice the size?