Title and Alt attributes

Title and Alt attributes help both users and search engines to better understand what the image depicts.

Attribute alt

Purpose: The main purpose of the alt (alternative text) attribute is to provide accessibility. It is used so that visually impaired users can understand what is shown in the image using screen readers. This text is also displayed in case the image fails to load.

Examples:

  • Product Image: <img src="product.jpg" alt="Classic leather bag in black color">
  • Icon: <img src="icon.png" alt="Settings icon">
  • Photo on the blog: <img src="beach.jpg" alt="Sandy beach with palm trees and ocean at sunset">

Recommendations:

  • Be descriptive and specific.
  • Use keywords if appropriate, but avoid over-spamming.

Attribute title

Purpose: The title attribute provides additional information about the image when the cursor hovers over it. This is optional, but can add context or additional information.

Examples:

  • Product Image: <img src="product.jpg" alt="Classic leather bag in black color" title="This bag is made of high quality leather and is perfect for business meetings">
  • Icon: <img src="icon.png" alt="Settings icon" title="Account settings">
  • Photo on the blog: <img src="beach.jpg" alt="Sandy beach with palm trees and ocean at sunset" title="Photo of a popular tourist spot">

Recommendations:

  • Use the title attribute to add additional detail or context.
  • Don’t repeat alt information in the title unless you need to.
				
					<img decoding="async" src="https://foxtype.eu/wp-content/uploads/2024/08/placeholder-2.png" 
     alt="A breathtaking view of a mountain lake with glacial peaks" 
     title="This photo was taken during a hike in the mountains in August 2024">

				
			

Useful articles