Preparing images for your website

In a pre-digital age that is even now had to imagine or recall, photos were physical artefacts. We took them on film, had them developed and lovingly placed them into albums. Fast-forward to 2018 and photos are more likely to live on your hard-drive… but that doesn’t make them any less significant, or important. Just the same care is needed when taking your photos, and indeed perhaps even more care is needed when preparing them to be displayed on a website. Photos need to be cropped, resized and saved in the right format. In fact, when it comes to website images, less is more, so to speak. The smaller the file size (whilst maintaining definition), the better, as this will keep your site quick to load which will in turn please Google. And who doesn’t want do that?

This guide will help you make sure you get all of these aspects right. We’ll deal with the initial taking of the shot first, and then move on to preparing that photo for a website.

Taking the shot

So when you’re actually taking the shot, bear in mind the size of the image. This doesn’t refer to the actual size of the image, necessarily, but the ‘file size’. If the ultimate destination is a website, this might be less crucial than, for instance, use in a printed magazine, but nevertheless, your camera should have a setting to adjust the resolution. As a rule of thumb, 300dpi (dots per inch ) is usually fine, as you can always reduce the file size at a later date.  (There is a bit more info on dpi considerations here.) However conversely, when you try to expand an image that is too small, you may find that it pixelates, or blurs. Also consider the proportion of your image ahead of its final use – what might be better, portrait or landscape? Finally, consider the composition itself – what is it that you are photographing, and what needs – or indeed doesn’t need – to be in the shot? If it is of a person, try to get close in, without them looking directly down the camera. And beware of overly cluttering your image.

Where on the web page will it live?

Moving on to preparing your image for a website, before you really get going stand back and think about the context – where will your image sit on the page, and what will be around it? Think about the balance between image and text and, indeed, whether will you overlay text onto the image itself. That will affect how the visitor to the website will process what they see on the webpage.

Keep the file sizes down

Next, begin to think about how you will optimise the image. Here, there are three things to consider. In terms of the file itself, think about both the file type and file size. As indicated above, while you might start out with a large file, when it is eventually prepared for use you will need to reduce the size so that they load quickly onto the page. These days no-one is willing to wait for images to load and Google will penalise it (check your current site isn’t slowed down by images) – 72dpi is industry standard for digital use. Equally think about web-friendly file types to store your image – possibly a .png or .gif but in most cases a .jpeg.

Moving on, you will also need to think of the dimensions of your image. If you have started this process with a decent sized image, you can now perhaps focus on the most important part of the photo and ‘crop’ the image to change the composition. You can do this to remove unimportant parts of the photo or to focus on the most crucial aspect. Finally, you will also have dimension in mind, thinking of the ultimate physical space the image will take on the website, in terms of height and width, although this can often be easily adjusted.

So, before you even take the shot, and then in this post-production phase, consider all of these important strands to taking, and uploading, the perfect image.

We will partner you all the way through the process to ensure the perfect solution every time.

Let's start a project
Creation