Oh no – more things to consider when building a website !
I’ve noticed fuzzy-looking images on websites lately since replacing my 2011 iMac with a 2018 model.
Now I’ve known what a retina display is for a while, and my wife’s had an iMac with a retina screen for 3 years, but the difference has become very apparent now that I have my own.
LOTS of website images now look fuzzy.
Retina displays are where the pixels are doubled horizontally and vertically. Apple introduced them in late 2011 and now nearly all Apple displays are retina or better and PCs are following suit. So web developers will have to add making websites retina-friendly to their already long list of things to handle.
Rules of thumb for your website
- Look at your website on a computer with a retina display !
- If an image looks fuzzy then double its dimensions and replace the smaller one with the larger version. Use HTML or CSS ( the layout code ) to reduce them to original size on the website ( this compresses the pixels down into the smaller area, making them denser ).
- Gallery images are often set to open larger when clicked. So make sure they have double the number of pixels horizontally as the website’s pixel-width, in case they stretch right across when opened ( remember they’ll be compressed for retina ).
- Use an image editor that allows you to play with image quality. You don’t want to be waiting an hour for an image to upload, or to have viewers killing time while your website downloads. If an image is getting into the high hundreds of kilobytes it’s probably too large.
Not all images look fuzzy. Objects in photos of natural things usually transition softly into backgrounds and don’t generally have hard lines. But cartoon-style and flat images with edges are no longer crisp with retina.