31st March 2017
The New Rules of Web Design
Good quality website imagery can have the power to grab attention, evoke emotion and compel us to take action. The use of imagery in web design can be far more than making a website simply look pretty. So how can the use of imagery be effectively incorporated into the design of your website to improve your ranking and UX?
SEO in web design involves keeping a lot of plates spinning at once and often this can result in a few of the less impactful plates being dropped. More often than not image SEO is one of those plates. While image SEO may not be likely to launch you up the rankings straight to that number one spot, every little helps, “success is the sum of small efforts, repeated day-in-day-out”.
Taking the time to effectively optimise the images on your website can, over time, be hugely beneficial to your overall SEO strategy. It’s the kind of thing that many businesses and likely your competitors will allow to just slip through the cracks making it even more advantageous if you don’t let it slip.
So how do you optimise imagery in web design and how can that increase traffic?
As of February 2018, Google has removed the “view image” button on Google Image search results. This may seem like a small and somewhat insignificant change but it has had a huge impact on web design.
Instead of showing the “view image” button, which allowed you to see the image in full size instantly and save it from there, you can now only visit the website the image is from, save it, share it, or view your saved images.
So why make such a small change? By removing the “view image” button, it means that users have to instead visit the site the image is from in order to see it full size. This, in turn, is to “help connect users and useful website”. Naturally, this forces most users to actually visit a site they are taking an image from rather than just grabbing it off Google and leaving.
Since this update, there has been an average of 47% increase in traffic to image-heavy websites. This is a significant statistic for web designers and businesses using imagery on their websites alike. No longer can either ignore image optimisation.
In web design now, we know every element throughout a website must be SEO-friendly and that can usually come down to the wording. When Google bots crawl your website to index it, they pull essential information from your source code, your image file name are an essential part of that information.
When an image is uploaded to a website its final name is automatically incorporated into your URL structure. If an image you upload is named “download56”, for example, then that is not providing enough information. It does not provide context for users and search crawlers alike.
Google collects filename data to understand the context of the image and why it’s being used there. When name your image files be sure to avoid keyword stuffing as you can be penalised and ensure you describe the image thoroughly.
Alt text is a way of communicating what an image is showing to users who can not access the image itself. This could be for users who have disabled imager for faster loading times or maybe those with visual impairment using a screen reader to dictate a web page to them.
As with the filenames, the alt text should also be descriptive of the image while avoiding keyword stuffing. Descriptive al text can better help search engines understand and index images on your website.
As tempting as it may be to throw as many images on every page as possible because “they look pretty”, this is actually quite a dangerous (in terms of SEO) game to play. Images are heavy and can slow your sites speed down a considerable amount and you certainly don’t want a slow website.
Google takes sites loading speeds into consideration into consideration when indexing and as well as that, most users will exit a site if it hasn’t loaded in 3 seconds and 85% of those who exit won’t return.
Compressing an image will reduce the file size in order to ensure that it can load quickly. There are also plenty of tools out there that will do this quickly and simply, just search for “image compression tool”.
In web design, there are a number of factors that should be taken into account when designing the UX of a website. For business, UX can have a huge impact on performance. 89% of consumers will start doing business with a competitor if the UX on a site is bad. Imagery is a great way to improve UX and can have a number of benefits such as retention of information and speed of information processing.
The “picture superiority effect” theory says that pictures and images are far more likely to be remembered than words. According to studies, visual elements can convey up to six times more information than words alone can.
When designing a website it is more than likely you are aiming to get some information across to users with the hope they will retain the information. On a website with only text and no visual imagery, a visitor is likely to remember only 10% of the information they consumed three days later.
If you add relevant imagery or visual content to support that text then visitors are likely to remember 65% of the information they consumed three days later. This is over six times more information by simply adding appropriate imagery.
Generally speaking, humans have a short attention span. If the information they are after isn’t there within 10 seconds, and potentially less, of opening a web page they will more than likely not continue searching. By providing the desired information in a visual format such as relevant images or an infographic the user is far more likely to take the information.
If the aim of your website is to sell a product or service then showing an image of that product or service immediately on the page will allow the user to quickly process what you can offer them. If what they see is what they are after then they will continue to read on and find out more, providing pleasant UX.
An important aspect of UX in web design is being able to convey the right emotion to the user in order to encourage them to take action. Imagery has the power to convey emotions to a user that can be more difficult to convey with words alone. For example, an image of an elderly couple holding hands can evoke a feeling of happiness and love creating a good feeling towards the website you are using.
Considering the emotion you wish to convey on a website and how you plan on using that to promote action. It must also be important to consider the way in which different people may view and feel towards an image. Using the photo of the elderly couple holding hands could evoke a feeling of love and happiness for most but for some, it may cause a feeling heartbreak or upset. While you have no control over previous experiences of different people and how they may view an image, you must consider how the majority may view an image.
While imagery can add visual appeal to a website and improve the aesthetic there are also technical reasons to include good-quality imagery in your web design. We hope you have found this blog useful and will carefully consider the images you use in future and how you use them.
25th April 2019
The Difference Between Web Design and UX Design
Quick Tips to Improve Your Existing Website Without a Full Redesign
7th February 2020
Why Mobile-First Web Design Is Becoming More Important
We should work together, you know.
Conversion-led with proven R.O.I. success
We're confident you will see instant results
Established since 2003. Servicing local businesses and global brands
Patient, friendly and supportive
Rest-assured, you'll be in safe hands with a personal team
Are you in need of more business?
We can double your conversion rates by optimising the user experienceGet a FREE UX audit on your website