Support » Allgemeine Fragen » Bildgröße versus Ladezeit

  • Liebe Gemeinschaft!

    Tools wie „Test My Site with Google“ melden mir, dass ich meine Bilder optimieren sollte.

    Nun ist klar, dass man keine 4000*4000 große Bilddatei hoch lädt, wenn im schlimmsten Fall 800*800 zu sehen sind. Trotzdem: Wie geht WordPress hier vor? Haben wenige hundert Pixel zu viel einen negativen Einfluss auf die Ladezeit der Seite?

    Vielen Dank im Voraus

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)
  • 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 3 Jahre, 9 Monaten von Bego Mario Garde. Grund: Nachtrag

    Vielen Dank für Deine ausführliche Antwort.

    Unter Einstellungen\Medien steht bei mir erstaunlicherweise 1024px * 1024px als Maximum. Ich habe aber trotzdem Bilder mit 1920px und mehr unter Medien.

    Wenn ich Deine Antwort jedoch richtig interpretiert habe, brauche ich mir mit einem Responsive-Theme, den Einstellungen unter Einstellungen\Medien (und der neuesten WordPress-Version) jedoch keine Gedanken darüber machen, dass irgendeine überdimensional große Bilddatei die Performance verschlechtert. Richtig?

    • Diese Antwort wurde geändert vor 3 Jahre, 9 Monaten von dunkelgrau.

    … 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.

    Doch, je nach Theme etc. kann auch das womöglich übergroße Originalbild in deiner Website verwendet werden und diese ausbremsen.
    Du kannst es ja recht leicht rausfinden, wie groß deine Bilder sind: Rechtsklick->Bild in neuem Tab öffnen und dort in voller Größe anzeigen lassen.

    Du kannst es ja recht leicht rausfinden, wie groß deine Bilder sind: Rechtsklick->Bild in neuem Tab öffnen und dort in voller Größe anzeigen lassen.

    Moment mal: Die Bilder, welche ich mit dem angegebenen Rechtsklick erreiche, sind tatsächlich diejenigen, welche die Website immer lädt, auch dann, wenn sie Responsive ist?

    Ich habe hier sofort ein Bild gefunden, welches mit Rechtsklick 3603 × 1940 Pixel hat, bei einem Full-HD-Browserfenster jedoch maximal mit circa 288 × 155 Pixel angezeigt wird.

    Dieses Bild müsste ich nun also austauschen, um meine Performance zu optimieren: Richtig?

    Ja, das ist eindeutig zu groß. Ist dann aber wohl auch vom Theme verschuldet. Gib doch einfach mal nen Link zu der Seite mit dem Bild.

    Ja, das ist eindeutig zu groß. Ist dann aber wohl auch vom Theme verschuldet.

    Gehe ich mit meinem Smartphone auf die Seite und speichere fragliches Bild ab, hat die gespeicherte Version lediglich eine Breite von 1024 Pixeln. Mein Handy hat eine Auflösung von 1440 Pixeln in der Breite, das Bild geht fast über die gesamte Breite: Scheint also zu passen.
    Gleiches Prozedere am Desktop: Datei im Browserfenster hat 288 Pixel, gespeicherte Datei hat allerdings 3603 Pixel.

    Wie kann ich das interpretieren?
    Für mich sieht es so aus, als würde die mobile Version nicht in der Geschwindigkeit beeinträchtigt, da die Größen passen. Am Desktop scheint es ein Problem zu geben. Kann mich aber auch irren, sonst hätte ich diesen Thread nicht eröffnet. 🙂

    Ohne Einblick in die Theme Files wird es an diesem Punkt schwierig, dir weiterzuhelfen.

    Das gibt uns keinen Einblick ins Theme, weil wir nur die fertig gerenderten Seiten, nicht aber den zugrunde liegenden Quellcode sehen. Zu gekauften Themes können wir meistens sehr wenig sagen, weil wir uns erst einmal das Theme kaufen müssten, um dir dann kostenlos den Support anzubieten, für den du den Theme-Entwickler bezahlt hast.

    Nachtrag: Das Bild „Mädchen mit Zahnspiegel“ in der Theme-Demo wird als Hintergrundbild eingebunden und dann per CSS skaliert. Wenn du hier ein zu großes Bild hinterlegst, wird das so auch auf jedem Endgerät heruntergeladen – auch, wenn der Bildschirm auf dem Smartphone nur einen Viewport von 500 Pixeln hat. Hier kannst du die Performance enorm steigern, wenn du das Bild vor dem Upload in einem Bildbearbeitungsprogramm verkleinerst und mit einem Bildoptimierer (z.B. TinyJPEG) optimierst.

    Sieht hier auf jeden fall so aus als ob das große Bild oben in Originalgröße eingebunden wird.
    Liegt am Theme.
    Wenn du das Theme nutzt, solltest du das Bild also vorher optimieren.

    Vielen Dank erst mal.

    „Mädchen mit Zahnspiegel“ ist der allseits bekannte Slider Revolution.

    Das von mir oben beschriebene Bild, wird – wie gesagt – zumindest auf dem Handy skaliert geladen.

    Hallo Grüß Dich Bego Mario Garde,

    habe einen selbst gehosteten Word Press Blog und war da letztens ein wenig irritiert dass da mein Speicherplatz beim Hosting-Serveranbbieter deutlich geschrumpft ist.

    Nun sah ich da genauer nach und siehe bei mir werden da 9 Bilder, anstatt wie Du oben schreibst 5 Bilder hochgeladen! Mein eigentliches Bild 860 * 606 Pixel hat zB. 145 KB. Mit den übrigen 8 Vorschaubildern komm ich da aber auf 329,18 KB.

    Möcht da anmerken hab das Gallery Manager Pro Plugin von Denis Hope installiert. Seh da aber nicht, dass dies Bilder abspeichert?

    Hast Du da einen Rat wie ich weniger Specher verbrauche und warum bei mir 9 Bilder hochgeladen werden?

    Herzlichen Dank
    Gruß
    werner p

    Ob vier, fünf oder auch neun Bilder abgespeichert werden, hängt davon ab, ob Theme und Plugins weitere Bildgrößen definieren. Ich kenne das Galerie-Plugin nicht, aber es ist gut möglich, dass es weitere Bildgrößen definiert. Eigentlich sollte das bei aktuellen Webhosting-Angeboten mit mehreren Gigabyte Webspace aber auch nicht weiter dramatisch sein, weil die verkleinerten Bilder meistens nur wenige KB groß sind.

    Was unter Umständen wirklich platz wegnimmt, sind Originaldateien aus der Digitalkamera, die drei, vier oder auch mehr Megabyte pro Bild belegen. Hier hilft das Plugin Imsanity, dass hochgeladene Fotos auf einen einmal eingestellten Maximalwert reduziert und die Originaldateien vom Webserver löschen. Die Löschung ist unwiderruflich, aber der Webserver sollte ja auch nicht als Bildarchiv genutzt werden. Dafür sind Dienste wie Amazon Drive besser geeignet.

    Vielen Dank für die informative Auskunft!
    Sah ein wenig im Theme und Plugin nach, blick da aber nicht ganz durch, werd mich mehr damit befassen.
    Amazon Drive kannte ich noch nicht, danke für den Tip.
    Herzlichen Gruß
    werner p

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)
  • Das Thema „Bildgröße versus Ladezeit“ ist für neue Antworten geschlossen.