10 Common Image Mistakes: Tips for a More Successful website

Images help understanding, break up the text and make it easier for the reader. All excellent reasons for using images BUT they slow websites down and page download speed matters. Understanding how to use images properly will stop you ruining your website with common image mistakes.

Slow websites put visitors off. Google uses page download speed as a ranking measure these days so it has become more important than ever. To take full advantage of the SEO opportunities available to help you market your business you need to follow Google preferences.

Images are usually the largest part of a web page by a long way. Text is almost insignificant in comparison.

The file size of each image, it’s position on the page (more critical if it appears “above the fold“) and the number of new images used on a page are relevant.

So careful design and management of image use is very important. Poor image management will hurt your website.

First and foremost is the question: Is that image really necessary?

• Is it helping and improving your web page from the view of the visitor?
• Is it helping you get your message across?
• Is it making your web page easier to read?
• Is it helping your brand?
• Or is it just decorative?

Can you justify using that image?

Not optimising images: Bad

Large images have always been a problem for websites. Image optimisation has always been important but is still often ignored or not understood.

If you find your image (perhaps off a camera or an online image library), upload it and place it on your web page – you have failed to do the right thing. You did not optimise your image for web use first. Consequently, you probably uploaded a massive image measured in MB instead of a web optimised image measured in KB.

Image optimisation is about making the file size as small as possible, while still having an image suitable for it’s use on your web page.

Think about:

• How big (wide and tall) does the image need to be? Reducing physical dimensions of a photograph makes a significant difference to its file size.
• How good does the quality need to be? Perhaps it doesn’t need to be pin sharp. Perhaps a bit fuzzy is ok and it can still do the job you want. We tend to be more critical than the average site visitor. Reducing the quality of a photograph also makes a significant difference to its file size.
• Does it need to be a photo? Would a simple drawing work instead? Drawings typically are a much smaller file size than photos as they are made up of lines and colour blocks. Photos are made up of tiny dots.

Learn more about Image optimisation.

Hero images: use with care

Many modern websites are designed with full screen width images at the top of the page – so called “Hero images”. (Some of mine are.)

This can look great but may be expensive in terms of web page download speed.

With a big image “above the fold” (the first screens worth of content) of the web page it directly affects how quickly the web page is perceived to download. This perception is critical in “web vitals” download speed measures (known as First Contentful Paint and Largest Contentful Paint).

So, do you really want to have a large image at the top of your web page?

If you do, optimise it as much as possible to reduce its negative impact on your page download time.

Using Slideshows for marketing messages: Bad

In almost all cases slideshows are bad. Most of your site visitors will hate them.

A hero slideshow at the top of your web page is a much worse than a “Hero Image“.

• How many big images are there behind this slideshow “above the fold”?
• How is this going to affect page download time?

Common marketing wisdom now is that these type of slideshows do your website nothing but harm. If you are browsing your site on a mobile phone then slideshows tend not to work well.

They can result in confused messages for visitors.

• What did it say on slide 2 and 3?
• It moved too fast I missed it, now got to wait for it to come around again!
• How many slides are there?

One image with one clear message is best option.

The only justified use of a slideshow that comes to my mind is when visitors are expecting to see a slideshow of still photos eg in viewing a property listing or product photos. And then the slideshow should be under the visitors control so they can browse at the speed that suits them. Slideshows should not play automatically.

Anything playing automatically on a web page is annoying and an accessibility issue.

Videos are good aren’t they? Well, sometimes

Videos that actually help a visitor are good, but these are few and far between.

• Videos should never play automatically – they should be controlled by the visitor.
• They should not replace normal text and image content.
• They should have a transcript of their content.

Is there any point to a video background? It may look impressive once but annoying thereafter AND very expensive in terms of page download speed.

Many people, myself included, skip past most videos and scan through the normal text content. I may view a video if I want to be shown something. But I get bored extremely quickly if they do not get straight to what I am looking for.

Videos have their place, if done well but they are a challenge to get right. Done professionally they are expensive.

Animated images and advertising banners: Bad

Animated images are very distracting. That is why advertising banners are all animated – to be noticed over and above everything else on the web page.

Avoid animations.

And don’t use any advertising banners on your site – they devalue it in the eyes of your visitors.

Using extra images for the sake of it: Bad

Does you web page need lots of images? Sometimes, yes but not always. We are mainly visual so images help us understand.

A picture is worth a thousand words.

Fred R. Barnard

They also can be used effectively to breakup large blocks of text and make the content easier to digest.

But the overall page size is going to increase significantly with each new image added. Thereby slowing down the page loading. So use extra images wisely.

Not changing the image file name: Bad

Images usually have junk names when they come off a camera, or when downloaded from an image library. Leaving the name as junk means it is much harder to keep track of (hence the next common image mistake) and will not be used by Google in image searches.

Use descriptive file names for your images. Be brief but informative (3 or 4 words should be enough), use keywords where appropriate but don’t stuff with extra keywords for SEO. Use hyphens between words. Otherwise do not use punctuation (like apostrophes) or other special characters.

Uploading multiple copies of the same image: Bad

In most cases your website only needs one version of any given image, reusing the same image wherever it is required. This means the user’s browser only needs to download the image once and use it as required wherever it crops up across the whole website.

So, reuse images when you can. If the same image is used on another web page it does not need to be downloaded again. So the next time it has no impact on the page download time.

Nearly every WordPress media library I look at contains numerous versions of the same image. This just clogs up the media library, creates an maintenance headache (as you don’t know which ones are used where) and slows down the website.

Using the wrong image format: Bad

I often see PNGs being used instead of JPGs for photos usually resulting in a much bigger file size thereby slowing down the web page.

• JPG for most photos. 
• PNG for simpler images such as drawings and logos. Also good for screenshots as edges are sharp and text is clearer.
• WebP is the new format for web images which may well replace the above as it is designed to have smaller file sizes but still maintain quality. You may find it more difficult to work with this format as it is not supported by all image editing software. Some web hosting packages now offer automatic conversion of all your images to WebP format.

Forgetting to add the Alt Text: Bad

Alt Text is a short alternative text description of an image used when the image itself cannot be seen. It is useful to search engines and people with sight issues (or for everybody if the image does not load for some reason).

Forgetting to add Alt text renders your image useless except as a bit of eye candy for the people who can see it.

Learn more about proper use of Alt Tags.

Using images instead of text: Bad

Images of text are fine if they are just decorative. But, if the text in the image provides useful information then that information must also appear as real text on the web page otherwise, you have an accessibility and SEO problem.

Learn more about this in Poster Images: How to add posters to websites correctly.

Conclusion: But I see these common image mistakes everywhere?

Yes, me too!

I see these common image mistakes on numerous websites but that just means people are getting it wrong! It does not mean it is good practice.

There is nothing to stop people using images poorly on their website. Using images well requires more effort and understanding of the pitfalls.

But the more you get right the more it will help your website do better in the search engine’s organic listings and help you earn more business.