Home / SEO Standards / Images

Image Standards

Last Edited: 2026-06-29 01:32

• Source: Google Web Vitals Guidelines (web.dev/optimize-cls & web.dev/optimize-lcp).

Image Sizing & Layout Attributes

The dimensions and layout configurations used to reserve page space for visual elements.

• Input: HTML direct width or height attributes, and the CSS aspect-ratio property.
• Standards:
  1. Layout Stability (CLS Concept): To prevent layout shifts, always declare at least 1 dimension (width or height as an HTML attribute) and pair it with a CSS aspect-ratio to reserve space before the asset loads.
     • Example: <img src="hero.jpg" width="600" style="aspect-ratio: 2/1;" alt="...">
  2. Image Sizing (30% Rule): If the intrinsic dimensions of the source image file exceed 30% of its rendered display size, a resized version must be generated to match the target display size exactly.

Image Alt Text

The text description of an image used by screen readers and search bots.

• Input: The alt="..." attribute on the <img> tag.
• Standards:
  1. Contextual Alt Text: Descriptions must be literal, professional, and contain relevant local keywords.
     • Example: {#COMPANYABBVCOMPANY} technician installing a heat pump in {#SEOCITY1RAW}.
  2. Link Anchor crawling (Concept): If an image is enclosed in a link (<a><img ...></a>), search engines crawl the alt text as the link's anchor text. The alt description must explain the destination page. (Ref: Links#Anchor Text & Aria-Labels).
  3. Decorative Graphics: Decorative assets (dividers, icons) must use a blank alt attribute (alt="") so search engines and screen readers skip them.

Loading & Performance Attributes

The properties used to control when and how images are fetched from the server.

• Input: HTML attributes loading="lazy", fetchpriority="high", and image compression parameters.
• Standards:
  1. Loading Prioritization (LCP Concept): For above-the-fold assets, set loading="eager" and use fetchpriority="high" to accelerate Largest Contentful Paint (LCP) (Ref: Core_Web_Vitals#Largest Contentful Paint (LCP) Inputs).
  2. Lazy Loading: Set loading="lazy" on all below-the-fold images to conserve bandwidth and speed up initial page load times.
  3. Compression Parameters: Append dynamic resizing properties (e.g. &width=300) on dynamic image servers where supported.