Medien: Bilder und Alt-Text

Modul 4: Inhalte erstellen · Lesezeit: 9 Minuten

Lernziel: Nach dieser Lektion können Sie Bilder gut vorbereiten, hochladen und beschreiben, damit sie schnell laden, scharf aussehen und für alle nutzbar sind.

Kernbegriffe: Mediathek, Bildgrößen, Big Image Threshold (2560 Pixel), JPEG, PNG, WebP, AVIF, Komprimierung, srcset, Lazy Loading, Alt-Text, Dateiname, Urheberrecht

Was beim Hochladen eines Fotos passiert

Sie laden ein Foto von Ihrem Smartphone hoch: 4.000 x 3.000 Pixel, 5 MB. WordPress macht dann mehr, als Sie denken:

1. Ist das Foto breiter oder höher als 2.560 Pixel, erstellt WordPress eine verkleinerte Version (mit -scaled im Namen) und verwendet sie als "Original". Das echte Original bleibt ebenfalls gespeichert. Das nennt sich Big Image Threshold und gibt es seit WordPress 5.3.
2. Außerdem erstellt WordPress eine Reihe kleinerer Größen: Vorschaubild (standardmäßig 150 x 150 Pixel, zugeschnitten), Mittel (300), Groß (1024) sowie zusätzliche Größen mit 768, 1536 und 2048 Pixel Breite. Ihr Theme und Ihre Plugins fügen oft noch eigene Größen hinzu.
3. Alle Versionen landen in wp-content/uploads/2026/11/ (Jahr und Monat des Hochladens).

Aus einem Foto werden so schnell acht oder mehr Dateien. Deshalb wächst der Ordner uploads so stark (Lektion 1.3), und deshalb ist es wichtig, was Sie hochladen.

Auf der Seite setzt WordPress bei einem Bild ein srcset: eine Liste all dieser Größen. Der Browser wählt selbst die kleinste Größe, die für den Bildschirm scharf genug ist. Ein Smartphone lädt dann die Größe mit 768 Pixeln, ein großer Bildschirm die mit 1536. Das funktioniert nur, wenn die Größen vorhanden sind, also wenn Sie über die Mediathek hochladen und nicht per FTP.

Vorab verkleinern und komprimieren

Auch mit diesen automatischen Größen lohnt es sich, Fotos vorab zu verkleinern:

• Abmessung: Ein Foto, das auf Ihrer Website nie breiter als 1.600 Pixel angezeigt wird, muss nicht 4.000 Pixel breit sein. Verkleinern Sie es vorab auf etwa 2.000 Pixel an der langen Seite. Das spart Speicherplatz, Backup-Größe und Upload-Zeit.
• Komprimierung: Ein JPEG mit Qualität 75 bis 85 sieht für das Auge fast genauso aus wie mit Qualität 100, ist aber oft nur halb so groß.
• Metadaten: Fotos vom Smartphone enthalten oft den GPS-Standort, an dem sie aufgenommen wurden. Möchten Sie nicht, dass jeder weiß, wo Sie wohnen, entfernen Sie diese Daten vor dem Hochladen. WordPress entfernt bei den verkleinerten Größen viele Metadaten, aber das Original kann sie noch enthalten.

Es gibt Plugins, die Bilder beim Hochladen komprimieren oder in ein moderneres Format umwandeln. Praktisch, aber prüfen Sie, ob sie das auf Ihrem eigenen Server erledigen oder die Fotos an einen externen Dienst senden (Lektion 9.3), und ob Sie wirklich ein Plugin brauchen, wenn Sie es auch vorab erledigen können.

Welches Format

Kann Ihr Server ein Format nicht verarbeiten, zeigt WordPress beim Hochladen einen Fehler an oder erstellt keine kleineren Größen. Unter Werkzeuge > Website-Zustand sehen Sie im Tab Bericht unter Medienverarbeitung, welche Formate Ihr Server unterstützt.

Lazy Loading

Seit WordPress 5.5 erhalten Bilder automatisch loading="lazy": Der Browser lädt ein Bild erst, wenn Sie dorthin scrollen. Das macht eine lange Seite mit vielen Fotos deutlich schneller. WordPress lässt das erste große Bild oben auf der Seite bewusst ohne Lazy Loading und gibt ihm oft Vorrang mit fetchpriority="high", weil es so schnell wie möglich sichtbar sein soll. Darauf kommen wir in Lektion 6.3 zurück.

Geben Sie bei einem Bild außerdem immer Breite und Höhe an (WordPress macht das bei Bildern aus der Mediathek). Dann reserviert der Browser vorab Platz, und der Text springt nicht weg, wenn das Foto geladen wird.

Alt-Text: für alle, die das Bild nicht sehen

Der Alt-Text (Alternativtext) beschreibt, was auf einem Bild zu sehen ist. Screenreader lesen ihn blinden und sehbehinderten Besuchern vor, und er erscheint, wenn das Bild nicht lädt. Suchmaschinen nutzen ihn, um das Bild zu verstehen.

Ein guter Alt-Text beschreibt, was das Bild in diesem Kontext aussagt:

• Schlecht: IMG_4032.jpg oder Foto.
• Schlecht: Fahrradladen Fahrrad E-Bike kaufen günstig Fahrrad (Schlüsselwörter anzuhäufen hilft niemandem).
• Gut: Mechaniker stellt in der Werkstatt die Bremsen eines blauen E-Bikes ein.

Ist ein Bild reine Dekoration (eine Linie, ein Hintergrundmuster), lassen Sie den Alt-Text leer. Dann überspringt ein Screenreader das Bild. Leer ist etwas anderes als fehlend: Bei einem Bild ohne alt liest ein Screenreader oft den Dateinamen vor. Ein Bild, das ein Link ist (zum Beispiel ein Logo, das zur Startseite führt), beschreibt, wohin der Link führt: Zur Startseite von Fahrradladen Die Speiche.

In der Mediathek tragen Sie den Alt-Text beim Bild selbst ein, im Block-Editor beim Bild-Block. Achtung: Ein Alt-Text, den Sie in der Mediathek eintragen, ändert sich nicht automatisch bei Bildern, die bereits auf Seiten stehen.

Dateinamen und Urheberrecht

• Dateiname: e-bike-bremsen-einstellen.jpg sagt mehr als IMG_4032.jpg und erscheint in der Adresse des Bildes. Kleinbuchstaben, Bindestriche, keine Leerzeichen.
• Urheberrecht: Ein Bild aus der Google Bildersuche darf nicht einfach frei verwendet werden. Fotografen und Bildagenturen verschicken regelmäßig Rechnungen für Nutzung ohne Lizenz. Verwenden Sie eigene Fotos, Fotos mit einer klaren Lizenz oder eine Bildagentur, deren Bedingungen Sie kennen, und bewahren Sie den Nachweis Ihrer Lizenz auf.

Speicherplatz und Aufräumen

Die Mediathek räumt sich nicht selbst auf. Ein Bild, das Sie von einer Seite entfernen, bleibt in der Mediathek und in uploads erhalten, mit all seinen Größen. Bei einer Website mit jahrelangen Inhalten summiert sich das. Räumen Sie ab und zu auf, aber vorsichtig: Ein Bild kann an einer Stelle verwendet werden, die die Mediathek nicht sieht (in einer Theme-Einstellung, einem Widget oder einer E-Mail). Erstellen Sie zuerst ein Backup.

Zusammenfassung

• WordPress erstellt aus jedem Upload mehrere Größen und verkleinert große Fotos auf 2.560 Pixel; der Browser wählt über srcset die passende Größe.
• Verkleinern und komprimieren Sie Fotos vorab und entfernen Sie Standortdaten.
• Verwenden Sie JPEG oder WebP für Fotos, PNG für Logos und Screenshots; SVG nur mit einem Plugin, das bereinigt.
• Lazy Loading geschieht automatisch, außer beim ersten großen Bild; Breite und Höhe verhindern Verspringen.
• Ein Alt-Text beschreibt, was das Bild im Kontext aussagt; reine Dekoration erhält einen leeren Alt-Text.

Quiz

Aufgabe

Aufgabe A4.4: Bilder auf Ihrer Startseite. Geben Sie die Adresse Ihrer Website ein. Das Programm liest die Startseite und prüft die ersten 20 Bilder: Haben sie ein alt-Attribut (leer ist erlaubt, fehlend nicht), haben sie Breite und Höhe, und wie groß ist jede Datei (über eine HEAD-Anfrage)? Bilder über 300 kB werden gemeldet. Verbessern Sie, was rot markiert ist, in Ihrer Mediathek oder auf der Seite, und prüfen Sie erneut.

Weiterlesen

Diese Artikel beschreiben die Schritte in den Panels von WebOké; in anderen Panels funktionieren sie ähnlich.

• DirectAdmin Anleitung 18.5: Upload zu groß (Fehler 413) oder Zeitüberschreitung
• Das Hochladen schlägt fehl: upload_max_filesize und max_execution_time erhöhen
• Mediathek (wordpress.org, Englisch): https://wordpress.org/documentation/article/media-library-screen/
• Alt-Texte schreiben (W3C, Englisch): https://www.w3.org/WAI/tutorials/images/decision-tree/