Search engine optimisation (SEO) is a critical component to your website’s success and one of the most important things you can do is make sure your images are optimised correctly.
In this guide, we'll be explaining why image optimisation is so important for SEO and providing tips on how to do this for better search engine visibility.
Why Optimising Your Images Is So Important
Why Images are Important for Your Website ?
The main purpose of a website is to keep a user engaged and whether that's for ad revenue, or to sell products, it's difficult to do that with a screen full of text.
So images are used to show off products, demonstrate an idea or tell a story. The tricky part is knowing how to add these images to your site correctly, and how to make sure they get the job done without losing your users.
How Images Affect Page Speed ⏰
One of the most important factors in SEO is how quickly a user can access the content on your site. Slow load times not only affect your rankings in search engines, but also user engagement.
In fact, 53% of mobile site visits are abandoned if the page takes over three seconds to load.
With advances in technology and growth of the internet, you would expect that websites are much faster than in the past, which is true on the surface. However, as internet speeds have increased, so has the complexity and quality of the content and media.
Videos, images, animations, music and complex functionality is commonplace on the average website, leading to slower load times if not optimised correctly. This can have a negative effect on the site’s SEO value.
Quick Wins for Image Optimisation
Image Sizes ??
A question you should ask yourself when adding images to your site is how are they going to be viewed and to adjust the size accordingly.
If you are adding a logo to a site that only needs to be 150px wide, a 2000px wide image will offer no benefit and will affect load times.
If you are adding an image to a blog where the text content will only span 800px wide then the maximum size your image needs to be is the same size as that content.
Image Names ?
Naming your images can be hugely important! Choosing relevant descriptive naming conventions that contain keywords and keyphrases you are targeting will boost the SEO value massively.
Make sure the words are separated with hyphens and not underscores to make the name readable by search engines.
Image names such as kitchen_014.jpg can become luxury-kitchen-in-white.jpg to get the most value.
Alt Tags ?
Alt tags fully describe what your image is displaying. This is both important from an SEO standpoint, with search engines knowing what your content is for, but also accessibility concerns so that visually impaired visitors get a full descriptive explanation of the content.
A good length for alt tags is 8-10 words and should again contain any keywords and keyphrases that are relevant to the image.
Going back to our kitchen photo example, a good alt tag would be something like ‘luxury kitchen with marble countertops and white tiled floor’.
Image Formats ?
How your image will be viewed will also affect the format the image should be in.
Generally, photography based images should be in JPEG format. Images that need transparency should ideally be PNGs and any shape and vector based graphics or images are best suited to SVGs.
WebP is a relatively new format released by Google that is suitable for all image types as they are smaller than both JPEG and PNG while still allowing transparency.
However, browser support for the images can vary so you will have to add fallbacks to old images formats for browsers which don’t support them.
Advanced Image Optimisation
Image Compression ⚙️
Usually, high resolution images can be compressed to have the same level of detail to the user while having a fraction of the size.
The type of compression will depend on the type of image and some can be more effective than others. These types of compression can be implemented straight into your site or you can download software to apply them locally to your images.
Software such as ImageOptim (Mac only), jpegmini or trimage are great tools for this. If you have a small amount of images and are in a rush, there are also online image converters available such as compressjpeg.com.
Responsive Images ?
55% of online website visitors come from mobile devices, where internet speed is typically much slower compared to desktop.
This means that the content on your website needs to be specially catered to these devices.
Multiple versions of images can be created for each screen size for mobile, tablet and desktop and be served to those devices separately depending on how they are viewing it.
This may sound daunting and a lot of work, however, tools are available to create these images for you and the code needed to add them such as responsivebreakpoints.com.
You can create any number of steps between mobile and desktop, however you would typically only need 3-4 to suit most browser sizes.
It may not fit perfectly but if you have a website with a lot of imagery content, you could be creating thousands or tens of thousands of images without much benefit.
Deferring Images ?
Deferring (also known as lazy loading) refers to delaying or holding off on loading images that aren’t needed when the page first loads.
For example, if you have a great image half way down the page or a slider of images that a user cannot see initially, then why load them?
There are a wide range of tools to allow this functionality and it is usually very easy to implement. Lazysizes, lazyload.js use JavaScript and CSS classes, however most modern browsers can use browser-level lazy-loading.
Serving Images with a CDN ☁️
When users go to a website, their browser will download all the files necessary to display the site from the server where the website is hosted.
This is great if the server is hosted nearby as there will be no delay in the connection between their computer and the server.
However, websites generally have a worldwide audience and this distance from the server can create a lag between when the user requests the content and when they will receive it.
This is where CDN’s come in handy. They are a group of servers placed all over the world which are a middleman between the user and the content they are requesting.
There are different types of CDN services with different purposes– some have the ability to transform and compress your images on command, such as sirv, and some will be focused on caching your content to make it quicker to access.
Expert SEO Strategy
If you’re not optimising your images for SEO, you could be missing out on valuable traffic and slowing down your site. At Statuo, we can help you with all aspects of your SEO strategy, from keyword research to link building to image optimisation.
Get in touch to learn more about how we can help you improve your website’s performance in the search engines.
