A lot of people don’t realize how much images play into the importance of SEO in general. It is well known that Google prefers pages with rich media. Meaning, it will generally prefer a website with lots of images, videos, PDFs, etc than one that is just plain text.
But it’s not as simple as just throwing a few images into your website. Like text and HTML, images must also be optimized for search engines as well. A few key pointers to get started:
If your website is very image heavy such as a gallery or photography website, you might want to consider using an image sitemap, similar to an XML sitemap to help organize your image hierarchy a little better.
When it comes to the size of your image, there are a few quick tips to make your image as small as possible. Always save your image as the smallest resolution possible. For instance let’s say you are only displaying a small thumbnail on your website that is 200x200px, don’t upload it as 4000x4000px and shrink it on your website.
The size of your image should be the exact size (or no larger than) displayed on your website.
Before we get started with compression, alt tags and the technical part of image optimization and SEO, take some time to think about the physical dimensions of your image.
Let’s look at this illustration. Here is a mockup of a website with a left aligned image in some text. the image is about 400% smaller on the website than the actual size of the image on the server. It is using HTML or CSS to resize the image, rather than resizing the image before uploading to the website. This can be a very costly mistake and can be the difference between your website loading in 2 seconds vs 10 seconds.
Unless you have a website that makes its living with high quality images (an artist, desktop wallpapers, etc) your images should be small and compressed.
If you see that your JPEG’s and PNGs are measured in Mb instead of Kb you are probably in need of slimming down.
My rule of thumb is this: photographs and large illustrations should be no greater than 100 Kb, preferably below 50 Kb. Smaller assets should be below 20Kb, and icons should be just a few kilobytes. Our team spends a lot of time optimizing images for proper size. We’ve shaved off huge amounts of load time this way, and in some cases have saved a lot of money on website hosting and backup cost.
The image alt and description tag is an attribute that you can, and should add to all image tags.
Do you know the real reason why image alt tags exist? If your image for some reason cannot be displayed your web browser will instead display the alternative text or “alt” tag. Another reason to use image alt tags is it helps you rank better in Google Image Search. When the Google Image crawler visits your site, since it can’t read most types of image it will attempt to grab meta data and other text around the image.
Another reason you should use alt tags in your images is if you are using your image as a link anchor, the alt tag will act similarly to an anchor text for a link. Google doesn’t recommend using too many image links within a page, but this is still good to know. As for image metadata, it may not be a huge factor in SEO, but it has been shown in the past to help. At the very least, make sure your images are properly named.
If you are using Photoshop, try not to save your image in the highest quality possible. You can cut down on precious kilobytes by sacrificing a small bit of quality. There are also tools such as TinyPNG that will shrink your images down considerably.
A recent example of this would be the images contained within this guide. Many of them started out as 100kb, they were saved as 50kb then further optimized using TinyPNG and our own server bringing it down to 15kb or less. That is over a 75% reduction in size! Imagine how fast websites would be if everyone did this.
You can easily change the load time of a website from 5 seconds to 2 seconds by optimizing the images.
Another less commonly known but equally important aspect of on-page image optimization is image organization. Modern website frameworks such as eCommerce and Shopify organize image in specialized directories separated by date. If you aren’t using one of these frameworks then its probably a good idea to find a way to organize your images on your server. Don’t make Google crawl all over your website, do the hard part for them.
If you aren’t feeling creative, at the very least create a folder called “images” and use that to store all of your images. I personally recommend
If you are interested in a nifty infographic on image optimization for SEO, this is one that we refer anyone who is new to SEO and is looking to learn more about image optimization.
Image Structured Data
If you really want to pay attention to detail, add structured data to your images. This is particularly important if you have a copyrighted image that you are looking to protect and rank for. Here is an example snippet:
<div itemscope itemtype="http://schema.org/ImageObject"> <h2 itemprop="name">Photo of Something</h2> <img src="mexico-beach.jpg" itemprop="contentUrl" /> By <span itemprop="author">Patrick Coombe</span> Photographed in <span itemprop="contentLocation">Delray Beach, FL</span> Date uploaded: <meta itemprop="datePublished" content="2008-01-25">Jan 25, 2015 <span itemprop="description">I took this picture while I was out for a stroll</span> <div itemprop="exifData" itemscope itemtype="http://schema.org/PropertyValue"> <meta itemprop="name" content="Exposure Time"> <meta itemprop="value" content="1/500 sec."> </div> <div itemprop="exifData" itemscope itemtype="http://schema.org/PropertyValue"> <meta itemprop="name" content="FNumber"> <meta itemprop="value" content="f/3.0"> </div> <div itemprop="exifData" itemscope itemtype="http://schema.org/PropertyValue"> <meta itemprop="name" content="MaxApertureValue"> <meta itemprop="value" content="2.00"> </div> <div itemprop="exifData" itemscope itemtype="http://schema.org/PropertyValue"> <meta itemprop="name" content="Flash"> <meta itemprop="value" content="Flash Off."> </div> </div>
As you can see, this is quite a lot of code for one image so you may want to consider this before doing it. If you’d like to learn more about schema markup and structured data and SEO, we’ve written an entire section on it.
When saving an image in Photoshop or even Paint, it is important to know which file format to save it in.
JPEG’s are great for photos, still image, complex coloring and lots of shading. PNG’s overall are great for graphics such as logos, very small icons, and web graphics with very few colors. GIF’s obviously are great for animated GIF’s but can also be used for smaller icons and web graphics as well.
Play with your image formats and see how large they are when you save them. In this example, this photo of my brother saved in Photoshop as a JPEG is 200kb (at the highest setting). Save the exact same photo as a PNG and it is more than double the size.
If you are a webmaster in 2019, chances are you’ve heard of new image formats such as webp and SVG.
WebP is both an image format / extension (like jpeg or png) as well as a compression algorithm. It provides both lossless and lossy compression on the web which allows developers and webmasters to make the same great images in a smaller package. The other great thing about WebP is that it supports transparency, like PNG does which has an additional “cost” of 22% additional bytes. So if your image is 100kb, adding transparency will make your image 122 kb. Pretty cool! As of 2019, WebP is supported in almost all major browsers, but it is still making its way into software such as Photoshop which does not have native support. In the meantime, you can convert your JPEG, TIFF, or PNG to WebP using a utility provided by Google.
SVG is much different than WebP. First, it is a vector graphic format that is actually based on XML (yep, the same language used to make sitemaps.) So that means you can actually open up an SVG document in a text editor! SVG allows for 3 basic types of images: vectors, bitmap, and text. If you really want to blow your mind, you can also include hyperlinks inside an SVG, but we won’t go there right now.
For example, here is s squiggly line I drew and how it looks when opened as a text file:
Pretty cool, right?
But why is this such a big deal for SEO? Well for one, these more advanced image algorithms make for smaller file sizes. That is really the biggest reason. SVG images are easy for Google to crawl, and thus most likely makes it easier to index as well. Being that SVGs are vector based, it also makes scaling much easier. So an image that is 10px x 10px is the same size as one that is 10000px x 10000px.
Follow the steps above and you’ll be well on your way to ranking in Google Images. But just remember, just because you can rank somewhere doesn’t mean you should, especially Google Images. A lot of times Google Images will bring in a ton of traffic but really bad statistics such as a high bounce rate, low time on site and more.
This should go without saying, but stay away from stock images and always use unique images. Don’t think you can grab a stock image, change it a little and Google won’t know, because they will. They know every trick you can think of before you even think of it. Although using stock images won’t hurt you in the rankings, they probably won’t help you that much either.
Image Optimization Infographic
If you are looking for a quick / printable guide to optimization images for SEO, here is a nifty infographic that we whipped up for you all. Enjoy!