Ein Bild kann eine Anleitung verständlicher machen, eine Stimmung vermitteln oder eine konkrete Oberfläche zeigen. Diese Aufgaben verlangen unterschiedliche Entscheidungen bei Auswahl, Beschreibung und Ausgabe. Ein dekoratives Foto braucht keine ausführliche technische Erklärung; ein Screenshot mit wichtigen Einstellungen braucht zusätzlichen lesbaren Text. Die bloße Frage nach dem besten Dateiformat greift deshalb zu kurz. Ein guter Bildworkflow verbindet Inhalt, Rechte, Größe, Barrierefreiheit und technische Auslieferung. Dieser Ratgeber zeigt, wie Sie das in WordPress systematisch bearbeiten.
Sie benötigen Zugriff auf die Mediathek und auf die verwendeten Bilddateien. Arbeiten Sie möglichst mit Originalen, aus denen passende Webvarianten erstellt werden können. Ziel ist ein Bildbestand, der den Inhalt unterstützt, rechtmäßig verwendet wird und in unterschiedlichen Ansichten zuverlässig erscheint. Es geht nicht um ein pauschales Versprechen einer bestimmten Ladezeit. Welche Einsparung eine Änderung erzielt, muss am konkreten Auftritt gemessen werden. Die Beispiele beschreiben redaktionelle Entscheidungen, keine angeblich durchgeführten Tests.
Die Bildaufgabe vor dem Export festlegen
Fragen Sie bei jedem Bild: Was soll ein Leser dadurch verstehen? Für einen Arbeitsschritt kann ein gezielter Ausschnitt einer echten Oberfläche helfen. Für eine Rubrik kann ein ruhiges Symbolbild Orientierung bieten. Für ein Produkt sind korrekte zulässige Originalabbildungen wichtig. Wenn ein Bild keine erkennbare Funktion besitzt, prüfen Sie, ob es entfallen kann. Das spart Übertragungsvolumen und reduziert visuelle Ablenkung. Nicht jede Zwischenüberschrift braucht eine Illustration, nur damit die Seite vermeintlich abwechslungsreich aussieht.
Legen Sie außerdem fest, wo das Bild erscheint. Ein kleines Vorschaubild, eine breite Einleitung und ein genauer Screenshot brauchen verschiedene Formate und Ausschnitte. Planen Sie den Bildfokus so, dass wichtige Informationen beim mobilen Zuschnitt erhalten bleiben. Ein Textlabel am äußersten Bildrand kann in einer schmalen Vorschau verschwinden. Wenn die Aussage davon abhängt, sollte sie im HTML-Text wiederholt werden. Die Bildunterschrift kann Funktion und Herkunft verständlich machen, ersetzt aber nicht die Erklärung des eigentlichen Arbeitsschritts.
Herkunft und Nutzungsrecht dokumentieren
Notieren Sie Urheber, Quelle, Nutzungsgrundlage und gegebenenfalls erforderliche Namensnennung. Eine im Internet auffindbare Datei ist nicht automatisch frei verwendbar. Bei eigenen Fotos halten Sie fest, wer sie erstellt hat und ob abgebildete Personen oder geschützte Inhalte betroffen sind. Bei Bilddatenbanken prüfen Sie die konkrete Lizenz. Speichern Sie die Information zusammen mit dem Original oder in einem Bildmanifest. So lässt sich später nachvollziehen, ob ein Derivat weiterhin im erlaubten Rahmen verwendet wird.
Bei KI-generierten Bildern dokumentieren Sie Werkzeug, Datum und ursprünglichen Prompt. Kennzeichnen Sie sie sichtbar als generiert, wenn ihre Darstellung sonst als echte Szene oder reale Expertise verstanden werden könnte. Generierte WordPress-Oberflächen sind für technische Anleitungen ungeeignet: Beschriftungen und Funktionen könnten erfunden sein. Verwenden Sie hierfür echte selbst aufgenommene Screenshots der tatsächlich geprüften Oberfläche. Entfernen Sie vor der Veröffentlichung Kontodaten, Zugangstokens und persönliche Angaben. Eine nachträgliche unsichere Übermalung sollte durch einen sauber bereinigten neuen Screenshot ersetzt werden.
Abmessungen aus dem Layout ableiten
Messen Sie, wie breit das Bild im Frontend tatsächlich dargestellt wird. Exportieren Sie eine ausreichend scharfe Variante für diesen Einsatz und gegebenenfalls eine größere für hochauflösende Bildschirme. Ein kleines Bild muss nicht mit einer riesigen Kameradatei ausgeliefert werden. Umgekehrt darf ein Screenshot nicht so stark verkleinert werden, dass Beschriftungen unlesbar werden. Prüfen Sie die Darstellung mit normaler Bildschirmgröße. Die Dateigröße ist nur ein Teil der Entscheidung; Lesbarkeit und angemessene Schärfe gehören ebenfalls dazu.
WordPress kann für hochgeladene Bilder verschiedene Größen erzeugen und responsive Bildinformationen bereitstellen. Die Dokumentation zu responsiven Bildern erklärt den zugrunde liegenden Mechanismus. Das konkrete Ergebnis hängt von Theme, erzeugten Größen und Ausgabe ab. Kontrollieren Sie im Browser, welche Datei tatsächlich geladen wird. Eine kleine dargestellte Fläche mit einer sehr großen Originaldatei deutet auf eine unpassende Auswahl oder fehlende responsive Ausgabe hin. Prüfen Sie vorhandene Varianten, bevor Sie zusätzliche Optimierungsplugins installieren.
| Bildart | Wichtige Prüfung | Passender Zusatz |
|---|---|---|
| Arbeitsfoto | Ausschnitt und Rechte | Kurze Bildunterschrift |
| Screenshot | Lesbarkeit und bereinigte Daten | Erklärte Schritte im Text |
| Diagramm | Aussage ohne Farberkennung verständlich | Textliche Zusammenfassung |
| Dekoratives Bild | Keine wichtige Information versteckt | Leerer Alttext bei rein dekorativer Funktion |
Dateiformat nach der Bildart wählen
Fotografische Motive profitieren häufig von verlustbehafteter Kompression, während feine Schrift und transparente Grafiken andere Anforderungen besitzen. Moderne Formate wie WebP oder AVIF können je nach Bild und Verarbeitung sinnvoll sein. Wählen Sie sie nicht allein wegen eines Schlagworts. Prüfen Sie die Unterstützung in Ihrer Bildverarbeitung und die sichtbare Qualität. Ein Screenshot mit ausgefranster Schrift wird durch eine kleinere Dateigröße nicht hilfreicher. Speichern Sie das Original getrennt, damit später neue Varianten erstellt werden können.
Vergleichen Sie Exporte bei tatsächlicher Darstellungsgröße. Achten Sie auf harte Kanten, kleine Schrift und Farbübergänge. Dokumentieren Sie nur die von Ihnen wirklich erzeugten Dateigrößen, wenn Sie eine Einsparung berichten. Allgemeine Herstellerangaben sind keine Messung Ihrer Website. Ein technisches SVG kann für ein einfaches eigenes Diagramm geeignet sein, benötigt aber eine sichere und korrekte Einbindung. Behandeln Sie unbekannte SVG-Dateien nicht wie harmlose Fotos, da sie zusätzliche Strukturen und gegebenenfalls aktive Inhalte enthalten können.
Alttexte beschreiben den Zweck im Kontext
Der WAI-Entscheidungsbaum für Bilder unterscheidet unter anderem informative, funktionale und dekorative Bilder. Der Alternativtext sollte die relevante Information oder Funktion vermitteln. Er ist keine Ablage für eine lange Keywordliste. Bei einem verlinkten Bild kann die Zielhandlung wichtig sein. Bei einem dekorativen Bild ist ein leerer Alttext oft angemessen, wenn dadurch keine Information verloren geht. Ein automatisch aus dem Dateinamen erzeugter Text wie „img_4821_final“ erfüllt diese Aufgabe nicht.
Schreiben Sie den Alttext erst, wenn Sie den Einsatzort kennen. Dasselbe Foto kann auf einer Seite informativ und auf einer anderen rein dekorativ sein. Für einen Screenshot reicht eine Liste aller sichtbaren Schaltflächen selten aus. Beschreiben Sie die relevante Einstellung und erklären Sie den vollständigen Ablauf im Text. Für ein komplexes Diagramm braucht es meist eine zusätzliche ausführliche Beschreibung oder eine Datentabelle. Die kurze Bildalternative sollte auf diese Erklärung hinführen, statt sämtliche Einzelheiten in einen schwer lesbaren Satz zu pressen.
Mediathek und einzelne Verwendung auseinanderhalten
Die Dokumentation des Bildblocks erläutert die Bilddarstellung im Editor und ihre Einstellungen. Prüfen Sie Alttext und Bildunterschrift an der tatsächlichen Verwendung. Ein Feld in der Mediathek kann als Ausgangspunkt dienen, aber die vorhandene Ausgabe eines bereits eingefügten Blocks muss dadurch nicht automatisch passend verändert sein. Kontrollieren Sie deshalb die veröffentlichte oder geschützte Vorschauseite. Entscheidend ist das ausgelieferte HTML, nicht die bloße Existenz eines gepflegten Feldes im Backend.
Benennen Sie Dateien vor dem Upload sinnvoll und ordnen Sie zusammengehörige Varianten nachvollziehbar. Dateinamen dürfen den Inhalt beschreiben, ohne mehrere Suchbegriffe aneinanderzureihen. Vermeiden Sie persönliche Daten in Namen. Notieren Sie bei technischen Screenshots die geprüfte Produktversion in Ihrer redaktionellen Bilddokumentation. Wenn sich eine Oberfläche ändert, lässt sich so erkennen, welches Material neu geprüft werden muss. Eine Sammlung mit hunderten nicht zugeordneten Bildern verursacht später unnötige Suche und erhöht das Risiko einer falschen Verwendung.
Ladeverhalten nach sichtbarer Position entscheiden
Ein großes Bild in der ersten Ansicht kann für die wahrgenommene Ladezeit wichtig sein. Ein Bild weit unten sollte dagegen nicht unbedingt sofort dieselbe Priorität erhalten. Prüfen Sie die tatsächliche Ausgabe, weil WordPress, Theme und Plugins bereits Regeln für verzögertes Laden und Priorisierung anwenden können. Zusätzliche widersprüchliche Einstellungen können das Verhalten verschlechtern. Aktivieren Sie nicht pauschal Lazy Loading für jedes Bild, ohne zu untersuchen, welches Element in der ersten Ansicht relevant ist.
Reservieren Sie Platz durch korrekte Maße oder ein passendes Seitenverhältnis. So kann Text während des Ladens stabil bleiben. Prüfen Sie die Seite bei einer langsameren Verbindung und mit ausgeschaltetem Browsercache. Achten Sie darauf, ob Inhalte springen, sobald Bilder nachladen. Der Ratgeber zur LCP-Prüfung behandelt die Ladephase genauer. Hier reicht als Bildworkflow: Funktion bestimmen, passende Größe bereitstellen, Maße ausgeben und reales Verhalten kontrollieren. Ein zusätzliches Plugin ist nur sinnvoll, wenn es eine erkannte Aufgabe zuverlässig löst.
Bildunterschriften und Sichtprüfung ergänzen
Eine Bildunterschrift kann erklären, warum ein Bild gezeigt wird. Bei einer Anleitung sollte sie nicht nur den unmittelbar darüber stehenden Titel wiederholen. Benennen Sie den relevanten Ausschnitt oder eine erkennbare Einschränkung. Bei einem KI-Symbolbild gehört die Kennzeichnung dort gut sichtbar hin. Bei eigenen Diagrammen können Sie deutlich machen, dass es eine vereinfachte Darstellung ist. Solche Hinweise helfen, Illustration und tatsächlichen Nachweis auseinanderzuhalten. Ein Symbolbild darf nicht als Aufnahme einer realen Anbieteranlage bezeichnet werden.
Prüfen Sie Desktop, Mobilansicht und stärkere Vergrößerung. Können Leser kleine Beschriftungen erkennen? Wird der wesentliche Bereich abgeschnitten? Bleibt die Bildunterschrift dem richtigen Bild zugeordnet? Testen Sie verlinkte Bilder mit Tastatur und kontrollieren Sie ihren Fokus. Wenn ein Bild eine Schaltfläche bildet, muss ihre Funktion auch ohne Farberkennung oder Maus klar sein. Ein Textlink kann dafür einfacher und zuverlässiger sein. Die Entscheidung hängt vom konkreten Inhalt ab, nicht von einer pauschalen Vorliebe für mehr Bilder.
Aufräumen ohne Inhalte zu verlieren
Löschen Sie Medien nicht allein deshalb, weil sie in der Mediathek als nicht angehängt erscheinen. Dateien können in Themeoptionen, Mustern oder anderen Inhalten verwendet werden. Prüfen Sie den tatsächlichen Gebrauch und erstellen Sie vor größeren Bereinigungen eine Sicherung. Eine unbenutzte Originaldatei kann außerdem für spätere Exporte gebraucht werden. Trennen Sie deshalb archivierte Originale von ausgelieferten Webvarianten. Wenn Sie Varianten neu erzeugen, kontrollieren Sie alte Links und die Darstellung bestehender Inhalte.
Der fertige Bildbestand hat zu jeder relevanten Datei eine nachvollziehbare Herkunft, eine konkrete Funktion und eine passende Ausgabe. Ihre Checkliste lautet: Rechte geklärt, sensible Daten entfernt, Ausschnitt geprüft, Alttext im Kontext entschieden, Maße vorhanden und mobile Darstellung kontrolliert. Damit unterstützen Bilder den Inhalt, statt ihn nur zu verzieren. Ergänzen Sie diesen Ablauf in Ihren Redaktionsregeln und prüfen Sie neue Bilder beim Einfügen. So bleibt die Qualität auch nach der ersten Gestaltung erhalten.