If you’ve been running your own website or working on client sites, I’m sure you’ve come across page speed issues.
Many technical SEO crawling tools will highlight performance issues, typically listing images, JS & CSS files as the main culprits.
I’d wager many SEOs know images impact load speed, but how much of an impact do images have on organic search, and how should images be properly optimised for SEO?
Slow loading times, poor user experience, and a lack of visibility on search engine results pages are common issues that people face when they don’t know how to properly optimise their images for SEO.
Intellar understands the difficulties you may encounter when attempting to determine how to properly size images for SEO.
So in this article, Intellar details 5 important steps to take on how to optimise your images for SEO.
Table of Contents
A quick overview of SEO for images
Having optimised images on your site has multiple benefits, including:
- a better content experience for users – images can greatly increase dwell time on a page. They also help supplement your content with visual examples
- higher rankings in search engines (SERPs) – Google Images itself is an index of images pulled from websites and other sources. The image file you upload to your website can rank here and drive traffic.
- faster landing page speeds – Sizing dimensions and file sizes play into how fats a landing page loads, meaning the better optimised your images are, the faster your site will be.
What is image optimisation?
Image optimisation is the process of compressing and resizing images in order to reduce file size without sacrificing quality.
A major pain point websites face is when image files blow out page load times. This typically happens when:
- Hero images or header images that are far too large.
- Too many images used on a page, which is particularly bad when the images are not sized properly. Ecommerce category pages can be heavily impacted here, as can travel websites.
- Image files are missing sizing dimensions, so crawling bots have to scale them. Particularly bad for mobile page load speed scores.
Some Google image search stats
Why care about images? Well, here are some stats from Google that may convince you:
- Over a billion queries are made to Google every day for image searches
- Images account for over 10.1% of all Google traffic
- People spend more time on pages that contain visuals, including images
- 90% of information transmitted to the human brain is visual
- Images are returned for 34% of search results
- Google Lens is used over 8 billion times per month
Choose the right image file type
There are a range of image file types, all with a different purpose.
The following are some of the most common image file types found on websites:
JPEG, which stands for Joint Photographic Experts JPEG
JPEG is a lossy image file format that compresses images to produce smaller file sizes with only minor quality loss.
The JPEG format is what you will most commonly use on a website.
PNG, which stands for Portable Network Graphics
PNG is a lossless image file format, which means no data is lost when the file is compressed. This makes it an excellent choice for images with a lot of detail or transparency, like logos and illustrations.
GIF, which stands for Graphics Interchange Format
Gif is another lossless image file format, but it is limited to 256 colours and is best suited for simple graphics or animations.
SVG, which stands for Scalable Vector Graphics
SVG is a vector image file format best suited for logos and other simple graphics.
WebP
WebP is a lossy image file format designed specifically for web use, and it’s the best option if you want to optimise images for speed while maintaining sharpness.
If I had to recommended one file type to use for images on your website, it’d be JPEG.
This is because JPEGs are better compressed, load faster and maintain quality.
Compress images without losing quality
Compression is an important step in image optimisation, as compressing an image reduces its file size without sacrificing its quality.
This will ensure faster load times while maintaining a properly sized and crisp image.
Here are some ways you can compress the images on your website:
Online Compressors
There are a number of online tools that can help you easily compress your images.
These are free and easy to use. Some include:
- TinyPNG – An effective solution for reducing PNG files while maintaining colour quality.
- Compressor.io – Supports various image formats, including: JPEG, PNG, GIF, and SVG. A great solution to reduce file sizes without significant loss of visual quality.
- Kraken.io – Another valuable tool, offering more than just compression. Kraken.io allows resizing and cropping, and even includes features for optimising your images for SEO purposes!
WordPress Plugins
If you use WordPress as your CMS, there are several plugins that can help you compress images with just a few clicks. Some popular options include:
Using one of these plugins will save you a lot of time and effort!
Use a CDN
Content delivery networks (CDNs) can help your website load faster by storing and delivering images from servers near the user’s location.
Using a CDN will also help you save money on bandwidth by reducing the amount of data that must be downloaded from your own server.
Cloudinary and Imgix are both good CDN options that offer free plans with generous data allowances.
Add image sizing dimensions
It is critical to include sizing dimensions in your images so that the browser knows how much space to reserve for the image when loading the page.
Sizing dimensions are a simple fix that go a long way.
Here’s what you need to know:
WhY are image sizing dimensions important?
In recent years, Google has placed a bigger emphasis on page experience.
The metric Cumulative Layout Shift (CLS) is a major metric that helps Google understand the page experience on a website.
If you’re unfamiliar with CLS, it’s basically a measure of how much a landing page jumps around when loading. I’m sure you’ve seen this happen before on a website.
Without these sizing dimensions, the browser must guess what size each image should be displayed at and will scale the image accordingly.
This is referred to as image scaling, and it results in slower loading times and a poor user experience. When images scale, that is when the jump around occurs.
When a search engine has to spend time scaling images, especially on mobile, your page load speeds can really blow out.
Here’s an example of what CLS looks like in action thanks to scaling. Credit Google web.dev:
How to add sizing dimensions in HTML
In HTML, sizing dimensions are added by using the img tag and adding the width and height attributes.
For example:
<img src=”image.jpg” width=”400″ height=”300″>
How to add sizing dimensions in CSS
In CSS, you can use the width and height properties of an element to set its size.
For example:
img {
width: 400px;
height: 300px;
}
How to Add Sizing Dimensions in WordPress
In WordPress, you can use a plugin such as Imsanity to automatically resize images when they are uploaded.
This will help ensure that all your images are the correct size and will not require any additional scaling by the browser.
The added bonus of using he Imsanity plugin is that it also allows you to set the maximum width and height for your images, as well as the maximum file size.
This means that all of your uploaded images will automatically be resized to fit within the limits you have set, which ensures faster loading times for your webpages.
Image naming conventions
Adding appropriate image naming conventions and tags is a critical step in SEO image optimisation, as it helps search engines better understand the content and context of a page.
When naming images, it is important to use descriptive words in the image file names that are relevant to the page’s content.
For example, if you’re selling family cars, a good image file name for the family cars category would be “family-cars.jpg”. Keep is simple.
Additionally, adding ALT text to your images is important for SEO because it helps search engines better understand the image’s content. It’s often easy enough to use the same wording in both your file names and ALT text.
ALT text is also beneficial for visually impaired users because it provides a description of the image.
So with that said, here some steps to follow:
Image File Naming Best Practices
- Create Descriptive File Names: When optimising images for SEO, descriptive file names that accurately describe the image are essential. File names should be short and include relevant keywords, with no generic or confusing words.
- Use Hyphens Rather Than Underscores Between Words: Using hyphens instead of underscores in between words allows search engine crawlers to better understand the meaning of file names.
- Avoid Excessively Long File Names: Keep your image file names short and sharp, as long file names can be difficult for search engines to parse.
- Avoid Special Characters: Special characters such as “&” and “?” should be avoided because they can cause errors when search engines index the images.
Image ALT Text And Captions
- Include Relevant Keywords in ALT Text: Including relevant keywords in ALT text helps search engines understand the content of an image and can help it appear higher in search engine results.
- Use Descriptive Captions: Captions should accurately describe an image’s content and include relevant keywords related to the topic.
- Use Long Tail Keywords: Using long tail keywords in ALT text and captions can help your images gain visibility.
- Be Aware of Character Length: It is critical to keep ALT text and captions concise, as character length should not exceed 120 characters for optimal SEO results.
Create an image sitemap
Image sitemaps help search engines to quickly crawl and index your images.
An image sitemap contains information about your website’s images, such as their URL, ALT text, and captions.
Benefits of Creating an Image Sitemap
- Improved crawlability: Image sitemaps assist search engines in better understanding the content of your page and how it should be indexed.
- Increased visibility: Image sitemaps can help increase the visibility of your images in search engine results pages by providing information about them.
- Faster indexing: Image sitemaps can help search engines quickly identify and index new images, which can help your page’s ranking.
Steps to Creating an Image Sitemap
Luckily, this step is very easy and very quick.
If your website is on WordPress, you can quickly create an image sitemap with the likes of:
- RankMath
- Yoast
There are also free online tools such as:
- https://www.mysitemapgenerator.com/start/free.str.image
- https://www.angeldigital.marketing/image-sitemap/
Once the sitemap has been generated, the final step is to submit your image sitemap to search engines.
This can be accomplished by submitting the sitemap’s URL to Google Search Console and Bing Webmaster Tools.
By submitting your sitemaps, not only do you help force a crawl on all the contents, but you can also monitor indexation coverage and pick up on any issues.
Summary
By following the steps outlined above, it’s possible to create an effective and optimised image SEO strategy that can help supplemtent your website’s performance.
Note that regular monitoring of page speed should also be done in order to ensure optimal loading times for users.
Taking the time to properly optimise images can help create a more successful and user-friendly website.
Thank you for reading this article on the importance of optimising images for SEO!
Recent blog posts
In our blog section you’ll discover more in depth guides and SEO news. Check out some other posts below!
