Web designers have always had a moving target in their sights when trying to decide the best page size for a web site. Generally speaking big pictures look better and there has always been a trade off between image resolution and download overhead.
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 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 best resolution for images is still a hotly debated topic among web designers.
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 most common monitor resolution at the time of writing is 1366 x 768 pixels which accounts for about 30% of internet users. And my guess is that most people with bigger monitors won’t maximise their browser windows to full screen.
With this in mind I tend to limit the maximum resolution of images to 1600 pixels wide.
Of course this may change. Most new Apple devices have ‘Retina’ screens which have a higher pixel density of between 200 and 400 ppi, as opposed to the 72-96 ppi that is typical for conventional monitors. Other manufacturers are starting to follow suit. So effectively these newer devices have double the screen resolution and browsers compensate for this by scaling graphics up to twice the size.
There are techniques for swapping out standard resolution images for higher resolution versions where appropriate, and I do this to a degree with graphics that are controlled in CSS, but for inline images I don’t currently bother.
To do so would have a huge impact on the download overhead for the page. While a 1600 x 1200 pixel image might weigh in at somewhere between 100-200kb, doubling the resolution to 3200 x 2400 requires four times as many pixels, and will therefore be significantly larger in terms of file size. This soon adds up when you have several full width images in a page (which is very much the trend at the moment with parallax scrolling websites).
Ain’t nobody go time for that.