SSI – Einheitlicher Standard für Bilder

Definitionen

SSI legt Anforderungen an Bildformate, Textalternativen, Abmessungen und das Laden von Bildern in Weboberflächen fest.

Struktur und Semantik

Bildformate

SVG

• Kleine statische Icons, die sich in das Interface einfügen und mitgestalten lassen, können inline als SVG eingebunden werden. In Tailwind-Projekten verhindert shrink-0, dass ein Icon in einem Flex- oder Grid-Container schrumpft. Mit currentColor übernimmt es die Textfarbe:

  <svg
    class="shrink-0"
    fill="none"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
  >
    <path d="M12 2L..." fill="currentColor" />
  </svg>

• Aussagekräftige SVGs, ob statisch oder über eine Admin-Oberfläche verwaltet, werden mit <img> oder next/image eingebunden und erhalten einen passenden alt-Text. Als separate Ressource kann das SVG außerdem vom Browser zwischengespeichert werden.

• Inline-SVGs, die nur der Dekoration dienen oder eine sichtbare Beschriftung wiederholen, sind mit aria-hidden="true" für Screenreader auszublenden. Eigenständig aussagekräftige SVGs erhalten role="img" sowie über <title> und aria-labelledby einen zugänglichen Namen.

• Ungeprüfte SVGs aus einer Admin-Oberfläche dürfen nicht als Markup in das DOM eingefügt werden. Wenn ein SVG inline eingebunden werden muss, ist es über eine vertrauenswürdige Bereinigung zu verarbeiten. Bei der Verwendung als Bild schränken Browser aktive Inhalte ein; das ersetzt jedoch keine Prüfung hochgeladener Dateien.

Rasterbilder

• Ausgangsbild und Ausgabeformate sollten zur Zielumgebung passen. Für die Auslieferung können WebP oder AVIF verwendet werden. Bei manueller Formatauswahl ist ein JPEG/PNG-Fallback über <picture> vorzusehen, sofern es von den unterstützten Browsern benötigt wird.

• Für alle Bilder dieselbe Komprimierungsqualität festzulegen ist ungeeignet. Die Qualität richtet sich nach visueller Prüfung und Dateigröße.

  <picture>
    <source srcset="/images/photo.avif" type="image/avif" />
    <source srcset="/images/photo.webp" type="image/webp" />
    <img
      src="/images/photo.jpg"
      width="1600"
      height="1067"
      alt="Ein Fahrrad an einer Backsteinwand"
    />
  </picture>

Bei Next.js Image Optimization werden Ausgabeformate in Next.js konfiguriert. Die Komponente next/image erzeugt responsive Varianten über srcset. <source>-Elemente innerhalb von <picture> werden separat verwendet, wenn unterschiedliche Dateien oder Art Direction erforderlich sind.

Textalternativen

• Aussagekräftige Bilder erhalten einen knappen alt-Text, der ihre Bedeutung im Kontext der Seite vermittelt. Allgemeine Beschreibungen wie „Foto“ und Wiederholungen des benachbarten Textes sind zu vermeiden.

• Dekorative Bilder erhalten einen leeren alt-Text, also alt="". Das Attribut darf nicht entfallen, da ein Screenreader sonst den Dateinamen vorlesen kann.

• Ist ein Bild der einzige Inhalt eines Links oder Buttons, muss sein alt-Text den Zweck des Links oder die Aktion des Buttons vermitteln.

• Buttons ohne sichtbaren Text benötigen einen zugänglichen Namen, zum Beispiel über eine sichtbare Beschriftung oder aria-label. Ein SVG-Icon allein benennt das Bedienelement nicht.

• Bei Diagrammen, Schaubildern und anderen komplexen Bildern müssen wichtige Daten auch in einer zugänglichen Textform bereitgestellt werden.

• <figure> und <figcaption> kommen zum Einsatz, wenn ein Bild eine sichtbare Bildunterschrift benötigt.

  <figure>
    <img
      src="/images/photo.webp"
      width="1200"
      height="800"
      alt="Ein Fahrrad an einer Backsteinwand"
    />
    <figcaption>Die Werkstatt nimmt Fahrräder nach vorheriger Terminvereinbarung zur Reparatur an.</figcaption>
  </figure>

Abmessungen und responsive Darstellung

Die Attribute width und height geben die intrinsischen Abmessungen eines Bildes an. Der Browser verwendet ihr Seitenverhältnis, um vor dem Laden Platz zu reservieren und Layoutverschiebungen (Cumulative Layout Shift, CLS) zu verringern. Die tatsächliche Darstellungsgröße wird durch CSS festgelegt.

object-cover eignet sich, wenn ein Bild den Bereich durch Zuschneiden ausfüllen soll. Bei fill benötigt der Container Positionierung und Abmessungen, zum Beispiel position: relative und aspect-ratio. Beim Zuschnitt dürfen keine wichtigen Details verloren gehen.

Der Wert von sizes muss der Bildbreite im Layout entsprechen. Er hilft dem Browser, eine passende Ressource aus srcset auszuwählen; sizes erzeugt selbst keine Bildvarianten. In einfachem HTML muss es zusammen mit srcset verwendet werden:

<img
  src="/images/photo-960.webp"
  srcset="
    /images/photo-480.webp 480w,
    /images/photo-960.webp 960w,
    /images/photo-1600.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="Ein Fahrrad an einer Backsteinwand"
  loading="lazy"
/>

Auch responsive Styles in next/image benötigen einen passenden sizes-Wert. Bei fill ist er erforderlich, und das übergeordnete Element muss den Bildbereich definieren:

<div className="relative aspect-[3/2]">
  <Image
    src="/images/photo.webp"
    alt="Ein Fahrrad an einer Backsteinwand"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

Barrierefreiheit und Performance

Bildoptimierung

• Die Auflösung ist auf die größte tatsächliche Darstellungsgröße und die Pixeldichte der Zielgeräte abzustimmen. Eine wesentlich größere Quelldatei sollte nur bei Bedarf geladen werden.
• Dateigröße und Komprimierungsqualität sind für jedes Bild festzulegen. Ein allgemeines Limit von 500 KB oder eine WebP-Qualität von 90 % gibt es nicht: Ein Foto, ein transparentes Icon und ein großes Hero-Bild benötigen unterschiedliche Einstellungen.
• TinyPNG und ähnliche Dienste können bei der Optimierung helfen. Nach der Komprimierung sind Bildqualität und tatsächliche Dateigröße zu prüfen.
• Für Bilder aus externem Speicher oder einem CDN ist ein geeignetes Caching einzurichten. Formate, Abmessungen und Cache-Header müssen ebenfalls separat konfiguriert werden.

Laden von Bildern

• Bilder außerhalb des initialen Viewports können mit loading="lazy" verzögert geladen werden.
• Das Laden eines Bildes, das zum Largest Contentful Paint (LCP) gehört oder sofort sichtbar sein muss, ist nicht zu verzögern. Für ein bestätigtes kritisches Bild ist loading="eager" geeignet; fetchPriority="high" kommt bei entsprechender Messung infrage.
• Eine hohe Priorität ist auf wenige Bilder zu beschränken, damit sie nicht unnötig um Netzwerkressourcen konkurrieren.
• Ein natives <img> wird standardmäßig eager geladen. loading="lazy" muss ausdrücklich gesetzt werden; der Browser beginnt mit dem Laden, wenn sich das Bild dem Viewport nähert.
• next/image verwendet standardmäßig Lazy Loading, sofern es nicht überschrieben wird. Bei kritischen Bildern sind das gerenderte Markup und die Komponenteneinstellungen zu prüfen.

Dateiorganisation

Statische Dateien können nach ihrem Zweck gruppiert werden. Bilder, die über ein CMS verwaltet werden, verbleiben in der Regel im CMS oder im angebundenen Speicher.

public/
  ├─ icons/                 # Statische SVG-Dateien für <img>
  └─ images/                # Statische Rasterbilder

src/
  └─ shared/
    └─ icons/               # Wiederverwendbare SVG-Komponenten

Prüfung

Die Prüfung mit Lighthouse und den DevTools des Browsers umfasst:

• aussagekräftige Bilder haben einen zutreffenden alt-Text, dekorative Bilder verwenden alt="";
• width und height oder ein festgelegtes Seitenverhältnis reservieren vor dem Laden Platz;
• responsive Bilder erhalten einen geeigneten srcset-Kandidaten, und sizes entspricht dem tatsächlichen Layout;
• nur notwendige Bilder erhalten eine hohe Priorität, und Bilder unterhalb des Viewports konkurrieren nicht mit dem initialen Viewport;
• Zuschnitt, Qualität, Caching und CLS wurden bei üblichen Viewportgrößen geprüft.

Abschließende Beispiele

Aussagekräftiges Bild mit reserviertem Seitenverhältnis:

<img
  src="/images/photo.webp"
  width="1200"
  height="800"
  alt="Ein Fahrrad an einer Backsteinwand"
  loading="lazy"
/>

Aussagekräftiges SVG als separate Ressource:

<img src="/icons/user.svg" width="24" height="24" alt="Benutzerprofil" />

Responsives Bild mit mehreren Quellen:

<img
  src="/images/photo-960.webp"
  srcset="/images/photo-480.webp 480w, /images/photo-960.webp 960w, /images/photo-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="Ein Fahrrad an einer Backsteinwand"
  loading="lazy"
/>

Kritisches Bild im initialen Viewport:

<Image
  src="/images/hero.webp"
  width={1600}
  height={900}
  alt="Eine Fahrradwerkstatt mit einer Werkbank am Fenster"
  loading="eager"
  fetchPriority="high"
  sizes="(max-width: 768px) 100vw, 50vw"
/>