Images are a central part of any website and can often be the deciding factor of whether a visitor stays on your site, returns in the future or clicks away. Because images pack such a powerful punch, it’s vitally important to get them just right.
In this blog post, we round up the best practice to make sure your images are correctly formatted, optimised and legal.
Image and file types
There’s nothing quite like a high-quality, on-target photograph to really capture an audience’s heart and soul. Whether your subject matter is people, products or the natural world, a good photograph can be a real marketer’s dream and make a huge difference to your website’s success.
So what are the best types of file formats to use for photographs?
Basically, anything that requires smooth colour gradients and a high level of visual detail is best formatted as a JPEG. Not only do these files support lossy image compression (so file sizes are relatively small), but they allow for literally millions of colours and can transition smoothly from one to another.
The main disadvantage of a JPEG is that during lossy compression, some detail is inevitably lost. This is not a problem on a site with only a few photographs, since you need not compress your JPEGs, but on a more image-heavy site, you will need to compress your files to ensure that download speed is quick enough.
It can be a balancing act between maintaining a high-quality image and ensuring that your website loads quickly. Generally, it’s best not to go any higher than 50 or 60% compression.
When you need to include razor sharp iIlustrations, logos, banners and so on, you will be dealing mostly with vector graphics, created in Adobe Illustrator or similar.
Vector graphics have the flexibility of being resizable – no matter whether your image is as small as a postage stamp or as large as a billboard, the resolution will remain the same.
There are many formats for vector graphics, and all have their advantages and disadvantages.
PNGs, although a raster format, are often used for illustrations. They are easy to display and are widely supported, including by mobile devices. They also support a wide range of colours and transparency, so can be useful for logos which need to be placed over a coloured background.
The W3C standard format for vector images is SVG. These files are scalable and zoomable without degradation and are an open standard, scriptable format.
GIFs are suitable for simple buttons and icons. They support up to 256 colours but are not suitable for gradients.
Best practice for website images
A search on the internet will bring up a whole host of information relating to image use on your website and the whys and wherefores of placement, quality, sizing, optimisation and so on. To make things a bit easier, here’s our short list of dos and don’ts:
- Choose high-quality images – these are the raw ingredients you’re working with, and will determine the end result.
- Do place your images carefully. The higher up the page you place them, the more visual impact they will have.
- Make sure your image filenames are descriptive, e.g. an-infographic-about-international-book-sales-2014.jpg is better than 4390&9xhe43&hg.jpg.
- Use the alt attribute. Firstly, it allows your site to be more accessible to users with visual impairments or who have low-bandwidth connections. Secondly, it tells Google what your image is about, and therefore helps with SEO.
- Don’t worry too much about exact colours, since you have no control over your audience’s monitors or calibration.
- Don’t be afraid to crop your images where necessary to focus attention on a particular area.
- Don’t resize images using HTML. Make sure your image is the correct size first of all, using Photoshop or similar, otherwise your site will be loading a very large file unnecessarily, which will affect its speed.
- Don’t embed important text inside images because if for some reason your users can’t access the image, they will miss out on the text as well.
Keeping things legal
Finally, don’t forget that all your images need to be legally sourced. This means either creating them in-house, using public domain images, purchasing them from a stock photography site or seeking permission from the owner. Remember too that ‘royalty-free’ does not mean ‘copyright-free’ not ‘free of charge’. If in doubt, err on the side of caution.
The use of visual material can quite simply make or break a website’s success. When not planned or executed well, images can prove to be a source of never-ending frustration for users, due to long load times, poor resolution or inaccessibility. Yet when handled skillfully, they can become the very essence of your site, a critical component of your marketing and a direct influence on your bottom line.
By starting off with great raw material and following our tips above, you should be well on the way to creating a site where your images work as hard as you do.