Webseiten-Bilder richtig hochladen.

Ich sehe immer wieder Webseiten, auf die Bilder mit 1 MB oder mehr hochgeladen wurden, mit 5000 Pixel Breite, mit automatischen Bilddateinamen wie IMG1272720.jpg und meist auch ohne Alt-Text, der das Bild benennt und beschreibt.

Warum ist das ein Problem?

  • Zu grosse Bilder kosten unnötig Speicherplatz auf dem Server.
  • Zu grosse Bilder verlangsamen die Ladegeschwindigkeit der Webseite, was sich negativ auf das Google-Ranking sowie auf die tatsächliche User Experience Ihres Webseitenbesuchers auswirken kann.
  • Bilder mit Dateinamen aus Buchstaben und Zahlen, die noch dazu auf der Webseite ohne Alt-Text oder Beschreibung abgespeichert sind, können von Suchmaschinen nicht erkannt und indexiert werden. Ganz einfach, weil Suchmaschinen nicht «sehen» können und daher nicht wissen, was in einem Bild abgebildet ist. Auch sehbehinderte Menschen mit Screenreader brauchen Bild-Texte, um zu erfahren, was dort gezeigt wird.
  • Fehlende Dateinamen, Titel und Alt-Texte erschweren die Suche nach dem Bild im CMS.

Was sollten Sie tun?

Bilder benennen

Sortieren Sie alle für die Webseite zu verwendenden Bilder in die verschiedenen Themenbereiche.
Duplizieren/kopieren Sie alle Bilder und speichern Sie Originale zur Sicherheit in einem separaten Folder ab. Sie sollten nur die Kopien bearbeiten.
Vor dem Duplizieren bzw. beim Abspeichern benennen Sie jedes Bild mit einem aussagekräftigen «sprechenden» Dateinamen.
Z.B.: statt «IMG1272720.jpg» «Hawaii-Maunaloa-Strasse-Abendlicht-1.jpg»
Vermeiden Sie Umlaute, Sonderzeichen, Leerzeichen und Unterstriche in den Dateinamen. Zum Trennen von Worten sollten Sie immer Bindestriche verwenden.

Skalieren: Bildabmessungen verkleinern

Öffnen Sie das Bild und passen Sie die Bildmasse an. Das geht mit Tools wie Photoshop, aber auch mit kostenlosen Online-Tools wie Pixlr oder den kostenlosen Bordmitteln Ihres Computers – z.B. «Vorschau» für Mac.
Je nach Tool müssen Sie jedes Bild einzeln bearbeiten oder können ganze Dateifolder als «Batches» verarbeiten.
Skalieren/reduzieren Sie nun jedes Bild auf eine Breite von 2000 Pixeln. Das genügt für eine seitenfüllende Anzeige (gutes Ausgangsmaterial vorausgesetzt). In den meisten CMS wird das Bild dann für kleinere Ausgaben automatisch noch weiter heruntergerechnet.

Die Verkleinerung des Bildes reduziert zwar auch seine Dateigrösse, aber noch nicht auf eine optimale Mindestgrösse.

Komprimieren: Bilddateigrössen verringern

Je nach Bildbearbeitungsprogramm können Sie die Bilder vor dem Abspeichern auch gleich noch komprimieren, d.h. die Dateigrösse des Bildes verkleinern. Beim Verkleinern werden so viele «überflüssige» Pixel wie möglich entfernt, ohne die Anzeigequalität des Bildes zu beeinträchtigen.
Wenn Ihr Bildbearbeitungsprogramm diese Möglichkeit nicht bietet, können Sie kostenlose Onlinetools wie tinyjpg.com oder tinypng.com nutzen, um die abgespeicherten Bilddateien zu verkleinern.

Nun sind die Bilder auf ein Mindestmass reduziert, was sowohl den Speicherbedarf als auch die Ladezeit auf der Webseite verringert.

Bilder auf die Webseite hochladen

Je nach CMS können Sie für Ihre Bilder entsprechend benannte Ordner anlegen und die Bilder so hochladen, dass sie später leichter wieder zu finden sind.
Bei WordPress geht das leider nicht, hier enthält die so genannte Mediathek alle Bilder, PDF und sonstigen Dokumente, die jemals auf die Webseite hochgeladen wurden – ob im aktiven Einsatz oder nicht. Umso wichtiger ist es hier, dass Bilder aussagekräftig benannt sind und Alt-Text wie Beschreibung erhalten, damit Sie sie später in einer Mediathek mit Hunderten von Bildern und Dokumenten einfacher wiederfinden können.
Sie sollten jedoch immer für jedes Bild sowohl einen «alternativen Text» als auch eine Beschreibung erfassen – diese sind für Suchmaschinen wichtig, um das Bild passend indexieren zu können. Aber auch für Menschen mit Sehbehinderung.