Preparing images for web: The SEO way

Although you may not realise it, images play more of a part in web design, than just how the finished article looks. Of course, they have to be presented in a way which works on all screen sizes and are engaging whilst not detracting from the usability.

It should also be considered that images and largest asset of any web page, they are also the biggest factor in loading times. Failing to prepare your images correctly will impact negatively on both user experience and search engine performance.

seo images

How can a Graphic Designer help to optimise your website?

Our graphic designers have collated their top tips to offer an insight into the preparation of web images.

1. Arrange a photoshoot or source engaging stock images

Staged photos or cliché stock images with headset clad customer service agents on a white background are going to turn users away from your website straight away. It’s preferable to take dynamic photos which are unique to your business. These do require some investment in a good photographer but will make a huge difference to your website. If your budget does not allow this approach, be sure to choose stock images which showcase a more relaxed, candid approach.

2. Crop and scale the images in Photoshop or another image editing suite

Crop the images to a recognised working ratio, 4:3 or 16:9 and scale them down to suit the size the site requires. Bear in mind the largest screen size isn’t necessarily the largest they appear on screen, depending on when the site breaks mobile layout.

3. Save the files for web, with search focused file names

Once the image is the correct size you can save it. Just saving the file as a jpeg or similar will cause the file size to still be quite large, so this is where we need to save it for web. Go to File > Export > Save for web (legacy)… and select the file type you would like to use. JPEG is still best for photos with lots of colours. Image files with large blocks of solid flat colour are best as GIF files and images with transparencies are best as PNG files.

For JPEG files, select the quality as between 60-70 and save. If you are an architect and the image shows some of your work, you could call the file ‘architect-project.jpg’ or similar. The file name will contribute towards search engine performance, so you are gaining a little bit of SEO strength without too much effort.

4. Compress the images

Photoshop gives you a start when it comes to compressing your file size, but it won’t fully optimise the images. If you are looking for the best loading times and therefore the best search performance, then you will want to run your images through another compression tool, such as TinyJPG Running them through here will save you between 15-120% on every image, and this adds up. It only takes seconds and over the course of a website can make a huge difference.

5. Upload the images with relevant alt text

Alt text is the text that will be displayed when the image isn’t available, or that guides visually impaired users, operating a screen reader. No image should ever be without alt text, so ensure every image has a good valid description of what the image is. If the image happens to show what you do, feel free to include the search term you are chasing, but if it is an arrow, label it as an arrow. Shoehorning search terms into icon alt text has long been frowned upon, and it won’t help your SEO.