Absolute Image URL
<img src="https://example.com/images/product.jpg"
alt="Product shown from the front">Absolute URLs are useful when referencing images hosted on another domain or a dedicated image service.
Important Considerations
- Use the correct filename and directory.
- Check capitalization because many web servers use case-sensitive paths.
- Use valid URLs and avoid accidental spaces or incorrect extensions.
- Ensure the resource is accessible to the browser.
- Remember that a relative image URL is resolved against the document's base URL, which can be affected by the base element.
4. Understanding the alt Attribute
The alt attribute supplies alternative text for an image. This text can communicate the image's relevant information when the image cannot be seen or when a user relies on assistive technology.
Alternative text is particularly important for people who use screen readers and for situations where an image fails to load.
Example: Informative Image
<img src="images/team.jpg"
alt="The Codementrix development team at a workshop">The alternative text communicates the relevant content rather than merely stating that the image is a photograph.
Example: Product Image
<img src="images/black-backpack.jpg"
alt="Black backpack with two front pockets">For a product page, relevant visual details may help a customer distinguish between similar products.
How to Write Good Alternative Text
- Describe the information the image contributes to the page.
- Keep the description concise and specific.
- Consider the surrounding text and purpose of the image.
- Avoid repeating information that is already clearly provided nearby.
- Do not begin every description with "Image of" or "Picture of" unnecessarily.
- Do not stuff alternative text with SEO keywords.
5. Informative, Decorative and Functional Images
The correct alternative text depends on the role of the image, not only on what it looks like.
A. Informative Images
An informative image communicates information that is important to understanding the page.
<img src="images/server-architecture.png"
alt="The browser sends requests to the application server, which retrieves data from the database">For a complex architecture diagram, a concise alt description can be supplemented with a complete explanation in the surrounding text.
B. Decorative Images
A decorative image adds visual decoration but does not provide additional information. Use an empty alt attribute for such images.