How to do Stuff: Web Design

How Big Should Website Images Be?

Oh no - more things to consider when building a website ! I've noticed fuzzy-looking images on websites lately since replacing…

Read more

Building a Website ?

How do you get an idea of the look & style of website that will work best for you clients…

Read more

Website Builders & Tradeoffs

WiX, Squarespace, Weebly - drag-and-drop website building services are advertising everywhere Website builders are great If you need to set up a…

Read more

9 Steps to Balancing Web Development Costs

If you want to effectively market your business online, then you need to get things done WITHOUT wasting time and…

Read more

Why Change Your Website to "HTTPS" ?

There are now 2 very good reasons to change over from running your website with http:// at the beginning of the…

Read more

6-Step website tune-up for speed

Did you know that browsers read though your website pages top-down from the left ? (the same as you do)…

Read more

How Big Should Website Images Be?

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.