Bilder können eine Arbeit zeigen, einen Ablauf erklären oder einer Website Atmosphäre geben. Jede dieser Aufgaben braucht eine andere Auswahl. Bevor du ein Foto hochlädst, sollte deshalb klar sein, wozu es auf dieser Seite dient. Ein passendes Motiv, ein brauchbarer Ausschnitt und eine geeignete Auslieferung wirken zusammen. Die größte Datei aus der Kamera ist selten schon die fertige Websiteversion.

Beginne mit Aussage und Herkunft

Notiere zu jedem Bild, welche Information es vermittelt und woher es stammt. Bei eigenen Aufnahmen gehören verwendbare Originale und die nötigen Freigaben in die Projektablage. Bei lizenzierten Bildern prüfst du die tatsächlichen Nutzungsbedingungen. KI-generierte Motive kennzeichnest du passend als Illustration und archivierst ihre Herkunft. Sie sollten keine tatsächlich fotografierten Kunden oder Anbieterstandorte vortäuschen.

Wähle Bilder im Zusammenhang mit dem Text. Eine Projektaufnahme erklärt vielleicht einen Ausschnitt, den der Absatz beschreibt. Ein allgemeines Stimmungsmotiv erfüllt eine andere Rolle. Für ein Portfolio lohnt sich häufig die Kombination aus Gesamtansicht und Detail. Ein Ratgeber kann mit einem klaren Diagramm verständlicher werden als mit mehreren dekorativen Fotos.

Prüfe breite und schmale Ansichten

Teste das gewählte Motiv in den tatsächlich vorgesehenen Bildflächen. Ein breiter Startseitenausschnitt darf auf einem Telefon nicht das relevante Detail verlieren. Wenn ein Gesicht oder Gegenstand die Aussage trägt, muss sein Platz bei verschiedenen Breiten bedacht werden. Lege bei Bedarf einen eigenen schmalen Ausschnitt an und halte beide Varianten dem gleichen Original zugeordnet.

Vom Original zur Websiteversion
Schritt Prüffrage
Auswahl Unterstützt das Motiv die Seitenaufgabe?
Ausschnitt Bleibt die Aussage auf dem Telefon erhalten?
Export Passt die Bildgröße zur sichtbaren Fläche?
Beschreibung Ist die wichtige Information auch im Text zugänglich?

Erzeuge passende Dateivarianten

Exportiere Bilder in Größen, die dein Layout tatsächlich benötigt, und prüfe die Qualität bei normaler Ansicht. WordPress kann beim Upload verschiedene Bildgrößen erzeugen; welche Varianten dein Theme ausliefert, sollte im Browser kontrolliert werden. Moderne Formate können sinnvoll sein, doch die sichtbare Qualität und Unterstützung deiner tatsächlichen Umsetzung bleiben entscheidend. Bewahre das hochwertige Original separat auf.

Gib Dateien verständliche Namen und ordne sie einem Artikel oder Projekt zu. Eine saubere Medienablage erleichtert spätere Änderungen. Vermeide Texte und wichtige Zahlen ausschließlich im Rasterbild. Bei einer erklärenden Grafik können regulärer Text, eine Tabelle oder semantisches SVG die Aussage zugänglich halten und auf schmalen Bildschirmen besser lesbar machen.

Schreibe Bildbeschreibungen für ihre Aufgabe

Die W3C-Hinweise unterscheiden informative, dekorative und funktionale Bilder. Ein informatives Bild braucht eine passende Textalternative für seine wesentliche Aussage. Ein rein dekoratives Motiv erhält einen leeren Alternativtext. Bei einem verlinkten Bild zählt die Funktion des Links. Die Beschreibung wird deshalb im Kontext der konkreten Seite geschrieben und nicht einfach aus dem Dateinamen übernommen.

Nutze eine Bildunterschrift, wenn Herkunft, Motiv oder Einordnung zusätzliche Informationen liefern. Wiederhole nicht unnötig denselben Satz in Absatz, Bildunterschrift und Alternativtext. Prüfe die Seite auch mit ausgeblendeten Bildern: Bleibt das Hauptargument verständlich? Für komplexe Grafiken muss ihre Aussage ausführlicher im Text oder in einer zugehörigen Tabelle zugänglich sein.

Kontrolliere das Ladeverhalten

Reserviere im Layout den Platz des Bildes, damit der Inhalt beim Laden nicht unerwartet springt. Bilder weiter unten auf der Seite können verzögert geladen werden. Das wichtigste direkt sichtbare Bild sollte dagegen nicht durch unnötiges Lazy Loading zurückgehalten werden. Die web.dev-Hinweise erläutern den Zusammenhang zwischen Bildanfrage und sichtbarem Seitenaufbau.

  • Das relevante Motiv bleibt auf Mobilbreite sichtbar.
  • Die ausgelieferte Variante passt zur Bildfläche.
  • Die Bildbeschreibung entspricht ihrer Aufgabe.
  • Wichtige Informationen bleiben ohne Bild verständlich.

Prüfe Bilder auf echten Seiten

Betrachte mindestens eine Startseite und einen langen Artikel mit ihren tatsächlichen Bildern. Kontrolliere einen langsamen Seitenaufbau und die Darstellung auf dem Telefon. Die Anleitung zum mobilen Prüfen hilft dabei. Wenn Seiten weiterhin schwer laden, untersuchst du sie gezielt mit dem Ratgeber zur Performanceverbesserung, statt nur pauschal alle Bilder stärker zu komprimieren.

Quellen und Einordnung

Offizielle Quellen, geprüft am 7. Oktober 2026. Technische Anleitungen und Anbieterangaben sind von redaktionellen Beispielen getrennt.