Optimizing Images for SEO
One of the easiest ways to optimize the content of a page is to focus on the images. Most pages contain images, whether they be photographs, illustrations or icons. With a few simple tweaks they can help your ranking and get you some extra visitors.
The big problem here is that search engines can’t see images. Wait, let me rephrase that; they can see that there’s an image, they can even recognize images in terms of their pixels, but they can’t assess the content based on the image alone.
Google do their best to leverage images found on the web, but they need your help..
Let’s say Google comes across the following image (I’m a bit of a petrolhead, so I used this image of a Ford GT40 from Sumlin as an example):
Search engines know that there’s an image because we used the HTML <img> tag, but the only information they have about it is the URL. Humans can easily see that it’s an image of a car, but search engines don’t have this understanding. However, we can help search engines better understand images via the alt-attribute and a good file name.
The alt-attribute specifies an alternate text if the image can’t be displayed (perhaps because of an error, slow connection, screen reader etc.)
This attribute is not only useful for visitors, but also for search engines. It gives them a clue as to what the image is about. That’s why it’s a good idea to use important keywords in the alt-description (once again; don’t go for keyword stuffing).
If you inspect the code of our previous image, you’ll that it already has an alt-description:
As you can see; adding an alt-description is very simple, you just need access to the HTML markup of the image.
The media manager in WordPress
Some content management systems such as WordPress allow you to specify an alt-description when you upload an image.
If you want to optimize your images even further, you could change the file name. By using a descriptive file name we can help search engines.
A typical photo from a digital camera will be named something like ‘DSC0123.jpg’. If we upload this photo and use it on our page, it says very little to search engines because the filename isn’t very informative. Sure, we could use the alt-attribute, but we can do even more by changing the file name.
So instead of calling our photo ‘DSC0123.jpg’ we could call it ‘basket-of-red-apples.jpg’ for example. If you’ve read our article on how to create an SEO-friendly URL structure you already know that it’s best to use hyphens to split words. Using other separators such as underscores (_) plus-signs (+) or no separators at all, should be avoided. By using hyphens search engines are able to recognize the composite parts as individual words.
As you might have heard already; Google have incorporated site speed in search rankings. This means that page loading time is one of the ranking factors; the rise of smartphones and mobile internet playing a big role in this. Unsurprisingly to, because a slow site is not very user friendly.
Image file size is one of the elements that dictates the time it takes to load a given page. Optimizing your images can therefore improve performance. This might not be noticeable on a page with one or two images, but if you have to load dozens of images it can make a huge difference.
File size largely depends on the resolution of the image. Higher resolution files are usually larger, meaning that we have to balance quality and file size.
In order to make an informed decision, we need to consider the several image file types and their advantages.
The three most commonly used file types on the web are JPG, PNG and GIF:
One thing that you should keep in mind is that it’s best not to use HTML to resize images. Uploading a large image (e.g. 800 x 600 px) and displaying it in a smaller resolution (e.g. 400 x 300 px) via HTML width and height attributes will waste bandwidth. With the rise of Responsive Web Design, images are often loaded into a web page, then displayed depending on the size of their containing element, but that's a whole other ball game and image optimization under these circumstances is still in its infancy.
If you want to analyze the performance of your images you can use YSlow or Google Page Speed Insights. The following optimization techniques might also come in handy:
One of the benefits of optimizing your images for SEO is that they can appear in Google Image Search, potentially pulling in some extra visitors.
Image Search doesn’t help every business, but in some occasions it can get you some highly relevant traffic. Especially for recipes, products and digital goods (icons, stock photography...) this can be very useful. Either way: it doesn’t hurt to optimize!
If you’re done optimizing your images, don’t forget to submit an Image Sitemap. This will help search engines find and index your images.
Optimizing images for SEO comes down to three factors: file name, file size and most importantly the alt-attribute. The file name should not be a random string of letters and numbers but descriptive keyword(s). The file size should be kept as low as possible to improve your site speed (one of Google’s ranking factors). And last but not least: don’t forget to add an alt-description to your images. It’s one of the easiest ways to optimize your images for SEO.
Optimizing Images? But Why?
The big problem here is that search engines can’t see images. Wait, let me rephrase that; they can see that there’s an image, they can even recognize images in terms of their pixels, but they can’t assess the content based on the image alone.
Let’s say Google comes across the following image (I’m a bit of a petrolhead, so I used this image of a Ford GT40 from Sumlin as an example):
Search engines know that there’s an image because we used the HTML <img> tag, but the only information they have about it is the URL. Humans can easily see that it’s an image of a car, but search engines don’t have this understanding. However, we can help search engines better understand images via the alt-attribute and a good file name.
Alt-attribute
The alt-attribute specifies an alternate text if the image can’t be displayed (perhaps because of an error, slow connection, screen reader etc.)
This attribute is not only useful for visitors, but also for search engines. It gives them a clue as to what the image is about. That’s why it’s a good idea to use important keywords in the alt-description (once again; don’t go for keyword stuffing).
If you inspect the code of our previous image, you’ll that it already has an alt-description:
<img src="ford-gt40.jpg" alt="Ford GT40 in Gulf colors" />Via this alt-attribute we've provided search engines with two important pieces of information:
- It's a photo of a Ford GT40.
- It's in Gulf colors.
As you can see; adding an alt-description is very simple, you just need access to the HTML markup of the image.
The media manager in WordPress
Some content management systems such as WordPress allow you to specify an alt-description when you upload an image.
File Name
If you want to optimize your images even further, you could change the file name. By using a descriptive file name we can help search engines.
A typical photo from a digital camera will be named something like ‘DSC0123.jpg’. If we upload this photo and use it on our page, it says very little to search engines because the filename isn’t very informative. Sure, we could use the alt-attribute, but we can do even more by changing the file name.
So instead of calling our photo ‘DSC0123.jpg’ we could call it ‘basket-of-red-apples.jpg’ for example. If you’ve read our article on how to create an SEO-friendly URL structure you already know that it’s best to use hyphens to split words. Using other separators such as underscores (_) plus-signs (+) or no separators at all, should be avoided. By using hyphens search engines are able to recognize the composite parts as individual words.
Don't Forget the File Size!
As you might have heard already; Google have incorporated site speed in search rankings. This means that page loading time is one of the ranking factors; the rise of smartphones and mobile internet playing a big role in this. Unsurprisingly to, because a slow site is not very user friendly.
Image file size is one of the elements that dictates the time it takes to load a given page. Optimizing your images can therefore improve performance. This might not be noticeable on a page with one or two images, but if you have to load dozens of images it can make a huge difference.
File size largely depends on the resolution of the image. Higher resolution files are usually larger, meaning that we have to balance quality and file size.
In order to make an informed decision, we need to consider the several image file types and their advantages.
The three most commonly used file types on the web are JPG, PNG and GIF:
- JPG is an image file type with an adjustable degree of compression. By compressing an image it discards certain pieces of information that the eye is least likely to notice. Because of this, JPG images are frequently used on websites.
- PNG are often used because they support transparency (unlike JPG files). PNG is a lossless alternative for the GIF format.
- GIF images are lossless for images with 256 colors or less. This format also supports animations, which is why it’s still used on certain websites.
One thing that you should keep in mind is that it’s best not to use HTML to resize images. Uploading a large image (e.g. 800 x 600 px) and displaying it in a smaller resolution (e.g. 400 x 300 px) via HTML width and height attributes will waste bandwidth. With the rise of Responsive Web Design, images are often loaded into a web page, then displayed depending on the size of their containing element, but that's a whole other ball game and image optimization under these circumstances is still in its infancy.
If you want to analyze the performance of your images you can use YSlow or Google Page Speed Insights. The following optimization techniques might also come in handy:
- Clever PNG Optimization Techniques
- JPEG Optimization
- Optimizing GIF Images
Closing Remarks
One of the benefits of optimizing your images for SEO is that they can appear in Google Image Search, potentially pulling in some extra visitors.
Image Search doesn’t help every business, but in some occasions it can get you some highly relevant traffic. Especially for recipes, products and digital goods (icons, stock photography...) this can be very useful. Either way: it doesn’t hurt to optimize!
If you’re done optimizing your images, don’t forget to submit an Image Sitemap. This will help search engines find and index your images.
Conclusion
Optimizing images for SEO comes down to three factors: file name, file size and most importantly the alt-attribute. The file name should not be a random string of letters and numbers but descriptive keyword(s). The file size should be kept as low as possible to improve your site speed (one of Google’s ranking factors). And last but not least: don’t forget to add an alt-description to your images. It’s one of the easiest ways to optimize your images for SEO.
0 komentar:
Post a Comment