Getting Started
Performance & Metadata
Enhancing SEO With Alt Text Generation

Enhancing SEO With Alt Text Generation

In today's digital landscape, accessibility and search engine optimization (SEO) are paramount considerations for website owners and developers. Alt text, or alternative text, plays a crucial role by providing descriptive information about images to users with visual impairments and search engines.

What is Alt Text?

Alt text are HTML elements used to describe an image's content. It serves as a textual alternative to images and is typically used when an image fails to load or for users who rely on screen readers to navigate the web.

Importance of Alt Text

  1. Accessibility: Alt text ensures that users with visual impairments can understand the content and context of images on a web page.
  2. SEO: Search engines rely on alt text to understand the subject matter of images, which can improve the visibility of a web page in search results.

Best Practices for Writing Alt Text

  1. Be Descriptive: Provide a clear and accurate description of the image's content and purpose.
  2. Keep it Concise: Aim for brief but informative alt text that conveys the essential information.
  3. Avoid Keyword Stuffing: While including relevant keywords is essential, avoid overloading alt text with unnecessary keywords.
  4. Decorative Images: For decorative images that don't convey meaningful content, use empty alt text (alt="") to indicate to screen readers that the image can be ignored.
  5. Context Matters: Consider the context of the image and its surrounding content when writing alt text.

Generating Alt Text With imgix

Note: Alt text generation is a Premium Feature. Please contact our Support team or your account manager to get access to this feature.

When the alt text feature is enabled for your account, we automatically tag images in the Asset Manager with descriptive alt text using AI-driven algorithms.

Alt texts are seamlessly integrated with all newly added Assets. You can read more about how assets are added to the Asset Manager here.

Once an asset is added to the Asset Manager, we will automatically generate alt text. Please refer to the screenshot below for an example of an asset with its corresponding alt text.

Alternate text example

Automatic alternative text requirements

To ensure automatic generation of alternative text for images, certain prerequisites must be met:

  1. File Format Compatibility:
    • Images must be in either JPEG or PNG format to enable automatic alternative text generation.
  2. File Size Limitation:
    • Uploaded images must adhere to a maximum file size of 10 MB to qualify for automatic alternative text generation.

Retrieving Alt Text Using the Management API

After an image has been successfully added to the Asset Manager, you can programmatically add alt text data using our Management API

By using the asset endpoints, you can retrieve the alt text data through the predictions property. Below, we provide an example response sent from the Management API for a single asset:

GET https://api.imgix.com/api/v1/assets/66204a3643a0860f8a6151a8/red-fox.jpeg
{ "data": { "attributes": { ... "origin_path": "/red-fox.jpeg", "predictions": {
"alt-text": [ "a fox laying down in the snow with its eyes closed" ] },
"source_id": "66204a3643a0860f8a6151a8", ... }, "id":
"66204a3643a0860f8a6151a8/red-fox.jpeg", "type": "assets" }, ... }

Using Alt Text Generated With imgix

To use alt text, include the alt attribute within the <img> tag of an HTML page and set its value to a brief description of the image. For example:

<img
  src="/red-fox.jpeg"
  alt="A fox laying down in the snow with its eyes closed"
/>

This ensures that all users, regardless of their ability to see images, can understand the content and context of your web page.

Summary

Alt text is a fundamental component of web accessibility and SEO. By following best practices and providing descriptive alt text for images, website owners can ensure their content is accessible to all users and optimized for search engines.