Insights · Web · Website
Von Stefan EngelAktualisiert am
Das Wichtigste in Kürze
Bilder sind auf den meisten Websites der größte Teil der Ladezeit. Mit diesen acht Schritten bereiten Sie Fotos so vor, dass sie scharf aussehen, schnell laden und von Suchmaschinen verstanden werden.
Ein Foto direkt aus Kamera oder Smartphone ist meist um ein Vielfaches größer, als die Website es braucht.
Laden Sie Bilder höchstens in der Breite hoch, in der sie auf der Seite erscheinen. Für ein Bild über die volle Bildschirmbreite reichen in der Regel rund 2.000 Pixel, für ein Bild in einer Textspalte deutlich weniger. Jedes überflüssige Pixel verlängert die Ladezeit, besonders unterwegs auf dem Smartphone.
Moderne Bildformate sind bei gleicher Qualität deutlich kleiner als JPG oder PNG.
WordPress unterstützt beide Formate. Viele Bildprogramme exportieren direkt als WebP, alternativ wandelt ein Bild-Plugin beim Hochladen automatisch um. PNG bleibt sinnvoll für Grafiken mit wenigen Farben und transparentem Hintergrund.
Beim Export lässt sich die Qualität meist deutlich senken, ohne dass das Bild am Bildschirm schlechter wirkt.
Vergleichen Sie zwei Exporte in Originalgröße nebeneinander. Erst wenn Kanten unscharf werden oder in Verläufen Stufen entstehen, ist die Kompression zu stark. Ein guter Richtwert für Fotos auf Websites liegt bei wenigen hundert Kilobyte pro Bild.
werkstatt-regensburg.webp sagt Suchmaschinen mehr als IMG_4711.jpg.
Benennen Sie Dateien vor dem Hochladen nach dem, was zu sehen ist. Verwenden Sie Kleinbuchstaben und Bindestriche statt Leerzeichen und schreiben Sie Umlaute aus, also ae, oe und ue.
Der Alt-Text beschreibt in einem kurzen Satz, was auf dem Bild zu sehen ist.
Er wird Menschen vorgelesen, die das Bild nicht sehen können, und hilft Suchmaschinen, das Bild einzuordnen. Schreiben Sie, was für den Inhalt der Seite wichtig ist, nicht jedes Detail. Rein schmückende Bilder bekommen einen leeren Alt-Text, damit Vorleseprogramme sie überspringen.
Ein Bild im Querformat wird auf dem Smartphone oft stark beschnitten oder sehr klein.
Prüfen Sie auf dem Handy, ob das Wichtige im Bild noch zu sehen ist. Steht ein Motiv am Rand, verschwindet es bei schmalen Bildschirmen schnell. Bei wichtigen Bildern lohnt ein eigener Ausschnitt für die mobile Ansicht.
Verwenden Sie nur Bilder, für die Sie die Nutzungsrechte für Websites haben.
Bilder aus der Google-Suche sind nicht frei. Bei Stockbildern bestimmt die Lizenz, wo und wie lange Sie ein Bild nutzen dürfen. Sind Personen erkennbar, brauchen Sie in der Regel zusätzlich deren Einwilligung.
Binden Sie Bilder immer über die eigene Mediathek ein, nicht per Link von fremden Servern.
Ein Bild, das von einer fremden Website geladen wird, überträgt die IP-Adresse Ihrer Besucher an diesen Server. Das ist datenschutzrechtlich problematisch. Außerdem verschwindet das Bild, sobald der fremde Server es löscht oder verschiebt.
Bei einem Relaunch geht es nicht nur um ein neues Design. Wer Inhalte, Adressen und Zugänge vorher ordnet, behält seine Platzierungen bei Google und spart Zeit im Projekt. Diese neun Schritte helfen bei der Vorbereitung.