These are my personal recommendations for making the switch to a high-DPI website.

1. Step one: stop working at 72 DPI

This one is for the designers: get into the practice of doing everything at high-DPI. If you are working in Photoshop, get to know and love shape layers and the path tool, even for the single-pixel details. Any low-res PSD is a PSD you'll have to trash and redo when it gets converted to high-DPI, so don't create any more low-DPI art in the first place.

2. Avoid generating low-res assets when possible

Creating two sets of assets is not always necessary. Distinct low- and high-DPI assets, commonly applied using an '@2x' filename suffix and the min-device-pixel-ratio CSS media query, are only necessary for elements that need precise pixel rendering, such as icons or line art with pixel boundaries that need to be precisely controlled.  (Or when designers see fit to use completely different artwork for low- and high-DPI interface elements.)

It's often sufficient to render a single 2x resolution asset inside an <img> tag with height and width constrained to exactly 1/2 the actual image dimensions, and let the browser handle the scaling on low-DPI devices.  This also works for assets used as background images, if the background-size CSS property is used to constrain the image to the containing element. You'll be relying on the browser to resample the image for low-DPI screens, and this would normally be a deal-breaker in IE9, but results are acceptable when resizing to exactly half original size.

3. Image alternatives?

I don't use vector formats like SVG or web font dingbats because these assets are more difficult to generate and less maintainable than simple PNG or JPEG assets. The tools are not quite there yet. They also yield unpredictable pixel grid alignment at small sizes, which will be ugly on low-DPI displays.

Rendering icons with CSS is a parlor trick not suitable for "real-world" sites, in my opinion.  These hacks don't achieve pixel precision and don't handle browser zoom well.

4. Prioritize your assets

Asset classes should be prioritized for conversion to high-DPI, based on their prevalence in the user interface and their robustness to scaling. From most important to least important:

1. Your logo
2. Icons, pictographs, and other symbols
3. Image-based interface elements: scrollbar caps, buttons, checkboxes, etc.
4. Small photographic elements
5. Large photographs

Some assets don't need to be converted to high DPI:

1. Smooth gradient images
2. Drop shadow images
3. Any image that remains virtually unchanged by a 2-pixel Gaussian blur

5. File size is not a concern

Image size over the wire should generally not be a concern.  By decreasing JPEG compression quality, high-DPI images can be saved at the same size on disk as low-DPI images, and won't lose detail.  Check out these informative posts for examples:

• http://blog.netvlies.nl/design-interactie/retina-revolution/

• http://alidark.com/responsive-retina-image-mobile/

Likewise, the compression scheme used in PNG images means file sizes don't scale linearly with number of pixels.