Wie werden eigentlich meine Fotos beim Upload aufbereitet?

Frage: Von einem Tool zur Performance-Optimierung erhalte ich den Hinweis, dass ich die Bilder in meiner Webseite skalieren sollte. Ich weiß, dass Bilder in der Originalauflösung für das Web zu groß sind. Aber was macht eigentlich WordPress mit meinen Bildern und worauf sollte ich achten?

Wenn dein Theme für die Darstellung der Inhalte eine maximale Breite von 600 Pixeln vorgibt, ist bereits ein Bild mit einer Breite von 800 Pixeln zu groß: warum soll der Webseiten-Besucher mehr Dateiinhalt herunterladen, als er jemals angezeigt bekommt?

Wenn du ein Bild hochlädst (sagen wir mal 4 Megabyte groß und in einer Auflösung von 3.000 x 4.000 Pixeln) wird nicht nur das Bild auf dem Server gespeichert, sondern auch noch in verschiedenen kleineren Bildgrößen umgerechnet und auf dem Server gespeichert. Die Bildgrößen kannst du selbst im Menü Einstellungen > Medien festlegen, häufig fügen Themes noch eigene Bildgrößen hinzu, damit sich Bilder optimal in die Gestaltung einpassen. Du erhältst also im Verzeichnis `wp-content/uploads` zum Beispiel folgende Bilddateien:

• Urlaub-am-Meer.jpg (3.000 x 4.000px, 4MB)
• Urlaub-am-Meer-1024×682.jpg (105KB)
• Urlaub-am-Meer-768×512.jpg (64KB)
• Urlaub-am-Meer-300×200.jpg (13KB)
• Urlaub-am-Meer-150×150.jpg (Thumbnail, 6KB)

Ein 4 Megabyte großes Foto braucht für die Übertragung im Internet recht lang (besonders, wen man mit dem Smartphone in ländlicheren Gegenden unterwegs sind) und nimmt eigentlich nur unnötig Platz auf dem Webserver weg. Abhilfe schafft das Plugin Imsanity, bei dem du eine Obergrenze für die Abmessungen festlegen kannst. Werden Bilder bildschirmfüllend angezeigt, reicht hier meistens eine Obergrenze von 1900 x 1080 Pixeln (Full HD), werden die Bilder in Beiträge und Seiten eingebunden, ist oft schon eine Breite von 1400 Pixel ausreichend. Das auf dem Webserver verwendete Datenvolumen ist dann schon deutlich kleiner.

Bevor ich Bilder hochlade, optimiere ich sie nach Möglichkeit mit dem Programm Imageoptim, das nicht benötigte Farbprofile und EXIF-Daten aus dem Bild entfernt. Auch das spart ein wenig Bildgröße ein.

Um die Performance auf mobilen Endgeräten mit kleineren Bildschirmen zu verbessern, unterstützt WordPress seit Version 4.4 (Dez. 2015) so genannte Responsive Images. D.h. dass je nach Abmessung des Bildschirms unterschiedliche Bildgrößen zur Anzeige im Browser angeboten werden. Dabei greift WordPress auf die in Einstellungen > Medien und im Theme festgelegten Bildgrößen zurück. Bei einem Bildschirm mit einem Viewport von 375px wird also die nächstgrößere Bildgröße (768 x 512 px) übertragen und dann herunter skaliert, während auf einem Desktop-Monitor das Bild in einer größeren Abmessung angezeigt wird. Du brauchst dir also um die Skalierung keine Gedanken zu machen.

Ein besonderes Augenmerk solltest du auf Plugins legen, die Bilder mit Animationseffekten einfügen – also z.B. Slider oder Accordions. Unter Umständen werden hier die Bilder in Originalgröße eingefügt und nicht wie oben beschrieben skaliert. Eine Slideshow mit drei Fotos á 4MB können die Performance deiner Webseite empfindlich ausbremsen. Deshalb lohnt es sich ggf. hier, die Bilder schon vor dem Upload im Bildbearbeitungsprogramm für die Ausgabe zu optimieren.

Abschließend noch ein Wort zu den verschiedenen Tools, mit denen du die Performance deiner Website messen kannst: Diese Tools testen alle Websites nach einmal definierten Regeln und machen da keinen Unterschied zwischen der Website eines multinationalen Großkonzerns oder einem regionalen Blogger mit einem kleinen Einzugskreis. Wenn die meisten Besucher deiner Webseite aus dem gleichen Bundesland kommen, wäre der Einsatz eines Content Delivery Network (CDN) zur weltweiten Verteilung deiner Webseite ein wenig zu viel des Guten. Aber ohne CDN ist die Performance deiner Webseite aus der Perspektive eines Nutzers in Indien oder Brasilien sicher verbesserungswürdig.
Das war natürlich nur ein Beispiel, aber auch bei den übrigen Regeln sollte man abwägen, ob sich der Aufwand (auch finanziell) lohnt und eine Umsetzung der Optimierungsvorschläge überhaupt mit dem verwendeten Webhoster möglich ist.