Bildgröße versus Ladezeit

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.

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.

Noch ein Nachtrag: 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.

• Diese Antwort wurde geändert vor 8 Jahren von Bego Mario Garde. Grund: Nachtrag

… Ich habe aber trotzdem Bilder mit 1920px und mehr unter Medien.

Das kann zwei Gründe haben:

1. werden alle Bilder auch im Originalformat auf dem Server gespeichert, um bei einem Theme-Wechsel die Erstellung verschiedener Bildgrößen erneut anzustoßen und
2. kann es sein, dass das Theme zusätzlich zu den Medieneinstellungen eigene Bildgrößen definiert hat – zum Beispiel, um ein Bildschirmfüllendes Header-Bild zu ermöglichen. Das neue Standard-Theme Twenty Seventeen nutzt z.B. ein Bild mit 2.000 x 1.200 Pixeln.

… jedoch keine Gedanken darüber machen, dass irgendeine überdimensional große Bilddatei die Performance verschlechtert. Richtig?

Das stimmt so nicht ganz. Zum einen solltest du beim Einfügen von Bildern die richtige Bildgröße auswählen (rechte, hellgrau hinterlegte Spalte unten) und zum anderen gilt das mit den responsiven Bildern nicht unbedingt für Slider oder Akkordeons.