Working With Images: A Best Practice Guide

Your website design is a framework for showing off your organisation, but ensuring that your content and imagery works in harmony with the framework is what truly makes the difference between your site appearing sophisticated and well-considered, and it feeling amateurish and problematic for users.

So, you’ve got an image block and an image you want to add – simply upload and away we go, right? Not quite. While the websites we build may allow for some in-CMS scaling, or responsive cropping of your images, they can’t make bad images better, or stop super high-resolution images slowing down your page loading speed (page speed is a key component of both user experience and SEO). There are some important considerations to both your choice of image, and importantly how it’s added to your website.

Image Format, Compression and Sizing

Handling and optimising your images prior to upload can make the difference between a visitor staying or leaving due to poor load times or user experience. Some key considerations when adding your images to your website include:

Choose the most appropriate image format

Where possible, images should be a JPG as they offer the best compression opportunities. New technology such as WebP offers even greater compression, but require additional development to implement correctly – contact your PM/ AM for further details. Additionally, images with transparent backgrounds will likely be saved as a PNG while animations will typically be saved as GIFs.

Keep to the image ratio

As with the physical size of your image, ensure that your image ratio matches that of the block you are adding to – for example, don’t add a square image to a rectangular block as it will result in cropping of your image and an unnecessarily large image for the space.

Ensure all images are saved at 72dpi

Many print resolution images are 300dpi which, if uploaded to your website, will slow your loading speeds and increase your page size.

Compress images

Before uploading your images to the site compress them to reduce the file size even further. Online tools such as Compress JPG or PNG Gauntlet can compress images for you. 

Ensure all images are correctly sized

Tailor your images for the image block you are adding to. If you have an image block of 100 pixels in width, unless the image scales when responding to new screen sizes (e.g. gets bigger on mobile), then ensure your image isn’t 3000 pixels in width. Adding images larger than the space they are displayed in is unnecessary and will result in larger page sizes and lower page speeds. We would recommend allowing 20% extra to account for changing desktop sizes.

Add ‘Alt Tags’

All images should contain an ‘alt tag’ which is a small description of what the image is. This is good for accessibility and SEO. Alt tags should be as concise as possible, describe what is happening in the image and contain the focus keyword if it’s relevant.

Choosing Images

Your choice of image can make or break the perception of your organisation. A poorly scaled or cropped image can leave you looking amateurish, while cheesy stock choices at best leave you looking like all the rest and at worst leave you devoid of any personality.

While Spindogs can help guide your image choices through creating brand guidelines or art directing professional photography for you, the following tips will help keep your site looking it’s best at all times:

Are your images appropriate?

Make sure the images included on the website are relevant to the content and your brand.

Keep it light

Don’t overfill pages with images (unless it is a gallery page).

Avoid stock photography

Try to use your own professional photos as much as possible instead of stock imagery – it helps make you more relatable and conveys brand personality better.

Consistency of image

If you do have to use stock, ensure that the choices are consistent – lighting, angles, and composition all make a difference, and if they don’t match then your site can appear jarring.

Be aware of the fold

Keep header image height within the boundaries of the image block, so the more important content shows before the fold.

*****

Applying our top tips when it comes to working with images should really give your website a professional look and feel. For a more detailed guide on adding images, why not read our informative blog on image optimisation which is linked here.

This blog is taken from our latest white paper, Your Website Content: A Best Practice Guide.

If you'd like some help on brand guidelines or art direction from one of the Spindogs experts, get in touch below, we'd love to hear from you!

What services are you interested in?

What services are you interested in?

 

 

 

 


*

Matt Gadd
About Matt Gadd

Matt is our Head of Design and has always had an interest in design and typography, which continued after he completed a degree in Graphic Communications. He has over 10 years’ experience as a designer and has produced outstanding work for a variety of clients. 

View all blogs
More Blogs