On "Hi DPI" displays like the MBP Retina and iPad 3 there are effectively two coordinate systems: the "logical space" or "user space" which is what we normally think of as the number of pixels in the user interface, and the "device space" which is the actual number of pixels on the physical screen. On the MBP Retina the standard setup is 1440 x 900 pixels in "user space" and 2880 x 1800 pixels in "device space". So, for every pixel in user space there are 4 pixels in device space.
To optimize images for Retina display, you should double the width and height of the web image (for device space), but in the web page markup specify the user-space dimensions for the image.
This is easier to understand with an example. Suppose you normally display web image using 800 pixels on the long edge. For Retina, you supply an image at twice the width and height, so instead of a 800 x 600 image you would provide a 1600 x 1200 image. But in the web page you would display it as 800 x 600, e.g., using markup like
width="800px"
height="600px"
(The disadvantage of this setup is that you would be consuming more bandwidth since you're delivering a higher-res image even on standard (non-Hi DPI) displays. This can be overcome using smarter logic that sends a standard-res image to standard displays and the high-res image only to Hi DPI displays, but that's beyond the scope ...)