What size should your online images be?

Big is beautiful. Especially when it comes to image sizes. This used to apply more for design-for-print but, with improved monitor resolutions for PCs, an increasing number of devices that use retina display and improved broadband speeds, this is now equally true for digital use.

In previous articles I spoke about the importance of using images on your website and for social media activity and have given some ideas on making your image interesting. In this article I’m giving you tips on the importance of image size – and why it matters.

What size should my image be?

There are two measurements that tell you about an image’s size. One is the pixel dimension (px), the other the image resolution, which is defined as ‘dots per inch’ (dpi). Here it is useful to know that 72dpi is the default resolution for digital use while for print you need 300dpi.

Ideally your original image will have a large pixel size and at least 72dpi, if not bigger.

To find out the size of your image, just right-click it and go to ‘properties’, then go to ‘details’, as shown in this image here. In this example the image is 96dpi and a dimension of 1600x 600 – which is a very good file size.

What if my image is too small?

If the image you want to use is small and less than 72dpi – if you use it at its current size, or even make it smaller, that is fine. But if you want to display it at a larger size, don’t use it.

If you take an image that is too small and enlarge it, the image quality will be affected (pixelation) and it will start to look fuzzy. The more you enlarge the image the fuzzier it will get. And, unless you are happy to use a low-quality image, there is no quick fix to get around it.

Can my image be too big?

In an ideal world, if you want to use an image, start off with as big an image as possible. This applies for use online as well as for print. If you have a high-quality image you can always reduce the file size and dimensions – but you can never enlarge an image without losing quality.

Here are some key points to remember:

  • Image dimensions. If you want to use a smaller image online – one with small dimensions – this is fine if you keep the image the same size, or make it smaller. But if you want to display it at a larger size, don’t use it.
  • Backups. If you are reducing an image dimensions or resolution, so it will load quicker on websites or for social media sharing, always keep a master copy backed up so you can use it some other time in the future.
  • Download speed. So I said that big is beautiful, however… when posting images on your website, you should check that your image has been saved for web use, as this will optimise the files size – which in turn affects the image load time. This does matter, in particularly if your site gets viewed on a mobile device and pages load too slowly. (But always work from a copied file, not your backed up master file).
  • Save for web. As mentioned above, if you want to make sure your image is web optimised, use a photo editing application like Photoshop. And instead of simply clicking ‘save image’ it is best to select ‘save image for web’.
  • Scalability. No matter what size you use an image, something worth keeping in mind that any image may appear at many different sizes online. Will you image still look good when it is reduced for viewing on a mobile device, or when it appears on a social media share where it gets displayed as a thumbnail (very small) image? Clear, bold and simple images do better, and so are more scalable.

To sum up: no matter what you want to do with your image, starting with a large image is best practice. You can always reduce a file size, but never increase it.

So just remember: big really is beautiful.

get in touch!

Alberon is at the forefront of digital thinking. Get in touch for a no-obligation consultation meeting using the contact form, by email hello@alberon.co.uk or calling 01865 794009.

leave a comment

Your email address will not be published. Required fields are marked *.

Planning your SEO campaign Advantages of Google Fonts