Img.vision » Image hosting handbook » Image SEO guide: Learn to optimize your images on the web

Image SEO guide: Learn to optimize your images on the web

10 billion images, that’s how many images Google had indexed in 2010.. with 1 billion pageviews a day. That means that website owners have a lot of potential traffic to gain from Google Image searches. Image SEO is important as it will help your images go up in the rankings on Google so that traffic is more regularly directed to your site.

Google Image database

Why should you optimize your images for search engines?

As stated above, better image SEO will increase your traffic. To give you an idea of how important Google Images are for driving traffic, check out these statistics:

  • Google images accounted for 22.6% of all internet searches in 2018, so it is certainly worth paying attention to.
  • According to Sirv, Google images is 15 times bigger than Facebook, 10 times bigger than Yahoo, Bing, and Amazon and 5 times bigger than YouTube.
  • Research from ViSenze found that 62% of Millennials and Generation Z consumers prefer visual search tools over other technology.

How does Google rank images, does Google look at your images?

Here is what Google can do to understand your images:

  1. Google can read embedded text in your images.
  2. Google ex-chief evangelist Matt Cutts admitted Google reads EXIF meta data from your images.
  3. Google reads text in close proximity of the image on the web page. If there is text related to sun creme, your picture of a bottle of sun creme will be more easily identified as a picture of sun creme bottle.
  4. Google reads the standard image HTML code tags that exist to decipher the image.

What are the image SEO HTML codes?

Use a descriptive image name:

<img scr="watermelon-smoothie.jpg" />

Use the image alternative attribute:

<img scr="watermelon-smoothie.jpg" alt="Watermelon smoothie" />

Use the longer title tag:

<img scr="watermelon-smoothie.jpg" title="This is picture of a watermelon smoothie inside my kitchen based on my own recipe" />

Use the figcaption html element block:

<figure>
    <img src="watermelon-smoothie.jpg" />
    <figcaption>This is what my watermelon smoothie looks like when finished</figcaption>
</figure>

Use an appropriate file type

JPEGs are the best file type all-round. They have an intelligent algorithm to achieve quality while keeping the file size small. You should definitely use JPEGs when you’re dealing photos.

PNGs can be interesting as well. Not for photographs, but for digital illustrations and logos. Digital illustrations and what were originally vector images don’t have the huge color palettes and color differences like real-life photos have, so use PNGs when the amount of colors is low. Another benefit to PNGs is that they can have a transparent background. Making them perfect for embedding logos.

Reduce the image file size

Amazon found that just 100 milliseconds led to a 1% drop in sales, equating to $1.6 billion in lost earnings a year, if the website page loading time slowed by 1 second. Google uses page loading times in their SEO ranking algorithm, which means you should keep your image file sizes under control is a vital component of an image SEO strategy.

You can use the following free services to compress your images:

Note about Img.vision: Img.vision compresses images into the 24% smaller image format WEBP in realtime when the image is requested. Meaning you don’t need to compress your images before uploading them to Img.vision.

Use responsive images

A common mistake in page SEO is that users upload a photograph which has huge dimensions, and then play with the width and height html attributes to make them smaller to fit more nicely on the web page. This is no-go for image SEO because the bigger image file size needs to be loaded, but the extra bytes aren’t needed since you only show a small version of the image.

Here’s what responsive image code looks like:

<img srcset="imageurl 320w,
             imageurl 640w,
             imageurl 960w,
             imageurl 1280w,
             imageurl 2560w"
     src="fullimage" alt="image hosting"/>

When the browser sees responsive image code, it will load the image size that fits the screen resolution best. Only one image is loaded, even if you specify multiple image urls and sizes. The responsive image sizes mentioned above are the best sizes to use these days, taking mobile devices and desktops into account.

Img.vision auto-generates responsive image code for users. We use real-time image resizing and cache the result for future requests when a browser tries to load an image of a particular size.

Use image sitemaps

Google is pretty good at finding new content and new images. In order to be sure Google has found your image, you can create an image sitemap.

Sitemaps are text files following the xml structure format. This format can easily be understood by search engine bots.

This Google guide for image sitemaps can be helpful if you plan on doing this.

An example of an image sitemap is this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url> 
</urlset> 

Once you’ve created the image sitemap you can make your sitemap available to Google by adding it to your robots.txt file or directly submitting it to Search Console.

Keep your content up to date! Site moves, upgrades, template changes,… there are many things that you do online with your website. Always keep an eye on existing pages that there are no broken image links or broken links in general for that matter.

Broken links are a signal to Google that your site is not maintained anymore, or worse yet, abandoned.

Make sure your images load quickly

Consider using a content distribution network (CDN) for your images. You can use Img.vision to host your images and take advantage of a worldwide network of servers connected to various entry points of the internet allowing distribution of images to be closer and thus faster to your audience.

Enterprise CDNs are quite technical with DNS settings and various configuration options.

If you want an uncomplicated CDN, you can upload your images to Img.vision, copy the embed code and place it on your website. You’ll instantly take advantage of the various technical optimization that the Img.vision CDN provides without any configuration.

How can you test your optimized images?

A trick to check if your image is recognized by Google is to do a search in Google for your image.

Google reverse image search

You can upload your image into the Google Image search input box and Google will try to find similar images by trying to recongize it.

If the image results are relevant, your image SEO is good.

Here’s an image filetypes illustration from the Img.vision homepage that isn’t recognized by Google❌:

Google image search doesn’t recognize this image

Here’s another illustration from the Img.vision homepage that is recognized ✅:

Google image search recognizes this is a screenshot

How to achieve the best results?

Use your own unique images. Don’t use stock images, but digitally create your own images, or use your own photographs. Uniqueness goes a long way in Image SEO.

7 steps to Image SEO

Leave a Comment

Your email address will not be published. Required fields are marked *

Exit mobile version