Big mistake - retina?

you make the retina graphics and then make a copy in half size and use a script to figure out what the user have e.g. http://retinajs.com/

 

If your site "looks" bad, you should probably add retina capability and images to it.

Plenty of web developers using retina devices, and the world is moving toward retina due to high resolution devices such as smartphones and iPad.

You don't need another machine. Just get an external display with standard DPI, and use display spanning. Use internal display to test retina, use external display to test non-retina.

 

You don't always need a script.

For old-school 'img' tags, just prepare the images at (say) 300 x 200 pixels, then scale them down to exactly half-size: <img src="foo.png" width="150" height="100" > (you can set the height and width via CSS if you prefer to keep metrics out of your html).

Browsers on retina displays will double the dimensions you specify, so they won't actually resize the images. Most other browsers do a half-decent job of resampling the images to half size (bonus - if they zoom in they'll get the extra detail).

...if you use CSS background images, use the CSS background-size property to do the resize.

Alternatively, I haven't tried it, but a quick google reveals:

http://css-tricks.com/snippets/css/retina-display-media-query/

...which lets you (e.g.) load different background images via CSS on a retina machine. Useful if you want to support older browsers that don't have the CSS background-size.

Best practice would be to use those techniques to produce a site that works without JavaScript, then if you're not happy with the resampled images add an optional script that loads custom non-retina images.

 

You need to build your site so it can scale for all different screen sizes & pixel densities.

How?

Ditch as many images as you can. Obviously, logos, photos, etc. still need to be there. For logos and other small graphics, you can follow the suggestion of the post just above mine and just make your image twice the size, and set the size thru CSS.

For example: if your logo is 100x100, make the file 200x200, and then use CSS to set the height and width of the element. Browsers will automatically scale it down, and on high density displays, you'll still have all the detail.


For graphics that are part of layout elements.. like when you used to need little image files to do rounded corners, gradient backgrounds, etc... ditch them. You can do many of these effects with CSS3.


For icons/small graphics, many of them can also be ditched now in favor of icon fonts. Icon fonts are vector based and load/function just like regular text fonts, so you can scale them up and down with no loss in quality.

Check out Font Awesome, it's probably the most popular: http://fortawesome.github.io/Font-Awesome/


For larger images or photos, look into RetinaJS that was mentioned or AdaptiveImages.php.

 

I saw a nice test where they compressed twice the size images with a higher JPEG setting. It does have more artifacts, yet on Retina these artifacts are invisible.
It turned out that 200x200 pixel JPEG at say quality 30 was good enough, and had the same file size as the previously used 100x100 pixel JPEG at quality 60.

So you can go with just 1 image at double density for all. The width/height property will render it the correct size.

En to get your logo's right: Open the vector in Photoshop at 4x resolution with anti aliasing. Then downscale to 2x resolution with BILINEAR filtering, NOT BICUBIC! Otherwise the logo will loose sharpness and halo's will appear on contrasty edges.

 

I have a 2007 MBP at 1440x900.

The web looks fine. (??)