Beyond the blur: tips for website images

Images are more important than words on a website. There, we’ve said it – and of course we would as that is our business: commercial photography for websites, social media and marketing. Words of course are right up there in the importance stakes but it’s the images on your site that will attract customers to your product or service, keep them on your site for longer and help with your search engine optimisation (SEO). Appearance is everything and regardless of whether you use stock photos or illustrations from an online library or commission a professional photographer like McAteer Photograph to take images for your website, you will want them to look crisp, load quickly and attract visitors to your site through SEO.

It can be incredibly frustrating when your pictures look amazing on your desktop, but that look doesn’t translate to the screen. How many websites have you seen where the images seem ‘soft’ or slightly out of focus or even pixelated? How many sites have you been on that have a significantly reduced loading speed? It’s a balancing act between quality and performance but one that is worth spending a bit of time on to get right.

As professional photographers, images are obviously key to our business offering. We have recently updated our website so this is a process we’ve been through ourselves in the past few months and spent quite a bit of time researching and testing how to best showcase our images. We thought we’d share some pointers to help you get the most out of your pictures.

Large files

When a commercial photographer provides images to a client they receive wonderfully large images that are perfect for print (at least they should). Or even if you take them yourself with a decent camera, the images will likely be pretty big in size. Large files give you a huge amount of flexibility so that you can reproduce the image onto anything from a billboard to a business card.

However, large images are far too big for a website to cope with and will need some adjustment before they can be uploaded and linked into the pages of your site. To give you an idea, many images we supply are over 30Mb in size but for a website the same image should be much smaller – around 1Mb – but still look as good as the 30Mb file.

Reducing the file size

So, images have to be reduced in size and retain the quality. This is hard to explain but easy to do. Imagine one of our 30Mb images as a box filled with sand. The box is the file size, the sand is the pixels that make up the picture. The box is large and filled with lots of sand. If you make the sandbox smaller, it will still have all the sand inside it leaving you with a smaller file but all pixels intact = high quality. But if you decant sand out of the large sandbox, you will have less sand and therefore less pixels = lower quality. When resizing your image, you need to create a balance between the box size and the amount of sand.

Usually images are measured in millimetres or inches, which contain a certain amount of ‘pixels’ or ‘dots’. For a web image, we recommend that you measure your file in pixels. That way you can get the right amount of pixels (or sand) into your image. If you don’t have enough pixels, your image will have to stretch to fit the space on your site and it will look blurry. If you have too many pixels, your image will have to be squished to fit the space on your site, which may also compromise the image quality.

First check and see what size of image you’re working with. To do this on a Mac, press cmd and i (for info). On a PC right click > Properties and click on the Details tab.

A large, full screen hero image on your website should not require to be wider than 2000pixels wide. This means that your box is 2000 pixels wide. Some sites automatically reduce images into different sizes to use in different areas of your site so check what the largest size you require is. Many sites are 1920 pixels wide. Note that if your image is very small, enlarging it will not help the quality. You should seek a larger version or an alternative image if that’s the case.

Third party software such as tinyjpg.com or pixlr.com can be useful tools to rescale images if you don’t have Adobe Photoshop.

If you would like us to send you a web-size file, you can always ask us at the point of commissioning.

Resolution
PPI resolution (pixels per inch) used to be important to take into consideration but for the vast majority of modern responsive sites this is not a factor for web display. The important thing is that you have the right amount of pixels in your image.

Test and correct
It’s important to test what works on your site and correct accordingly. Try variations of sizes and look at your site on different devices such as a laptop, desktop, tablet and mobile phone. Also, look at your site on different browsers as there can be some variation between them. Once you get the formula right, you’re good to go with all the images your site will display and you will get a buzz seeing your site come to life with your chosen pictures.

File type

Only save you photographs files in .jpg and graphics as .gif or .png files. Websites tend not to work with anything else for visuals.

Colour mode and colour profile

CMYK is only for print so don’t use it. Save your images in RGB colour mode with an sRGB colour profile work with mobile devices.

Naming convention
Don’t use loads of special characters. Keep it simple and perhaps use underscores or hyphens if you need to. Letters and numbers are fine to use in any combination but we advise that retaining the original file name is always best in order that you can refer back to its source if you need to.

SEO

Remember that search engines can’t see what is inside an image. To a search engine, a picture of a member of staff, a product, or a pet might as well be the same thing, unless you tell it otherwise. The way to do this is through adding alt text (alternative text) and a caption.

• – Alt text is basically about stating the obvious within an image. This is not always visible to readers, but can be incredibly helpful for the visually impaired. Search engines use the alt text to find out what is inside the image. Such as “A man on a bench feeding a dog in Glasgow”.
• – The captions can be used to give your audience some helpful information about the image such as the locations, the date, the name of a person or any other nugget of information about the image.

Once you have uploaded your image fill these in to optimise your website search engine indexing.

Good luck!