What is the best way to maintain and handle Retina Graphics (@2x) on your website?

Hi, Zack. For logos and icons and other small images, using SVGs will keep the images sharp regardless of device pixel density. If you are unable to use SVGs or are using images for something other than menu icons or logos, then you can usually ensure sharp images and prevent pixellation by ensuring that the images are at least twice the size of the desired display size. (I.e.: If you have a 50px by 50px logo, make sure the source image is 100px by 100px and then scale it down with CSS.) This still doesn't account for devices with resolutions higher than 2x normal, but those types of screens are not yet used that widely in devices, so this is a safe practice for now.

The other method is to use a new feature called srcset for img tags. This is not yet supported that widely (but can be used with a polyfill), but it works by allowing you to state which src the browser should use depending on pixel density. You can get more information about srcset here.