Image Optimization 101: What’s the Difference Between Alt and Title Attributes?


Image Optimization 101

If you have some knowledge of SEO, you know that Google has an increasingly sophisticated algorithm that’s able to determine how relevant and qualified your website is for users. However, you may be wondering how that algorithm processes images. 

The images on your website are just as important as your text. If you have an image-heavy website, your website could be dipping in the ranks simply because they aren’t well-optimized. 

Read on because in this image optimization 101 guide, we’re going to go through everything you need to know about image optimization through easy, actionable steps! 

1. Choosing the Right Images

Images are imperative for an engaging website because they help break up long paragraphs of text. They give the eye a rest, illustrate the topics at hand, or simply give visitors an idea of your brand through logos and graphics. Here are a few rules of thumb on how to choose the right images for your website: 

Relevancy

Your images always need to be relevant to the web page they’re placed on. For instance, if you want to add an image to your “About” page, it would make more sense to add a headshot or a group photo of your team rather than a beautiful setting sun. 

This remains the same for blog articles. If your topic is about the top 10 greatest hair products on sale today, it would make sense to have photographs of each product. You could also include a stock photo of a woman brushing her hair. 

Quality

Remember that the relevancy of your image won’t matter if it’s a poor quality image. Here are a few indications of a poor quality image that you should avoid:

  • The subject matter is unclear
  • It’s blurry or noisy
  • The colors clash with your brand’s color palette 

Legitimacy

If you’re not a photographer or web designer, it can be tempting to do a quick Google Image search and use the most relevant images that come up for your own website. However, those images have been taken by a photographer or created by a designer or illustrator who hasn’t given you the license to use them and that you haven’t paid for. 

If you don’t want to pay extra or contact the creator directly, here are a few free stock image sites that you can use. If you particularly love the artist’s work, remember to leave them credit!

  • Unsplash
  • Pixabay
  • Life of Pix
  • Pexels

2. Preparing Your Images

Before we go into alt text and why it’s imperative for a well-optimized site, you need to have the right images on your website. Here are a few rules of thumb on deciding what images to have on your site and what to avoid. 

Image Size

Your image size should be large enough that’s it’s high-quality and clear to viewers, but not so large that it’s slowing down your web pages. People don’t have the patience they did years ago when they were first dealing with dial-up.

According to MachMetrics, a website that helps you monitor the speed of your site, the bounce rate of a page that loads one to three seconds long raises to 32%. This increases all the way to 123% for sites that take one to 10 seconds to load. 

Changing your image size is the easiest way to knock down those load times and convince people to stick around on your site longer. 

Make sure that your image is saved to the largest size needed for your website, but not larger. If you’re using a website builder such as WordPress, Squarespace, or Wix, they’ll often give recommendations on the proper file size

Image Format

Once you know the maximum file size necessary to look good on your website for all devices, you’ll want to save it in the right format and with the right name. You’ll usually be deciding between PNG and JPG file formats. 

PNG is a “lossless” format, meaning that before and after you save and compress the image, the quality will remain the same. Although PNGs are of higher quality, this also means that their file sizes are much larger. This makes them only acceptable for graphics and screenshots.

JPG, on the other hand, has “lossy” compression–meaning some image data will be lost after you save the image. This makes it perfect for photographs on your website because they’ll still look like high-quality photographs to the human eye, even though their file sizes will be much smaller than a PNG-formatted image. 



3. Adding Alt Text

You’ve chosen high-quality, relevant images for your website that are sized and formatted correctly. It’s time to add them to your website with the proper alt text!

What is Alt Text? 

Alt text stands for alternative text. It’s also often described as “alt description” or “alt attribute.” This is text that’s placed within the HTML code of an image in order to describe its appearance as well as function. 

If you have alt text, it will:

  1. Show up instead of the image if your image can’t load
  2. Make it easier for search engine crawlers to understand the image and context
  3. Allow screen readers to read the text aloud for visually impaired users so they can fully access your site

How to Format Your Alt Text

Composing your alt text should be a straight-forward process that is 125 characters or less in a succinct sentence. Don’t focus too much on keywords. Instead, come up with a short description of the image you see.

If you close your eyes and someone read the description back to you, would you be able to properly visualize the image?

The alt text needs to be written like a sentence and not like a string of keywords. For instance, imagine you had an image of a bicycle leaning against a white fence. Here are a few examples of what you shouldn’t write: 

  • “bicycle” – This is too general and uninformative. 
  • “Bicycle, fence, sunny day” – This is a little more descriptive, but it’s just a string of words and not a sentence. 
  • “Picture of bicycle against fence” – You don’t need to use the words “picture of” or “image of”–it’s already assumed and known that it’s a picture. 

Here is an example of good alt text: 

“Bicycle leaning against white fence in a suburban yard.” 

Alt Text Features

Sometimes it can be confusing to determine what needs to be described. You can easily go overboard or not write enough. Here are a few features that you should include if applicable:

  • The placement of objects
  • Colors
  • Names
  • Animals
  • Placement of text
  • Emotions (smiling, crying, bored)
  • Surroundings

Remember to focus on the subject of the image. If you see details that aren’t relevant, don’t include them. For instance, if you have a photo of someone standing in the kitchen, you don’t need to add that there’s a spice rack sitting on the counter to their right unless the person is pointing or drawing attention to it in some way. 

Alt Text for the Visually Impaired

Remember that beyond the SEO benefits, you’re creating alt text images so that visually impaired users can access your website completely. Many of the tips given are common sense if you consider that these users will be using a screen reader to access your site. 

You want your alt text to be 125 characters or below because you don’t want users to take a long amount of time reading about what an image is. You also don’t want a string of keywords because it just isn’t a good way to help visualize an image. 

Lastly, it’s recommended to use your target keyword in the alt text if you can, but it shouldn’t be forced. For instance, if your keyword is “best dog breeds” and you have an image of a dog leash, there’s no way to describe that image with your target keyword without it sounding forced and, even worse, confusing.  

Image Optimization 101 for a Site That Ranks Higher 

We hope this image optimization 101 guide has demystified the process of optimizing your images for your website. It may take time at first if you have a batch of images already on your website that need an addition or revision of alt text, but your time will be well worth it.

Not only will your website be loading faster and ranking higher, adding descriptive, succinct alt text to all of your images will help people with visual impairments be able to access your website with screen readers. 

Ready to learn more ways on how to optimize your website in order to boost your online income through affiliate marketing? Keep reading our blog for more informative articles and to get started!



John Kilmerstone

I'm an Aussie living in Japan who enjoys traveling, photography and blogging. Please visit this website and explore the wonderful world of blogging. Discover how to turn your passions and pastimes into an online business.

Recent Content