How 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 | ||
 |
 |
 |
| 75 pixels wide (JPG – 4kb) Scaled up to 150 pixels wide |
150 pixels wide (JPG – 12kb) Unscaled |
300 pixels wide (JPG – 44kb) Scaled down to 150 pixels wide |
|
 |
| 300 pixels wide (JPG – 44k) Unscaled |
600 pixels wide (PNG – 800k) Scaled down to 300 pixels wide |
Here is a photo example displaying at 800 pixels wide….
Graduation photo – original 400 pixels wide (JPG – 40Kb)
Scaled up to 800 pixels wide
Graduation photo – original 800 pixels wide (JPG – 120k)
Unscaled
Graduation photo – original 1600 pixels wide (JPG – 400k)
Scaled down to 800 pixels wide
More reading and info…..