Image Metadata

Optimize image alt text, filenames, responsive sources, dimensions, loading priority, social images, and file metadata.

Use an actual <img> element for meaningful images. Crawlers do not treat a CSS background image as an equivalent content image. Responsive <picture> and srcset markup should retain a useful src fallback.

Field or attribute	Purpose	Best practice
alt	Provides an accessible text alternative and image context.	Describe the image's relevant subject and function in context. Use alt="" for decorative images; never stuff keywords.
src	Provides the default image URL.	Use a stable, crawlable URL and a short, descriptive filename such as remote-recording-setup.jpg.
srcset / sizes	Offers responsive image candidates and display sizes.	Serve appropriately sized derivatives while preserving the src fallback.
width / height	Declares intrinsic dimensions.	Reserve layout space and prevent avoidable layout shift.
loading	Controls native lazy loading.	Use lazy below the fold. Do not lazy-load the primary above-the-fold or LCP image.
fetchpriority	Hints the relative fetch priority.	Use high sparingly for the true LCP image, not for every image on the page.
decoding	Hints image decode behavior.	Use async when it helps avoid blocking presentation; it does not replace proper sizing and compression.
figcaption	Adds visible context near the image.	Explain information that is useful to a reader; do not merely repeat the alt text.
image / primaryImageOfPage	Associates a representative ImageObject or URL with the page.	Choose a relevant, high-resolution image and connect it to the page or primary creative work.
og:image	Selects a social sharing image.	Use an absolute URL, a representative design, and explicit dimensions. A 1200×630 image is a common large-preview baseline.
EXIF / IPTC	Stores file-level camera, rights, and descriptive metadata.	Preserve rights information where appropriate, but do not treat embedded fields as a replacement for alt text or page copy. Remove sensitive location data.

<figure>
  <img
    src="/media/remote-recording-setup-800.jpg"
    srcset="
      /media/remote-recording-setup-480.jpg   480w,
      /media/remote-recording-setup-800.jpg   800w,
      /media/remote-recording-setup-1600.jpg 1600w
    "
    sizes="(max-width: 768px) 100vw, 800px"
    width="1600"
    height="900"
    alt="A speaker facing a window with an eye-level camera and a nearby microphone"
    loading="lazy"
    decoding="async"
  />
  <figcaption>
    An eye-level camera, front lighting, and a close microphone improve a remote
    recording.
  </figcaption>
</figure>

The title attribute is not a substitute for alt. Likewise, a filename can provide context but cannot make an inaccessible or irrelevant image useful.

800wSelected responsive source

480w

800w

1600w

Viewport 800px

src="recording-800.jpg"
srcset="recording-480.jpg 480w,
        recording-800.jpg 800w,
        recording-1600.jpg 1600w"
loading="lazy"

At a 800px display width, the browser chooses the 800w candidate. Below the fold: lazy loading is appropriate.