What is Image Attribute
The alt attribute provides alternative information for an image if a user is unable to view it (due to a slow connection).”An image alt can be read by a screen reader for better web accessibility and usability. Image alt can be read by a search engine to understand the role, purpose, and meaning of the image. This attribute gives a text description that can be shown instead of the image. Alt text helps visually blind people understand what the image depicts, search engine bots understand image contents, and appears on a page when an image fails to load.
Image Caption
Image Caption is a small text below the image, A photo caption or image caption is a written description that sits directly underneath an image. This image can be a photo, drawing, diagram, piece of art, or anything else rendered in an image file format.
Image Title
The “Image Title” is a small pop-up message that appears when your mouse moves over a picture on a website. It provides additional information about the image, such as its title and subject matter. This feature is not part of the basic HTML language, but it is frequently added by web designers.
The difference between image title and the image alt is mainly for web accessibility, screen readers, and search engines while image titles are for the users.
Importance of ALT (Attributes) in images
The attribute is useful for screen readers. So, disabled users of your website, who are blind, will be able to see the images below even with the use of screen readers.
When the image cannot be loaded (due to a slow connection) on your website, the user will be able to determine what image is displayed here through text.
Alt tags provide context for what an image displays, informing search engine crawlers and allowing them to properly index an image. However, not only do alt tags help search engine crawlers, but failing to include alt tags for your images can have a negative impact on the ranking of your web pages.
The Dos, Don’ts and Common Mistakes of Crafting Effective Image Attributes
Examples of Right Way To Write Image Attribute
Example 1
Bad: Best dentist in Thane, Mumbai (short, inaccurate, & keywords)
Good: Dentist treating a patient on chair
Better: Male dentist doing procedure on female patient resting on orthodontic dental chair
Best: Male dentist in Thane, Mumbai doing root canal procedure on female patient resting on orthodontic chair
Example 2
Bad: Best cotton shirts with free shipping
Good: 5 people taking selfie from a phone on green background
Better: Mixed group of 5 smiling people in front of the green wall. 1 male taking a selfie with a smartphone.
Best: Group of 5 smiling people wearing cotton shirts taking selfie in front of green wall
Example 3
Bad: Best plumber in kolkata working at home
Good: Plumber working under the sink
Better: Young male plumber lying down under the sink and fixing using tools
Best: Young male plumber in Kolkata lying down under the sink and fixing using tools
Example 4
Bad: Real estate developer in Delhi
Good: Graphic of home placed in the hand
Better: Computer generated graphic in which replica of home and tree are on the palm of a person
Best: Computer graphic, palm having replica of home and tree on it, showing real estate in Delhi
