How to Optimize Images For SEO

In my last post, I shared what you should and should not do when it comes to optimizing website content. Today let’s focus on how to optimize website images and photos — it’s actually pretty simple.

At Bourn Creative, we highly recommend that you leverage every free and simple way to boost your website’s SEO and the chances your website has to show up in the search engine page listings when someone is searching for your target keywords and key phrases. One part of that is learning to optimize images for web.

Look at these two images — while they look exactly the same, only one of the images is optimized for search engine optimization.

Visually, an un-optimized image and an optimized image look exactly the same. But, if you look at the HTML behind the above images, they look drastically different.

There are four different ways you can optimize an image or photo for SEO:

1. Size Images Appropriately For Web Use

Large images will cause your page speed to slow down and page load speed plays a role in how the search engines view your website. One large image is bad enough, but image a page with a gallery of images sized for print use instead of web viewing. No visitor will be happy waiting a long time for an image to load, especially on mobile devices.

• Size your images appropriately for your content or featured image width. If your content or featured image (use the largest one) width is 750 pixels, there is no reason to upload images that larger than that — let alone thousands of pixels wide.
• Downgrade the image resolution. Often images from stock photo sites or even some digital cameras are set to a resolution of 300 dpi — print use resolution. Make sure all images you upload to your website are set to 72 dpi — web resolution.

Remember, the smaller your images, the faster your page load speed — and that is good for your potential search engine results page listings.

2. Use Descriptive Image Names

Never upload images with generic names, or worse, the names assigned by your digital camera or the agency you bought the images from.

Search engines can’t “see” images but they can “read” your HTML, which means they will read/scan the image name. Naming your images with descriptive names will not only help find or identify images in the future, but if you allow Google Images to pull your website images, the images names will play a role in helping them show up in the search results.

In the example images above, the name of the unoptimized image is DSC_0245.jpg — this is a bad image name because it means nothing to someone who can’t see the image. The optimized image however, is named lake-tahoe.jpg, which is descriptive and gives both search engines and people who see the HTML an idea of what the image is about.

Bad Image Name Examples (Not helpful, Generic, Confusing):

• Photo.jpg
• logo.gif
• img_23.png
• ebookcover.jpg

Good Image Name Examples (Helpful, Descriptive, Clear): Note how these examples include keywords in the image name as appropriate (no stuffing).

• jennifer-bourn.jpg
• bourn-creative-logo.gif
• sun-dried-tomato-polenta.png
• how-to-get-clients-ebook.jpg

Here is a sample of the basic HTML structure for an image:

3. Define Alternate Text For Each Image

Alternate Text or Alt Text is text that appears in place of an image to supply information about it if the image doesn’t load.

• Alternate Text is important in website accessibility, as it is also used by screen readers to describe the image to some one can’t see the image, such as a blind user.
• Alternate text is important in on page search engine optimization, as search engines use Alternate text or ALT text to decipher what an image is about.

In almost all cases, your visitors will never see the Alt Text you define for an image, but again, search engines can’t “see” images but they can “read” your HTML, which means they will read/scan the Alternate Text — and this could improve your on page search engine optimization.

Alternate Text is added to images using the Alt Attribute, commonly called the Alt Tag. Here is an example of the same link used above with the Alt Attribute used:

When writing the Alternate Text for an image:

• Make sure it describes the image or what the image is about
• Include keywords as appropriate — but don’t use it to stuff keywords
• Be sure it is useful to anyone who can’t see your image and is having the page read aloud to them via a screen reader
• If you are using an image to display text, like a quote, use that text as the ALT text

4. Remove Extra Data From Your Images

Images when saved have extra data that you don’t see. Use a third party tool like ImageOptim (what I use), a free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.

After I save an image I want to use on my website or blog for use online, I then run the image through ImageOptim and it shrinks the image even further, optimizing the size, which in turns helps keep page load speed down.

One image, Four Opportunities to Optimize

Each time you add an image to a web page, sales page or landing page, or a blog post, you have four opportunities to optimize the image and possibly boost the chances of the page ranking well in the search engines.

To wrap it up nice and neat, here’s the low down you need to remember:

• Crop and size each image appropriately for use online
• Give each image a descriptive, keyword-rich name
• Give each image descriptive Alternate Text, using the image alt attribute / HTML alt tag
• Optimize the image with an app like ImageOptim, to remove extra data
• The image name and alt text ideally should be unique
• Don’t use any of these opportunities to stuff keywords and be spammy

Bonus Image Optimization Opportunity!

While there are four core ways to optimize images for web, there is one more way your images can give your on-page optimization an even bigger boost — image captions.

Image captions aren’t right for every website — I rarely ever use them on this site. But when you need to provide image attribution, want to note the people in the image, or share a short description of the image, an image caption is the perfect solution. Plus, depending on the image and the content in the caption, it may be another opportunity to better optimize your web page or blog post (as long as it doesn’t feel or look spammy).

What About You?

Are you already an image optimization expert? Or, did you learn something new in this post that could help improve your on-page SEO? I’d love to hear your thoughts in the comments below!