Are you missing the big picture?
Web designers have always had a moving target in their sights when making decisions about the best image sizes for a web site. Generally speaking big pictures look better—but there has always been a trade off between image resolution and download overhead. Larger file sizes will have a negative impact on the loading speed of your website—which in turn can affect your search engine rankings and conversion rates.
When I first started building websites back in the late ’90s it felt pretty daring to design for an 800 pixel wide monitor. Not only did this break your website for all those people still using monitors with a 640 x 480 pixel resolution, but the resulting file sizes would quickly clog up your 33.6kbs modem. Countless hours have been wasted waiting for images to render line by line as they were squeezed down a creaky dial-up connection.
Nowadays responsive design and broadband connections are commonplace but the concerns over image resolution remain pretty much the same. Monitors are larger and download speeds are faster, but the best resolution for images is still a hotly debated topic among web designers.
The best image resolution
For optimum image quality we need the pixel density of the image to be equal to, or greater than, the pixel density of the monitor.
The three most common monitor resolutions at the time of writing are 1920 × 1080 pixels, 1366 × 768 pixels and the relatively tiny 360 × 640 pixes—each of which accounts for a little under 10% of internet users. My guess is that most people with bigger monitors won’t maximise their browser windows to full screen. And most WordPress themes limit the width of the main content to around 1200 pixels—anything wider than this and the line lengths in galleys of text become unwieldy and can compromise legibility of your text.
On the other hand modern screens (such as those in devices with Apple’s ‘Retina’ technology) offer a higher pixel density of between 200 and 400 pixels per inch (ppi), as opposed to the 72-96 ppi that is typical for conventional monitors. So effectively these newer devices have double the resolution of older screens with similar dimensions—and browsers compensate for this by scaling graphics up to twice the size.
Hot swapping images
There are techniques for swapping out standard resolution images for higher resolution versions where it is appropriate—and modern browsers support the use of multiple image sources at different sizes, just loading the version that is appropriate for the user’s screen resolution. This is all more work for the developer of course and fortunately modern web frameworks and systems like WordPress can implement this for you.
With this in mind I tend to limit the maximum resolution of images to 1800 pixels wide. I will either manually deploy a number of alternatively sized images or I rely on the native support of WordPress which will automatically resize images as they are uploaded based on the settings defined in the WordPress Admin.
Choosing an ‘oversize’ resolution of 1800 pixels may seem unnecessary if your website or WordPress is set up for smaller sizes. But having the larger size saved as a fallback on your server makes it much easier to regenerate your images at a new sizes should your requirements change further down the line—in the event of say, a website redesign, or a significant shift in monitor trends.
If you have any questions about the the best practices you should be following on your website then don’t hesitate to get in touch—or just leave a comment below and let me know what you think.
