iMac with imageHow do you best display images on your web sites?

The original 1984 Macintosh established the ‘standard’ of 72 pixels per inch (PPI) with it’s built-in 7″ 512×342 pixels display.

That was over 30 years ago.

The smallest screen in the current Apple lineup is the 12″ MacBook’s 2304 x 1440 pixels Retina display, at 226 pixels per inch.

Apple uses ‘pixel doubling’ technologies (4 pixels for every regular 1 pixel) to makes screen images look outstandingly sharp.

To ensure your web images look sharp on Retina screens you need to upload them at twice the pixel dimensions at which they will be displayed, then scale them back to half that size for display on your web page. 

Here are some image examples…

(Of course, with old monitors – or old eyes – the images below might all look the same!)

All the Santa images below are displayed at a width of 150 pixels
Santa 75 Wide Santa 150 wide Santa 300 wide jpg
75 pixels wide (JPG – 4kb)
Scaled up to 150 pixels wide
150 pixels wide (JPG – 12kb)
300 pixels wide (JPG – 44kb)
Scaled down to 150 pixels wide

Santa 300 wide jpg Santa 600 Pixels wide
300 pixels wide (JPG – 44k)
600 pixels wide (PNG – 800k)
Scaled down to 300 pixels wide

Here is a photo example displaying at 800 pixels wide….

Graduation - 400 pixelsGraduation photo – original 400 pixels wide (JPG – 40Kb)
Scaled up to 800 pixels wide

Graduation 800 wideGraduation photo – original 800 pixels wide (JPG – 120k)

Graduation - 1600 wideGraduation photo – original 1600 pixels wide (JPG – 400k)
Scaled down to 800 pixels wide

 More reading and info…..



wazmacScaling images for web pages