Inline-Bilder: Regeln und Beispiele

Ein Inline-Bild ist ein einzelnes Bild, das in den Lesefluss eingefügt wird, um den unmittelbar umgebenden Punkt zu verdeutlichen oder zu belegen. Es ist keine Galerie, kein Werbepanel und kein Ersatz für Text. Fragen Sie sich, was der Leser nach dem Betrachten verstehen oder überprüfen kann, das die umgebenden Wörter nicht ebenso effizient vermitteln.

Die gekerbte Aussparung verhindert, dass der Stecker in der falschen Ausrichtung in die Buchse eingeführt wird.

Das gerenderte Element oben gehört unmittelbar nach einen Absatz, der den Leser auffordert, die Steckerausrichtung zu überprüfen. Der Bildausschnitt macht die Kerbe sichtbar, die Bildunterschrift gibt ihre Bedeutung an, und die folgende Anweisung kann fortgesetzt werden, ohne dass der Leser eine große, nicht zusammenhängende Szene entschlüsseln muss.

Warum dieses Element wichtig ist

Leser wechseln zwischen Überfliegen und fokussierter Betrachtung. Ein gut platziertes Bild verwandelt eine abstrakte Beschreibung in eine erkennbare Form, zeigt Belege oder verringert den Aufwand, einen visuellen Zustand zu imaginieren. Die Platzierung impliziert, dass es den nahen Text erklärt. Wenn diese Beziehung schwach ist, betrachten die Leser es, finden keine zusätzliche Bedeutung und müssen ihre Leseposition wiederfinden.

Das relevante psychologische Prinzip ist die Signalisierung. Bildausschnitt, Bildunterschrift und umgebender Text lenken die Aufmerksamkeit auf das relevante Detail. Ein Foto einer gesamten Maschine ist schwach, wenn der Satz einen zwei Zentimeter großen Rastriegel betrifft. Ein fokussierter Ausschnitt dieses Riegels gibt dem Leser eine visuelle Frage zur Beantwortung. Das Bild benötigt keine Pfeile oder eingebetteten Text, wenn der Rahmen allein das Motiv offensichtlich machen kann.

Die maschinelle Extraktionsfähigkeit ist die Fähigkeit von Software, eine Einheit zu identifizieren und ihre Beziehung zur umgebenden Bedeutung zu bewahren. Ein semantisches <figure>-Element, das ein <img> und optional ein <figcaption> enthält, bietet Crawlern, assistiven Technologien, Migrationstools und KI-Abrufsystemen eine stabile Einheit. Der Alternativtext gibt an, was das Bild beiträgt; Abmessungen beschreiben seine Geometrie; eine Bildunterschrift macht Interpretation oder Herkunft außerhalb der Pixel sichtbar.

Maschinen dürfen keine Computer Vision benötigen, um eine wesentliche Anweisung, Zahl, Warnung oder Schlussfolgerung zu erfassen. Wenn ein Bild eine entscheidende Messung oder Bezeichnung enthält, wiederholen Sie diese Information im umgebenden Text oder verwenden Sie eine strukturierte Tabelle. Die Element-Schreibregeln steuern die gemeinsame Direktiv-Syntax, Quellpfade, Body-Zuordnung und Rangfolge. Diese Seite hat Vorrang für Entscheidungen zu Inline-Bild-Feldern, Größenanpassung, Laden, Bildunterschrift und Alternativtext.

Wann es verwendet werden soll

Verwenden Sie ein Inline-Bild, wenn ein visuelles Element direkt eine nahe Idee unterstützt und das Bild in der Breite der Lesespalte nützlich bleibt. Geeignete Aufgaben umfassen das Zeigen eines physischen Details, das Identifizieren eines Ortes oder Objekts, das Darstellen eines einfachen Vorher-Nachher-Zustands, das Liefern visueller Belege für einen getesteten Zustand oder das Demonstrieren des Erscheinungsbilds einer Ausgabe, die keine Annotationen erfordert.

Führen Sie drei Tests durch, bevor Sie es hinzufügen:

1. Beitragstest: Nennen Sie die neuen Informationen, Belege oder Erkennungen, die das Bild liefert.
2. Kontexttest: Identifizieren Sie den genauen Absatz, den das Bild unterstützt. Wenn drei Abschnitte gleichermaßen Anspruch darauf erheben könnten, ist sein Zweck wahrscheinlich zu breit gefasst.
3. Entfernungstest: Blenden Sie das Bild aus. Wenn nichts Sinnvolles verloren geht, markieren Sie es nur dann als dekorativ, wenn das Design es wirklich benötigt; andernfalls entfernen Sie es.

Beinahe-Fehler verursachen die meisten Fehlanwendungen. Verwenden Sie einen annotierten Screenshot, wenn Leser Steuerelemente finden oder mehrere nummerierte Bereiche zuordnen müssen. Verwenden Sie ein Diagramm, wenn der Inhalt eine Beziehung, Abfolge oder ein System und kein sichtbares Objekt ist. Verwenden Sie eine Galerie, wenn mehrere gleichrangige Bilder durchsucht werden müssen. Verwenden Sie eine Vergleichstabelle, wenn Unterschiede von wiederholten Kriterien abhängen. Verwenden Sie eine Imagebox, wenn ein Bild und eine umfangreiche Erklärung eine eigenständige zweispaltige Einheit bilden.

Fügen Sie kein generisches Stockfoto nur zur Textauflockerung ein. Ein Händedruck beweist keine Partnerschaft; ein Laptop erklärt keine Software; eine Glühbirne macht keine Idee klarer. Veröffentlichen Sie Text nicht als Bild, um Typografie zu erhalten. Verwenden Sie keinen Screenshot für Prosa, kein Diagramm ohne lesbare Werte und kein Bild, dessen Lizenz und Herkunft unbekannt sind.

Wo es platziert werden soll

Platzieren Sie das Bild unmittelbar nach dem Absatz, der einführt, was der Leser betrachten soll. Der Grund kommt zuerst, damit der Leser weiß, worauf er die Aufmerksamkeit richten soll. Folgen Sie der Abbildung nur dann mit Interpretation, wenn das Bild ein Beleg ist, dessen Konsequenz nicht offensichtlich ist. Setzen Sie es in einer Anleitung nach der relevanten Aktion und vor der Erfolgsprüfung; trennen Sie niemals einen Satz von seiner Qualifikation oder eine Anweisung von ihrer Warnung.

Ein Inline-Bild darf unter einer H2 stehen, wenn die Überschrift und der erste Absatz seinen Zweck begründen. Halten Sie Abbildung, Bildunterschrift und Quellenangabe über responsive Layouts und Seitenumbrüche hinweg zusammen.

Platzieren Sie es nicht innerhalb eines Absatzes, Listenelements, Tabellenzelle, Callouts, Akkordeons, klickbaren Cards oder eines anderen Medienelements. Setzen Sie keine zwei Inline-Bilder hintereinander: Kombinieren Sie echte Gleichrangige zu einer Galerie oder fügen Sie die Erklärung hinzu, die ihre Aufgaben unterscheidet. Es darf nicht neben einer dichten Tabelle, einem Video, einem Diagramm oder einem Call-to-Action stehen, bei dem beide Objekte um Aufmerksamkeit konkurrieren. Halten Sie mindestens einen sinnvollen Absatz zwischen separate Medieneinheiten, es sei denn, sie bilden einen explizit definierten Vergleich.

Verwenden Sie standardmäßig die normale Inhaltsbreite und eine schmalere Darstellung für kleine Objekte oder Hochformate. Verwenden Sie einen genehmigten breiten Mediencontainer nur, wenn Details sonst nicht lesbar sind; erzeugen Sie niemals horizontales Scrollen auf Seitenebene.

Anatomie

1. Figure-Umrandung: Gruppiert das Asset, die Bildunterschrift und die Quellenangabe als eine Einheit im Dokumentenfluss.
2. Bildquelle: Verweist auf ein genehmigtes, vorhandenes Asset und nicht auf einen entfernten Hotlink oder Platzhalter.
3. Alternativtext: Ersetzt die kontextuelle Funktion des Bildes für Leser, die es nicht wahrnehmen können; er ist nur bei Dekoration leer.
4. Intrinsische Abmessungen: Reservieren das korrekte Seitenverhältnis, bevor die Datei eintrifft, und verhindern Layoutverschiebungen.
5. Responsive Kandidaten: Lassen den Browser eine angemessen große Datei auswählen, anstatt die größte Quelle überall herunterzuladen.
6. Gerenderte Größe: Hält das relevante Detail lesbar, ohne Überlauf oder Hochskalierung einer schwachen Quelle.
7. Bildunterschrift: Fügt Interpretation, Identifikation, Datum, Maßstab oder Herkunft hinzu, wenn diese Information jedem Leser hilft.
8. Quellenangabe: Erfasst Urheber und Quelle, wenn Lizenzierung oder Redaktionspolitik dies erfordert.

Der Bilddateiname und der Alt-Text sind nicht austauschbar. Ein stabiler Dateiname hilft bei der Asset-Verwaltung; kontextueller Alt-Text erklärt den Zweck des Bildes in diesem Vorkommen. Dasselbe Foto kann daher unterschiedlichen Alt-Text haben, wenn es unterschiedliche Punkte unterstützt, obwohl die Wiederverwendung eines Bildes für nicht zusammenhängende Punkte ein Warnsignal ist.

Gestaltungsbeispiele

Das Element unterstützt drei semantische Varianten und zwei Breitenbehandlungen. Das Ladeverhalten ist keine visuelle Variante.

Informatives Bild, Inhaltsbreite

Dies ist der Standard. Das Bild liefert erkennbare Details oder Belege, verwendet nicht leeren Alt-Text und bleibt innerhalb des Lesecontainers.

Informatives Bild, breites Medium

Verwenden Sie den genehmigten breiten Container nur, wenn eine Karte, ein detailliertes Foto oder eine lesbare Ausgabe mehr horizontalen Platz benötigt. Der umgebende Text trägt weiterhin die Bedeutung, und die mobile Darstellung muss nutzbar bleiben.

Dekoratives Bild

Dekoration trägt keine einzigartigen Informationen, verwendet alt="", hat keine erklärende Bildunterschrift und sollte in redaktionellen Langforminhalten selten sein. Sie darf nicht der einzige Ausdruck von Stimmung, Status, Identität oder Ergebnis sein.

Detailbild mit optionaler Vergrößerung

Verwenden Sie die Vergrößerung nur, wenn die normale Inline-Darstellung den Kontext herstellt, feine Details jedoch eine größere Ansicht erfordern. Das Bild selbst bleibt ohne Aktivierung des Links verständlich, und der zugängliche Name des Steuerelements beschreibt die Aktion.

Verhalten bei schmalem Viewport

Jede Variante skaliert innerhalb des Viewports herunter, bewahrt das Seitenverhältnis und hält die Bildunterschrift bei. Wenn sinnvoller Text unlesbar wird, stellen Sie einen mobilen Bildausschnitt bereit oder ersetzen Sie das Bild durch strukturierten Text; das Erzwingen von Pinch-to-Zoom ist nicht die Standardlösung.

Parameter

Der Vertrag speichert redaktionelle und auslieferungsbezogene Entscheidungen. Rahmen, Schatten, Abstände und Breakpoint-Werte gehören zum Renderer.

Die Direktive hat kein Titel-Feld: Ein Inline-Bild gehört zum umgebenden Abschnitt, anstatt einen neuen Abschnitt zu erzeugen. Sein erster Body-Absatz wird auf caption abgebildet; keine erste Überschrift wird akzeptiert. Die Quellenangabe stammt aus vertrauenswürdigen Asset-Metadaten, sofern verfügbar, wodurch verhindert wird, dass Autoren stillschweigend Lizenzinformationen ändern.

Syntax und Codebeispiele

Die folgenden drei Notationen bilden dieselbe Quelle, denselben Alternativtext, dieselben intrinsischen Abmessungen, Größe, Bildunterschrift und Ladeabsicht ab. Beispiel-Asset-Pfade demonstrieren nur den Vertrag; die Produktionsquelle muss auf eine vorhandene Datei verweisen.

Portable Markdown-Direktive

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width=1600 height=1000 size=content loading=lazy}
The keyed notch allows insertion in only one orientation.
:::

Der erste Absatz ist die Bildunterschrift. Weitere Absätze, Überschriften, Listen, Buttons und verschachtelte Medien werden zurückgewiesen, da sie aus einer fokussierten Abbildung einen allgemeinen Inhaltscontainer machen würden.

Hugo Shortcode

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width="1600" height="1000" size="content" loading="lazy" >}}
The keyed notch allows insertion in only one orientation.
{{< /inline-image >}}

Es werden ausschließlich benannte Parameter verwendet. Dies ist eine portable Adapter-Spezifikation, keine Behauptung, dass ein lokaler Shortcode registriert ist. Bis der Adapter existiert, verwenden Sie die etablierte semantische Figure-Implementierung des Publishing-Systems; fügen Sie niemals einen defekten Shortcode-Aufruf zu Produktionsinhalten hinzu.

WordPress-Block

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Connector close-up showing the keyed notch aligned with the matching socket ridge"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">The keyed notch allows insertion in only one orientation.</figcaption>
</figure>
<!-- /wp:image -->

Verwenden Sie Media-Library-Metadaten, überprüfen Sie jedoch den kontextuellen Alt-Text für diese Platzierung. Verlinken Sie standardmäßig nicht auf die Anhangsseite.

Beispiele

Gut: Ein fokussiertes Bild beantwortet die visuelle Frage

Eine Installationsanleitung sagt: „Stellen Sie vor dem Anlegen der Spannung sicher, dass die gekerbte Aussparung mit der Buchsenkante ausgerichtet ist; gewaltsames Einführen des Steckers kann die Stifte verbiegen.“ Sie platziert dann diese Abbildung:

Die Kerbe und die Kante fluchten, bevor der Rastriegel einrasten kann.

Dies funktioniert, weil das Bild nach dem Grund zur Betrachtung kommt, der Ausschnitt beide zusammenpassenden Merkmale enthält und die Bildunterschrift die Beziehung erklärt, anstatt nur „Steckerbild“ zu sagen. Die Anweisung und Konsequenz bleiben im Text. Intrinsische Abmessungen verhindern Bewegungen während des Ladens, und das Bild kann per Lazy Loading geladen werden, da es deutlich unterhalb des ersten Viewports erscheint.

Schlecht: Dekoration unterbricht ohne Erklärung

Ein Artikel über die Konfiguration von Analysetools fügt zwischen einem Schritt und seiner Warnung ein breites Stockfoto einer Person ein, die bunte Diagramme betrachtet. Sein Alt-Text lautet „Analytics-Dashboard-SEO-Optimierungs-Berichtsdaten“, die Quelle ist 5000 Pixel breit, keine Abmessungen sind deklariert, und die Datei wird eifrig auf halber Höhe der Seite geladen.

Das Bild ist schlecht, weil es keinen Konfigurationszustand belegt, eine riskante Aktion von ihrer Warnung trennt, Schlüsselwörter in den Alt-Text stopft, mehr Pixel herunterlädt, als das Layout nutzen kann, und die Warnung verschieben kann, wenn seine Höhe bekannt wird. Entfernen Sie es. Wenn die echte Oberfläche ein mehrdeutiges Steuerelement enthält, ersetzen Sie es durch einen fokussierten, aktuellen Screenshot und halten Sie die Warnung an die Aktion gebunden.

Schema-Markup und Barrierefreiheit

Ein Inline-Bild erstellt standardmäßig keine spezielle Schema-Entität. Ein bedeutungsvolles Bild kann die image-Eigenschaft von Article, HowTo, Product, Review oder einer anderen geeigneten Entität bereitstellen. Verwenden Sie ImageObject nur mit einer stabilen contentUrl und wahrheitsgemäßen verfügbaren Metadaten wie Bildunterschrift, Abmessungen, Urheber und Lizenz. Markieren Sie keine Dekoration oder nicht verifizierte Rechte.

Guter Alt-Text beschreibt die Funktion im Kontext, nicht jedes sichtbare Objekt. Fragen Sie, welcher Satz das Bild ersetzen würde, wenn es nicht geladen werden könnte. „Nahaufnahme des Steckers mit gekerbter Aussparung, ausgerichtet an der passenden Buchsenkante“ ist in einer Installationsanleitung nützlich. „Ein schwarzes und silbernes Objekt auf grauem Hintergrund“ ist visuell wörtlich, aber funktional schwach. Vermeiden Sie „Bild von“ und „Foto von“, es sei denn, das Medium selbst ist relevant, wie bei der Unterscheidung eines Fotos von einer Simulation.

Jedes <img> benötigt ein alt-Attribut. Verwenden Sie nicht leeren Text für informative Bilder und alt="" für Dekoration. Das Weglassen des Attributs ist nicht gleichwertig: Manche Screenreader geben den Dateinamen aus. Platzieren Sie keine wesentliche Prosa, Anweisungen, Zitate oder lange Datenreihen in Pixeln. Wenn sichtbarer Text im Bild wichtig ist, wiederholen Sie ihn im umgebenden Inhalt.

Verwenden Sie <figure> und <figcaption>, wenn eine Bildunterschrift zum Bild gehört. Fügen Sie keine figure-Rolle manuell hinzu. Ein erweiterbares Bild benötigt ein sichtbares, tastaturbedienbares Steuerelement mit einem beschreibenden Namen, vorhersehbarer Fokusbewegung, Escape-Unterstützung bei geöffnetem Modal und Zugriff auf denselben Alt-Text und dieselbe Bildunterschrift in der vergrößerten Größe. Wickeln Sie nicht jedes Bild in einen unbeschrifteten Link zur Quelldatei ein.

Responsive Auslieferung ist Teil der Bild-SEO und Barrierefreiheit, da sie Inhalte ohne unnötige Verzögerung verfügbar macht. Verwenden Sie srcset und sizes oder eine gleichwertige Bild-Pipeline, damit Responsive Design einen geeigneten Kandidaten auswählen kann. Bewahren Sie das Seitenverhältnis, setzen Sie intrinsische width und height und begrenzen Sie die gerenderte maximale Breite auf ihren Container. Diese Abmessungen reservieren Platz und reduzieren den Cumulative Layout Shift , also die Bewegung von Seiteninhalten während des Ladens von Ressourcen.

Lazy Loading verschiebt eine außerhalb des Bildschirms befindliche Ressource, bis der Leser sich ihr nähert. Verwenden Sie loading="lazy" für Bilder unterhalb des anfänglichen Viewports. Laden Sie ein Bild, das wahrscheinlich sofort erscheint, nicht per Lazy Loading, da die Verzögerung dazu führen kann, dass der größte sichtbare Inhalt später ankommt. Verwenden Sie Eager Loading und fetchpriority="high" nur, wenn Messung und Vorlagenposition das Bild als wahrscheinlich primäres Above-Fold-Asset identifizieren; mehrere hochprioritäre Bilder heben das Signal auf.

Schreibregeln

Der Text um ein Inline-Bild herum leistet den Großteil der interpretativen Arbeit, daher bedeutet Kürze im Element nicht Unschärfe.

• Führen Sie den Grund vor der Abbildung in einem nahen Absatz ein. Verwenden Sie keine koordinativen Ausdrücke wie „unten“, wenn responsive oder syndizierte Layouts das Asset verschieben können.
• Schreiben Sie informativen Alt-Text für die Funktion des Bildes in diesem genauen Kontext. Zielen Sie auf 40–160 Zeichen; verwenden Sie nur dann bis zu 250, wenn die Komplexität es wirklich erfordert.
• Halten Sie Bildunterschriften auf 5–30 Wörter und wenn möglich einen Satz. Identifizieren, interpretieren, datieren, skalieren oder nennen Sie die Quelle des Bildes; wiederholen Sie nicht nur den Alt-Text.
• Zeigen Sie ein Hauptmotiv oder eine Hauptbeziehung. Wenn der Leser mehr als drei unabhängige Bereiche inspizieren muss, verwenden Sie einen annotierten Screenshot, ein Diagramm, eine Tabelle oder eine Galerie.
• Verwenden Sie amerikanische Rechtschreibung, einfache Sprache und dieselbe Terminologie wie der umgebende Abschnitt. Alternativtext ist kein Keyword-Feld.
• Halten Sie alle wesentlichen Anweisungen, Warnungen, Messwerte, Preise, Daten und Schlussfolgerungen in HTML-Text, auch wenn sie ebenfalls in den Pixeln erscheinen.
• Platzieren Sie niemals Überschriften, mehrere Absätze, Listen, Tabellen, Buttons, Formulare, Videos, Audio oder ein weiteres Bild innerhalb des Element-Bodys.
• Verwenden Sie niemals eine leere Bildunterschrift zur Erzeugung von Abständen, eine erfundene Quellenangabe, einen entfernten Hotlink, ein nicht lizenziertes Asset, Kundendaten ohne Erlaubnis oder einen nicht existierenden Platzhalterpfad.
• Strecken, verzerren oder skalieren Sie niemals ein Bild hoch, um eine Designvorgabe zu erfüllen. Beschneiden Sie nur, wenn der Ausschnitt die Belege und den Kontext bewahrt, den der Text bespricht.

Beitragstypen, die es verwenden

Das postTypes-Array im Frontmatter ist die kanonische Verknüpfung. Ein Beitragstyp kann die Anforderung einschränken, ändert jedoch nicht den Feld- oder Barrierefreiheitsvertrag des Elements.

QA-Checkliste

• Zweck: Der Prüfer kann die einzigartigen Informationen, Belege oder Erkennungen nennen, die das Bild hinzufügt.
• Platzierung: Der vorhergehende Absatz etabliert, was zu inspizieren ist, und keine Warnung, Qualifikation oder kein Zitat wurde von seiner Aussage getrennt.
• Korrektes Element: Ein einzelnes Inline-Bild ist angemessener als ein annotierter Screenshot, eine Galerie, ein Diagramm, eine Tabelle oder eine Imagebox.
• Asset-Gültigkeit: Die Quelle existiert, verwendet ein genehmigtes Format und einen root-relativen Pfad und verfügt über verifizierte Rechte und Herkunft.
• Privatsphäre: Das Bild enthält keine nicht genehmigten Kundendaten, Namen, E-Mail-Adressen, Token, Browserdetails oder Standorthinweise.
• Ausschnitt und Qualität: Das Motiv bleibt in gerenderter und mobiler Breite lesbar, ohne Verzerrung, vermeidbaren Leerraum oder zerstörerische Komprimierung.
• Alternativtext: Das alt-Attribut ist vorhanden und entweder kontextuell informativ oder absichtlich leer für Dekoration; es ist kein Dateiname, keine Bildunterschrifts-Duplizierung und keine Keyword-Liste.
• Bildunterschrift: Wenn vorhanden, fügt sie Identifikation, Interpretation, Datum, Maßstab oder Herkunft in 5–30 Wörtern hinzu.
• Abmessungen: Intrinsische Breite und Höhe entsprechen dem Quellverhältnis und reservieren stabilen Layout-Platz.
• Responsive Auslieferung: Kandidatengrößen entsprechen realistischen Anzeigebreiten; die größte Quelle wird nicht standardmäßig an jeden Viewport gesendet.
• Laden: Bilder unterhalb des Falzes werden per Lazy Loading geladen; initial sichtbare Bilder nicht; hohe Abrufpriorität ist auf einen gemessenen primären Kandidaten beschränkt.
• Mobiles Verhalten: Das Bild passt ohne horizontales Scrollen auf Seitenebene, und sein sinnvolles Detail bleibt ohne erzwungenen Zoom lesbar.
• Text-Fallback: Wesentliche Anweisungen, Warnungen, Messwerte und Schlussfolgerungen existieren im Seitentext und nicht nur in Pixeln.
• Strukturierte Daten: Alle Schema-Eigenschaften sind korrekt, durch sichtbare Inhalte gestützt und für Dekoration weggelassen.
• Portable Parität: Markdown, Hugo und WordPress bewahren dieselbe Quelle, denselben Alt-Text, dieselben Abmessungen, dieselbe Bildunterschrift, dieselbe Quellenangabe und dieselbe Ladeabsicht.
• Ausstehende Aufnahmen: Kein nicht existierender Pfad wird gerendert; jedes angeforderte Beispiel bleibt ein SCREENSHOT-Kommentar, während screenshotsPending = true ist.

FAQ

Die Academy-Vorlage rendert die fünf geprüften Fragen, die im [[faq]]-Frontmatter dieser Seite gespeichert sind. Sie decken Alternativtext, Lazy Loading, Bildunterschriften, Größenanpassung und die Entscheidung ab, ein Bild zu entfernen, das nichts beiträgt.