Medien: Bilder und Alt-Text

Modul 4: Inhalte erstellen · Lesezeit: 9 Minuten

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

Kernbegriffe: Mediathek, Bildformate, 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 Handy hoch: 4.000 mal 3.000 Pixel, 5 MB. WordPress tut dabei mehr, als man denkt:

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

Ein einziges Foto wird so schnell zu acht oder mehr Dateien. Deshalb wächst der Ordner uploads so stark (Lektion 1.3), und deshalb spielt es eine Rolle, was Sie hochladen.

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

Vorab verkleinern und komprimieren

Auch mit diesen automatischen Formaten 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 Qualität 100, ist aber oft nur halb so groß.
• Metadaten: Fotos von einem Handy enthalten oft den GPS-Standort, an dem sie aufgenommen wurden. Wenn Sie nicht möchten, dass jeder weiß, wo Sie wohnen, entfernen Sie diese Daten vor dem Hochladen. WordPress entfernt bei den verkleinerten Formaten 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 tun 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, gibt WordPress beim Hochladen einen Fehler aus oder erstellt keine kleineren Formate. Unter Werkzeuge > Website-Zustand (Reiter Info, unter Medienverarbeitung) sehen Sie, 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 mit fetchpriority="high" Vorrang, da es so schnell wie möglich sichtbar sein muss. Darauf kommen wir in Lektion 6.3 zurück.

Setzen Sie außerdem immer Breite und Höhe bei einem Bild (WordPress tut dies bei Bildern aus der Mediathek automatisch). Dann reserviert der Browser vorab Platz, und der Text springt nicht weg, wenn das Bild erscheint.

Alt-Text: für wen das Bild nicht sieht

Der Alt-Text (alternativer Text) 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 Zusammenhang aussagt:

• Schlecht: IMG_4032.jpg oder foto.
• Schlecht: fahrradladen fahrrad e-bike kaufen günstig fahrrad (Stichwörter aneinanderzureihen hilft niemandem).
• Gut: Monteur stellt die Bremsen eines blauen E-Bikes in der Werkstatt ein.

Ist ein Bild reine Dekoration (eine Linie, ein Hintergrundmuster), lassen Sie den Alt-Text leer. Dann überspringt ihn ein Screenreader. 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 De Spaak.

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

Dateinamen und Urheberrecht

• Dateiname: e-bike-remmen-afstellen.jpg sagt mehr aus als IMG_4032.jpg und erscheint in der Adresse des Bildes. Kleinbuchstaben, Bindestriche, keine Leerzeichen.
• Urheberrecht: Ein Bild aus der Google-Bildersuche ist nicht frei verwendbar. Fotografen und Bilddatenbanken verschicken regelmäßig Rechnungen für die Nutzung ohne Lizenz. Verwenden Sie eigene Fotos, Fotos mit eindeutiger Lizenz oder eine Bilddatenbank, deren Bedingungen Sie kennen, und bewahren Sie den Nachweis Ihrer Lizenz auf.

Speicherplatz und Aufräumen

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

Zusammenfassung

• WordPress erstellt aus jedem Upload mehrere Formate und verkleinert große Fotos auf 2.560 Pixel; der Browser wählt über srcset das passende Format.
• 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 bereinigenden Plugin.
• 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.

Weiterführende Links

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/