Bilder: Segen für Besucher und Suchmaschinen, Fluch für die Aufbaugeschwindigkeit deiner Seite? Das muss nicht sein! Vor allem wenn du deine Beiträge oft und gerne mit Bildern beschmückst, sollte dir aufgefallen sein, dass Bilder maßgeblich zur Leistung deiner Website beitragen.Im nachfolgenden stelle ich dir Möglichkeiten vor, wie du die Bilder deiner WordPress-Site optimieren kannst, um deiner Site einen nicht unmerklichen Leistungsschub zu verschaffen. Ohne jetzt die üblichen Floskeln aufgreifen zu müssen, gehe ich auch auf die Sinnhaftigkeit von Bildern in Beitragstexten ein.

meine Ohren sind leer, meine Augen sind alt und gebeugt…

Das geht nicht nur Mitgliedern der Volksfront von Judäa so, das kennt man auch vom vielen Lesen am Monitor oder auf dem Smartphone. Egal, wie schön auch die Gestaltung einer Site gelungen ist, einen langen Text zu lesen ist generell anstrengend, vor allem, wenn man dazu  noch beruflich oder auch zuhause viel an Monitoren sitzen darf oder muss. Dabei haben Blogger und Webmaster grade durch Grafiken und Bilder die Möglichkeit, unseren hiesigen Lesern die wohlverdiente Pause zu gönnen.

Bilder: Suchmaschinen und Barrierefreiheit

Obgleich ich mir vornahm, auf Buzzwords zu verzichten, sind Bilder bei Suchmaschinen durchaus beliebt. Natürlich sind eigens für Websites erstellte oder aufgenommene Bilder immer noch am Besten, aber den Luxus hat man ja leider nicht immer. Ich schrieb in der Vergangenheit auch einen Beitrag, der dir qualitative Quellen für Bilder für Blogger zeigt. Wer aber viel mit Bildern arbeitet und diese ganz nach Lehrbuch schön mit einem <alt>-Tag versieht und die Bilder noch thematisch passend platziert, hat in den Augen seiner Leser und folglich auch in denen der Suchmaschinen gewonnen. Ein Wort allerdings zur Barrierefreiheit: Sieh bitte davon ab, relevante Informationen in einem Bild zu verstecken. Das Web soll allen Menschen zugänglich sein - wenn du allerdings ausschließlich mit Infografiken arbeitest, schließt du Blinde kategorisch aus. Dies sei gesagt, um nicht zu implizieren, dass Bilder gut für Barrierefreiheit seien. Sie sind es nicht, und der <alt>-Tag ist auch nur eine Krücke.

Bilder und Ihr Einfluss auf die Performance

Natürlich hängt die Leistung einer Website nicht einzig und allein vom Optimierungsgrad oder der Anzahl der darin verwendeten Bilder ab. Dennoch spielen Bilder bedeutend in die Ladegeschwindigkeit hinein:

1. Bilder erzeugen einen HTTP-Request
2. Bilder werden in Ihrer vollständigen Dateigröße geladen

In einer Zeit, in der Menschen oftmals mit Ihrem Smartphone ins Netz gehen, bedenke, dass viele Besucher deiner Website keine LTE- oder WLAN-Verbindung haben. Wenn ein Bild 1024 KB groß ist, werden 1024 KB geladen. Grade Smartphone-Nutzern oder Lesern ohne Heim-Flatrate kommst du gewaltig entgegen, wenn du die Dateigröße von Bildern reduzierst. Den HTTP-Request kannst du nicht entfernen - aber die Art, wie mit HTTP-Requests umgegangen wird, verbessert sich entscheidend mit HTTP/2. Zielsetzung jetzt: Die Dateigröße unserer aller Bilder verringern.

Das zuständige WordPress-Plugin: EWWW Image Optimizer

Der EWWW Image Optimizer zum Download im offiziellen Plugin-Verzeichnis[/caption] WordPress wäre aber eben nicht WordPress, wenn es nicht für jeden Topf einen Deckel oder eben ein Plugin gäbe. Der EWWW Image Optimizer setzt bei der Dateigröße an und optimiert diese: Und zwar durch Komprimierung, dass unser Auge den Unterschied kaum wahrnimmt.

.JPG oder .PNG? Welches Bildformat?

Leider liegt der Fehler aber auch oft schon beim Dateiformat. Im Web haben sich nach einiger Zeit die Formate .png und .jpg durchgesetzt - und beide Formate haben Einsatzgebiete. Meine persönliche Eselsbrücke:

• Grafik: PNG
• Foto: JPG

Das PNG-Dateiformat eignet sich besonders gut für Webgrafiken, das heißt am Rechner erstellte Grafikassets wie Logos oder Hintergrundmuster - aber auch Zeichnungen mit einer geringeren Farbpalette. Bei hochauflösenden Bildern oder eben in der echten Welt geschossenen Fotos ist JPG das Format deiner Wahl. Wenn es um eine riesige Farbpalette und Auflösung geht, zieht PNG ganz klar den kürzeren.

Loslegen mit dem EWWW Image Optimizer

Bei der Aktivierung allein geschieht erst einmal nichts: Aber im Dashboard findest du unter dem Reiter Medien neue Unterpunkte. Hier solltest du zuerst deine gesamte Mediathek optimieren, sprich Bulk Optimize. Dieser Vorgang kann allerdings je nach Größe der Mediathek dauern. Der Image Optimizer nimmt sich übrigens auch jedes ab sofort hochgeladene Bild vor. Die Konfiguration des Image Optimizers kannst du unberührt lassen - dort kannst du, falls du dich etwas mit der Materie um Grafiken und Kompression auskennst, verschiedene Kompressionsverfahren bzw. -Algorithmen wählen.

Mein Fazit: Spürbarer Unterschied.

Die Optimierung meiner Mediathek war ein richtiger Schritt in die richtige Richtung - der EWWW Image Optimizer konnte meine Mediathek insgesamt um etwa 30% verringern. Wie optimierst du deine Bilder im Blog? Optimierst du deine Bilder schon vor dem hochladen?