Optimized images: direct impact on indexing and AI Search

1. Using Media and Images
2. The Alt Tag
3. Image Weight
4. Width and Height Attributes
5. The Fig Caption
6. Implementing Lazy-Loading
7. Non-Duplication of Images

‍1. Using Images on the Page

Media, especially images, are essential visual elements that enrich the content of a web page and improve the user experience. For GEO, images can provide important visual context to generative AI engines, complementing textual content.

Make sure the page contains relevant images that illustrate the content.

2. The Alt Tag

The alt tag (alternative text) is an HTML attribute that provides a textual description of an image. It is crucial for web accessibility, allowing screen readers to describe the image to visually impaired users. For SEO and GEO, it helps search engines understand the image's content and its context within the page.

Make sure that at least 80% of the images on the page have a descriptive alt tag.

This alternative text (alt) should be descriptive and useful, providing accurate context for the image. It's not just keywords, but a description that makes sense to both the user and search engines.

‍3. Image Weight

Image weight has a direct impact on page loading speed. Images that are too large can significantly slow down loading times, which is detrimental to user experience and SEO rankings. AI engines value fast sites.

• Recommendation : The images used should not be too large. Ideally, an image should not exceed 500kb.
• Optimization: Use modern image formats (WebP, AVIF), compress images without significant loss of quality, and adapt their dimensions to the display.

4. Width and Height Attributes

Specifying the width and height attributes for images in the HTML code allows the browser to reserve the necessary space before the image is even loaded. This prevents Cumulative Layout Shift (CLS), an important factor for user experience and Google's Core Web Vitals. Ensure all <img> tags include the width and height attributes.

5. Caption on Important Images (figcaption tag)

Image captions (<figcaption>) provide additional context for images, improving comprehension for both users and search engines. They are particularly useful for images that provide key information or require explanation.

For important images or those that convey crucial information, use the <figcaption> tag in conjunction with the <figure> tag to associate a descriptive caption with the image. This enriches the semantic content of the page.

6. Implementing lazy loading (loading="lazy")

Lazy loading is a technique that delays the loading of images (or other resources) until they are needed, i.e., when they enter the user's viewport. This significantly improves the initial page load speed.

Make sure lazy loading is implemented for non-critical images (those not in the initial viewport). The loading="lazy" attribute is the native and recommended method for this.

7. Avoiding Image Duplication

Image duplication, using the same image with different URLs or unnecessary copies, can lead to wasted bandwidth and indexing issues for search engines.

Avoid unnecessary image duplication. Use duplication detection tools if necessary. If an image is used in multiple places, ensure it is served from a single canonical URL.

‍Resources & useful links

• Google Search Central
• Mozilla Developer Network (MDN) - Responsive images