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.

Using Alt Text in Asset Manager

You can manually add and save alt text to images indexed by the Asset Manager. Once added, the alt text will be associated with the image and can be accessed either by the Asset Manager UI or by calling the Management API, which will return the alt text data in the response.

Alt text manual entry

Generating Alt Text With imgix

Premium Feature

Automatic alt text generation is available for imgix customers on our Premium plans. Please contact our Support team or your account manager to get access to this feature.

For premium users, we automatically tag images in the Asset Manager with descriptive alt text using AI-driven algorithms.

To enable this feature on your premium account, please contact our Support team.

Alt texts are seamlessly integrated with any new assets indexed by the Asset Manager, and can be overriden and/or restored in the Asset Manager UI.

Note that automatic alternative text is only generated for newly indexed assets and not for existing assets in the Asset Manager. To generate alt text for existing assets, you can use the refreh asset feature either in the Asset Manager UI or through the Management API.

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",
      "alt_text_predictions": {
        "en": {
          "confidence": 1,
          "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.