I wanted to know what size I should make the images on my website. I found this article by Art and Soul very helpful, here's what they said or check out their full post


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.

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).

There are JavaScript solutions for manipulating the src attribute of <img> tags so that the browser loads a version of the image that is appropriate for the screen resolution. But this all adds to the amount of work required to build your site, and not just in the additional coding but the creation of additional image assets as well. At the moment I don’t see the added value as being sufficient to justify the cost.

Ain’t nobody go time for that.

 

This article entitled "Missing the big picture – what size images should you use for your website?" was written by Duncan McMillan of Art & Soul.