## 
### Web Design Tips with a Dash of Humor
Search for:
Menu
# 
!
Last updated on March 5th, 2020
We can probably agree that a web page without images is hard to read. Images not only help to improve user experience, they make tutorials easier to understand and products more enticing for customers. If you have a website, chances are that it includes a lot of images.
But do those images have ALT tags (a.k.a. attributes) for SEO?
I’ll explain the “What, Where, Why and How” when it comes to image ALT tags. The “What” and “Where” sections are a tiny bit technical, but will help you understand these seemingly unimportant attributes. Then the “Why” and “How” will convince you that an image and its “ALT” tag go hand-in-hand. If you add an image to a website, you should add an ALT tag too.
First, the word ALT tag is commonly used, though the correct terminology is alt text, alt attribute or alt description. I will use them all in this tutorial. You can decide which one is right for you. To understand them better, you have to understand a little bit of HTML. Let’s get started with “What” and “Where.”
## (1) WHAT…
### What is an image ALT tag?
Image ALT tags are short descriptions that can be assigned to images in a web page. They are used in HTML code to describe the appearance and function of an image.
#### How HTML helps you see Images in a Web Browser
HTML defines the structure and layout of a web page by using tags and attributes. Web designers use a lot of elements with tags and attributes to make up one page. (They can be seen in the source code of a page.) Curious? See 
**The HTML `<img>` element embeds an image into the document.**
This markup tells a web browser how to display that image. Images are not actually inserted into an HTML page. The! tag creates a holding space for the image. When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page.
The browser needs an **image file with a name** to find the image or you will see a broken link.
**EXAMPLE: my-red-train.gif**
#### What is an Image File Name?
The image file name is the name you give an image on your computer before you upload it to your website. You should describe your image in 3-8 words, use hyphens in between and include relevant keywords for SEO.
Example: “my-red-train.gif” is better than “IMG6344376.gif”
### <src>, <alt> and <title>attributes
HTML elements have attributes.  <img> attributes provide **information** about the image. This information is usually surrounded by quotes. It is the “value” of that attribute.
#### <src> attribute
The **<src>** attribute tells the browser where an image is located. It is a **required** attribute for an image.
#### <ALT> and <title> attributes
The **<ALT>** and **<title>** attributes are not required. But not including the **<ALT>** tag  is an **SEO mistake**. You’ll see why in a moment.
## (2) Where…
### Where exactly is the ALT attribute located?
The **<ALT>** attribute is contained in the **<img>** element’s tag along with the **<src>** attribute.
**EXAMPLE:** <img src=”my-red-train.gif” alt=“modern red train”>.
The **<ALT>** attribute has a value of “modern red train.” This information describes the train, but should also relate it to the web page. Image alt text, such as this, is source code information that most visitors will never see. I’ll explain more in a moment.
**Common question:** When I add an image ALT  tag to a web page, I cannot see the text when I scroll over the image.  I don’t understand this. Could you please help?
Some people may be confused about the difference between alt text and the image title text attribute. They serve different purposes. We’ll compare them below.
## (3) Why…
### Why should I include ALT attributes (tags)?
#### Image Alt attributes were first designed for users of screen readers.
Image ALT descriptions can help visually impaired visitors understand images on a web page, even if they can’t see them. This “eye-opening” tutorial explains the usefulness of ALT text from the perspective of a web developer with vision impairment who uses a screen reader every day: . It’s worth reading!
#### Image ALT tags are also good for search engine optimization (SEO).
Image ALT tags help search engines associate images with a web page ‘s content so they can not only understand them, but also properly index them in their search results pages. Search engine crawlers may be able to pick out basic image colors and shapes, but not much more. When a search engine crawls your page, it won’t “see” your images the way you do.
If you’re uploading a balloon image, you will help Google, Bing and other search engines by explaining what kind of balloon you’re adding to your page. Also, what is its purpose? Do you sell balloons? Do you provide hot air balloon rides at your business? Are you using balloons as an example in your blog post about image ALT tags and SEO? Your ALT descriptions would be different based on how your image relates to your web page.
Besides choosing a good image file name, adding ALT text to your images is one of the best things you can do for , which is a key component of   (SEO).
#### How can I see the image ALT tags on a web page?
In web browsers such as Firefox, the ALT text is displayed only when an image is broken or when all images have been disabled. You won’t see them unless you have broken image links, disabled images, a screen reader or if you’re a search engine bot.
* If you see the image, you shouldn’t see the ALT description.
* If you can’t see the image, you should be able to read the ALT description.
### ALT tags versus Title tags
Google Chrome, Firefox and most other browsers do not display the ALT tag when hovering over an image. The title tag is opposite. It appears as a tooltip (in most browsers) when someone hovers over an image and won’t appear if the image doesn’t. Title tags are designed for people. They should should be short and relevant.
**EXAMPLE:** <img **alt**=“red train example for tutorial” **title**=“red train example” **src**=””>
1. **src=“red-train-example.gif”** is the image file (or source).
2. **alt=“red train example for HTML tutorial”** is the image’s ALT text.
3. **title=“red train example”** is the image title.
## (4) HOW…
### How to Write Useful ALT attribute descriptions
When writing alt attribute descriptions,  you should describe an image in a way that is specific but also represents the topic of the page. ALT tags should not be full sentences or paragraphs and should not include special characters.  They should have a limit of about 125 characters. Consider 10 words or less. If you have a company logo, then ALT text should include your actual company name instead of  “company logo.” ALT tags are a great place to put one or two related keywords. Keyword stuffing, though, should be avoided.
**Keyword Stuffing Example:**
<img src=”my-red-train.gif“ alt=”red train, train ride, train caboose, train cars and caboose”/>
### How to Include ALT attributes in a Web Page
If you’re using WordPress or a similar platform, you should be able to add an image ALT and title description right after you upload an image. You can also click on an image in the body of a blog post to see a dialog box, where you can create and change the image’s alt text. You can also do this through the image edit screen in your Media Library.
If you have a static website created by a web designer or web development company, ALT text has probably been added to all of your images. But you can double check with this helpful  If you’ve designed your own website, now’s the time to check all your images for these important attributes.
**Conclusion**
Adding  ALT tags to images improves accessibility and user experience. It also provides greater relevance to search engines about your website content which will help drive traffic to your site.
Pin
### Related posts:
1. 
2. 
3. 
4. 
### Recent Posts
### Social Media
|  |  |  |
| --- | --- | --- |
### Categories
*  (4)
*  (8)
*  (16)
*  (5)
*  (34)
*  (6)
*  (23)
*  (11)
#### 
#### PHONE: (207) 684-3233
####  
Copyright © 2025 
 |  |
Last updated on May 25th, 2023
### See your website through the eyes of a mobile device user
### Are you a small business owner with a restaurant website?
Many customers will visit your restaurant for the first time today. You plan to offer them warm hospitality, exceptional service and a menu with organic and locally grown produce. But did you realize that many mobile device users will also visit you for the very first time today – through your website?
Have you considered what their experience might be like?  It might go something like this:
**Let me introduce myself.** I am a  mobile device user and I am just about to visit your website.  I heard that you make special accommodations for your **gluten-sensitive** and **vegetarian customers,** so I am hoping that your website will accommodate mobile device users like me.
In town for an appointment, I’m going to first grab some lunch, maybe a ham grinder with provolone cheese. But the glare from the midday sun makes it difficult to see my **cell phone screen**. I am searching for a restaurant downtown and spot your listing. **I  tap on your link.**
Notice that I said tap and not click. That’s because I don’t have a **computer mouse.** I can’t click. So I must tap on the screen. That’s a no-brainer… I know. But have you really thought about how hard it can be to get around a website without the ease of a mouse?
**One second. Two seconds. Three seconds.** Still waiting for your website to come up. My cell phone is much slower than my home computer. **Four seconds. Five seconds. Six seconds.** Ah there we go. **Seven seconds.**
I see a miniature version of your website on my tiny screen. It’s a big disappointment!
Your website is not mobile friendly. I will have to pinch and zoom with my fingertips to read your lunch menu.  I’m also fumbling with your navigation buttons. They are so small.  I can’t tap them accurately.
Hmmm. Maybe I’ll call instead. I am checking for a phone number.
That should be easy enough to find. Or maybe not.
So onto the next restaurant I go. **One second. Two seconds. Three seconds.** I’m in. Excellent. I can read the screen, tap the buttons and find my way to the MENU. Great. There’s the ham and salami grinder I want with fresh baked bread, secret sauce, cheese, tomatoes, lettuce and olive oil.
And look… I can make a reservation from my phone. This is so easy. I am on my way right now. They are waiting for me.
Unfortunately, you lost a customer today without even knowing it. You didn’t even get the chance to offer me your exceptional service or locally grown produce. Luckily, your gluten-free customer comes in often. You are happy to accommodate his special needs. But there will be more visitors like me in the near future.
Imagine the day when more mobile device users visit your restaurant website than desktop computer users. That day is coming. Visitors to a **mobile unfriendly website** will simply leave for a competitor’s website. That means decreased sales for your restaurant if you haven’t embraced mobile.
So hopefully, the next time you see someone on the sidewalk grab their smart phone or iPad, you will recognize them as a potential customer. You will be ready to greet them with a **mobile friendly restaurant website,** accommodate their special needs and provide them a nice hearty lunch.
**Sincerely, A Mobile Device User**