No Images? Nothing to See
As they say, an image is worth a thousand words, and without them, you’ll not only lose out on SEO but your users will get bored and bounce from your page. Images are an important aspect of any website and are good at hooking the attention of your audience. Images instantly represent key parts of a web page in a different way to text. So there’s more to images than meets the eye, and it’s important that you understand the bigger picture (pardon the pun)!
There’s a lot to consider when using images, like acquiring them, knowing whether you’re allowed to use them, image types, image SEO, compression, colour psychology, and so on.
Getting free images
Make sure any images you get for your website are royalty, attribution and copyright-free. You can get such images for free from the following links:
Don’t add your trademarks, watermarks or copyrights to these images as they do not belong to you and you cannot treat them as your own! But you can still use them commercially or personally without attribution.
If you use videos on your website, you could also check out Coverr, which is the same as the above 3 links except it’s for videos.
Be Creative!
Remember – you need to be different and stand out from the crowd! Everyone will be using the free image websites mentioned in this article. You should use your own images to add a unique selling point to your website. Even better than images are videos.
If you don’t have a digital camera to take photos then use your phone. I actually sold my digital SLR because I discovered that my iPhone was more than good enough to use. The tools you use to comprise the image – such as lighting, background and photo editing software – are more significant than the quality of the camera itself. If you don’t know how to use a professional camera then you cannot get the best from it anyway…
Best Image Sizes & Compression
Image compression and optimum resolution reduce the size and help quicken up your website loading speeds, improve user experience and boost SEO. Use tools like Gimp to resize images for the web and TinyPNG to compress your images. You should:
- Lower your image resolution
- Shrink your image size
- Then compress with TinyPNG
Trust me, you’ll reduce about 10 times the file size while maintaining the quality! To do the above, follow the instructions in my video tutorial using the free Gimp – an alternative to Adobe Photoshop.
File formats
Images for websites should use the appropriate image formats. Some of the best image formats are:
- JPEG: a compressed ‘lossy compression’ format great for most website images, struggles with edges/curves
- GIF: a image type that supports animations but is also limited to only 256 colours
- PNG: a replacement for GIF that’s best for logos and supports transparency
- TIFF: an option – similar to JPEG – for larger images that exhibit the highest resolution
There are other image formats like BMP, RAW and EPS, but for web use, I would recommend the above formats. Raster images are displayed on websites, and SVG’s (scalable vector graphics) can be any resolution or size and be re-saved into a relevant web format.
Remember that they key is to use the right image type where required as it affects the size, aesthetics and a load of other knock-on areas.
Image SEO
Image search engine optimisation (SEO) is another best practice. Rename filenames and add alt tags to target important keywords to spread link juice throughout your website. Remember that search bots do not read the visual image; they read the metadata! So rename the file to target your primary keywords, and for more about SEO, read my detailed SEO article.
Image Colours
And finally, use colour psychology to subtly elicit the correct emotions of your target audience. Be consistent with your colouring and choose the right image colours wisely. Consider adding a tint of your primary colour to represent the colour of your brand or the emotion the colour elicits.
Below is a range of different colours and the emotions they elicit:
- Bright colours: energy
- Dark colours: power & elegance
- Red: power, passion, strength & excitement
- Orange: cheerfulness, friendliness, courage, confidence & creativity; draws attention, not overpowering and great for calls-to-action
- Yellow: energetic, happiness, curiosity, intelligence, brightness
- Green: harmony, nature, life, health, money
- Blue: patience, peace, trustworthiness, stability, professionalism, trust, honour
- Purple: power, wealth, wisdom, luxury
- Pink: romance, care, peace, affection
- Brown: relaxation, comfort, reliability, earthiness
Thanks for Reading
I really appreciate your time taken to read my article. Thanks a million for this! I hope this helps you optimise images for your own website. Now that you understand the main principles, it should be a lot easier from here.
Why not grab my free website guide and checklist that you could use as a handy reference guide; it explains all about images, and many other useful areas.
You may also want to check out my resources page which lists all the useful tools.
It would be so helpful if you could share this article, so that others may also benefit from it.
All the best,
Nick
Leave a Reply