Große Bilder = lange Ladezeit = schlechtes Google Ranking
Die Formel ist relative einfach.
Fotos von aktuellen Smartphones generieren sehr große Bilder. Schnappschüsse vom aktuellen iPhone haben eine Auflösung von 4032×3024 Pixel (12 Megapixel) und sind ca. 6MB groß. Pro Foto. Huawei’s Top-Modell schießt sogar Fotos mit 8000×6000 Pixel (48 Megapixel) – und produziert Dateien mit ca. 12MB Größe.
Bindest du so ein Foto in deine Website ein wird sie ewig laden. Deine Besucher warten aber nicht gerne. Ist deine Seite nicht innerhalb von wenigen Sekunden geladen, werden sie zu einer anderen Seite wechseln.
Akamai hat genau zu diesem Thema eine Studie durchgeführt. Die Erkenntnis daraus – 40% der Benutzer verlassen die Seite, wenn diese länger als 3 Sekunden lädt.
Für Google ist Performance ein wichtiger Ranking-Faktor. So soll eine Mobile Website über ein 3G (!) Netzwerk binnen 5 Sekunden geladen sein (Quelle).
Diese 5 Sekunden wirst du mit einem 6MB-Bild nicht schaffen. Google erkennt das und wird deine Seite in den Suchergebnissen weiter hinten reihen.
Du musst deine Bilder also entsprechend optimieren, wenn du auch gefunden werden willst!
Die ideale Auflösung von Bildern für WordPress
Unter Auflösung ist die Breite und Höhe eines Bildes in Pixel gemeint.
Die perfekte Auflösung für WordPress hängt davon ab, wo du deine Bilder verwendest. Das Hintergrundbild im Header wird breiter sein müssen, als das kleine Foto weiter unten in deiner Seite.
Üblicherweise ist eine Auflösung von 800-1400px bei einer Pixeldichte von 72dpi aber ausreichend. Das spart beim Beispielbild schon über 90% der Pixel, die gespeichert werden müssen.
Die ideale Dateigröße von Bildern für WordPress
Die Dateigröße bestimmt, wie viel Speicherplatz eine Bilddatei belegt. Das ist auch die Datenmenge, die von deinem WordPress zum Mobiltelefon des Besuchers übertragen werden muss.
Je größer, desto langsamer.
Die Dateigröße ist von folgenden Faktoren abhängig:
- der Auflösung – je mehr Pixel das Bild hat, desto größer wird die Bilddatei
- der Komprimierung und dem Bildformat (mehr dazu gleich)
- dem Bildinhalt. Ein rein weißes “Bild” ist viel kleiner als ein Bild mit komplizierten Mustern und Strukturen.
Idealerweise sind die Bild-Dateien kleiner als 250kB, wenn möglich noch kleiner.
Die richtigen Dateiformate für’s Bild
Bilder von Mobiltelefonen werden als JPEG (oder JPG) gespeichert.
Die Dateien sind bei JPEG sehr klein, das Format hat aber den Nachteil, dass es verlustbehaftet ist.
Was heißt das? Beim Speichern gehen Informationen im Bild verloren. Das kannst du zum Beispiel an Objektkanten sehen – diese fransen aus und werden unscharf.
Das Bildformat PNG hingegen ist verlustfrei. Der große Nachteil – die Dateien sind viel größer. Dafür kann PNG den Hintergrund transparent darstellen. Dieses Format eignet sich daher perfekt für Logos und Icons.
WebP ist ein neues Format, welches die Vorteile von JPEG und PNG vereinen soll. Das Problem dabei ist – es wird noch nicht von allen Browsern unterstützt, daher würde ich es – außer in Sonderfällen – noch nicht einsetzen.
Dann gibt es noch GIF, hauptsächlich bekannt von den animierten GIFs in diversen Chat-Programmen. Das Dateiformat ist sehr alt, die Dateien sind riesig, aber es wird aufgrund seines Alters von jedem erdenklichen Programm unterstützt. Und es kann Animationen darstellen.
Die Alternative “Animated PNG”, eine Erweiterung des PNG Formates. Leider ist aber auch hier der Support von den Browsern noch nicht sehr gut.
Eventuell kennst du auch noch SVG – mit ein paar Tricks kannst du dieses Format auch in WordPress verwenden. Dieses Format hat aber mit den oben genannten Bilddateien nicht viel zu tun, denn es ist ein Vektor-Format. Logos können so in jeder beliebigen Auflösung gestochen scharf dargestellt werden, das Format kann aber keine Fotos darstellen und wird daher hier nicht weiter betrachtet.
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
Die Qual der Wahl: JPG, PNG, WEB, GIF oder SVG?
Die Auswahl des richtigen Bildformats ist ganz einfach:
- für Fotos verwende JPEG mit ca. 80% Qualitätseinstellung
- für Logos, Icons und Bilder, die einen transparenten Hintergrund benötigen verwende PNG
- verwende GIF nur, falls du unbedingt eine kurze Animation auf deiner Webseite einbinden willst
Hier findest du das ganze übersichtlich als Tabelle:
| JPG | PNG | WEBP | GIF | SVG | |
| Fotos | ✅ | ✅ | |||
| Logos | ✅ | ✅ | ✅ | ||
| Illustrationen | ✅ | ✅ | ✅ | ✅ | |
| transparenter Hintergrund | ✅ | ✅ | ✅ | ✅ | |
| Icons | ✅ | ✅ | ✅ | ||
| Animationen | ✅ | ✅ | |||
| Unendlich skalierbar | ✅ |
Der richtige Dateiname für Bilder im WordPress
Der Dateiname hat einen großen Einfluss auf dein Ranking bei Suchmaschinen. Benenne alle Dateien daher sinnvoll entsprechend ihrem Inhalt.
Der Dateiname soll nur aus Kleinbuchstaben bestehen, Leerzeichen werden durch einen Bindestrich “-“ ersetzt.
So wird dann aus dem nichtssagenden Namen DSC01248.JPG auf einmal die Datei kinkling-auf-nusa-penida-bali.jpg. Und nicht nur Google versteht sofort, was damit gemeint ist.
Wie du die Bildgröße ganz einfach änderst
Die Bildgröße am Mac anpassen mit der Vorschau-App
Vorsicht! Die Vorschau-App speichert Änderungen direkt im Originalbild. Lege dir also vorher immer eine Kopie an!
Öffne dann das Bild mit der App “Vorschau” und wähle im Menü “Werkzeuge” > “Größenkorrektur”. In diesem Dialog kannst du die neue Auflösung des Bildes in Pixel bestimmen.
Willst du das Optimum aus deinem Bild herausholen, kannst du als nächsten Schritt unter “Datei” > “Export” beim Export auch die Qualität des Bildes (80% sind ein guter Wert!) einstellen.
Die Bildgröße unter Windows 10 ändern mit Paint 3D
Klicke rechts auf dein Bild und wähle “Öffnen mit” > “Paint 3D”. Ist Paint 3D noch nicht installiert, kannst du es aus dem Windows-Store laden.
Wenn das Bild in Paint 3D geöffnet ist, wähle in der Menüleiste “Zeichenbereich”. In der rechts eingeblendeten Menüleiste kannst du unter “Zeichenbereichgröße ändern” die gewünschte Größe auswählen.
Speichere das Bild dann mit der Tastenkombination [Strg] + [S]. Das Originalbild wird dabei überschrieben. Oder du wählst links oben “Menü” und dann “Speichern unter” > “Bild” um eine Kopie zu speichern.
Die Bildgröße mit Online-Tools ändern
Du arbeitest auf einem älteren Rechner ohne Paint 3D? Auch Windows 11 bringt leider kein Paint 3D mehr mit – es kann aber via Microsoft Store nachinstalliert werden.
Solltest du das nicht wollen oder eben einen Computer ohne Paint 3D besitzen, dann kannst du auch iLoveIMG oder die MonsterTools verwenden. Öffne das Tool und wähle “BILD skalieren” (oder eine der anderen, sehr nützlichen Funktionen).
Hol dir Divi bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Divi unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Die Dateigröße optimieren mit TinyPNG
Nachdem du die Auflösung angepasst hast wird deine Datei schon um einiges kleiner sein.
Bei meinem Beispiel-Bild sind es 578kB statt 4.7MB, also über 90% Ersparnis.
Da geht aber noch mehr!
Und zwar gibt es das geniale Service von TinyPNG (die auch JPEGs komprimieren). Das spannende ist – du wirst visuell keinen Unterschied erkennen, die Dateigröße nimmt aber massiv ab:
Öffne TinyPNG und ziehe dein Foto auf die Website. Dann dauert es ein wenig, der “Panda” (du wirst schon sehen ;-) macht seine Arbeit, und du kannst dir die optimierte Version des Bildes herunterladen.
In meinem Fall habe ich ganze 49% eingespart. Je nach Bild können es aber auch bis zu 80% sein.
Und genau diese optimierte Datei ist das Bild, welches du in WordPress hochladen solltest!
Übrigens, es gibt TinyPNG auch als Plugin für WordPress: Compress JPEG & PNG images By TinyPNG
Eine genaue Anleitung, wie du das Plugin aufsetzt findest du bald in diesem Blog!
Fazit: optimiere deine Bilder!
Lädst du Bilder unbearbeitet direkt von der Kamera oder aus dem Internet hoch, verschenkst du kostbare Performance.
Beachte daher die folgenden Punkte, bevor du ein Bild in WordPress hochlädst:
- Die Auflösung sollte nur so hoch wie unbedingt notwendig sein, maximal 800-1400 Pixel
- Die Datei selbst sollte in den meisten Fällen kleiner als 250kB sein
- Optimiere die Bilder zusätzlich mit dem TinyPNG-Service, bevor du sie in WordPress hochlädst
Sind noch Fragen zu Bildern offen geblieben?
Ich freue mich auf deinen Kommentar!
Lass uns einfach Websites bauen,
Michael
PS: Übrigens, es gibt gute Quellen für kostenlose Bilder, Grafiken Icons und auch Logos!
Weitere Fragen zu Bildformaten
Was ist der Unterschied zwischen JPG und PNG?
Der Hauptunterschied zwischen JPG und PNG ist, dass JPG ein verlustbehaftetes Kompressionsformat ist, während PNG ein verlustfreies Kompressionsformat ist.
Das bedeutet, dass JPG-Dateien in der Regel kleiner sind, aber auch eine geringere Qualität haben können, während PNG-Dateien größere Dateigrößen haben, aber eine höhere Qualität beibehalten.
Im Idealfall verwendest du aber das WebP-Format für deine Bilder.
Was ist besser – JPEG oder PNG?
Es hängt von der Art des Bildes ab, das du hast.
Wenn du ein Foto hast, das eine hohe Farbvielfalt hat, ist JPG wahrscheinlich die bessere Wahl, da es eine kleinere Dateigröße hat und die Qualität nicht so stark beeinträchtigt wird.
Wenn es sich jedoch um eine Grafik, Illustration oder ein Logo handelt, ist PNG oder WebP die bessere Wahl sein, da es eine höhere Qualität beibehält.
Wann sollte ich das WebP-Format verwenden?
Das WebP-Format sollte verwendet werden, wenn die Ladezeit einer Webseite verbessert werden muss.
WebP-Dateien sind in der Regel kleiner als JPG- oder PNG-Dateien, ohne dabei die Qualität zu beeinträchtigen. Dies kann zu einer schnelleren Ladezeit der Seite führen.
WebP vereint die Vorteile von JPG und PNG.
Wird WebP von allen Browsern unterstützt?
Alle modernen Browser unterstützen das WebP-Bildformat.
Chrome, Firefox, Safari und Edge unterstützen WebP, während Internet Explorer und ältere Versionen von Safari und Edge dies nicht tun.
Du kannst WebP bedenkenlos verwenden, denn Internet Explorer ist offiziell nicht mehr verfügbar.
Hier findest du die komplette Liste der unterstützen Browser.
Welches Bildformat ist für's Web am besten geeignet?
Das hängt von der Art des Bildes und der Verwendung ab. In der Regel sind JPG-Dateien für Fotos am besten geeignet, während PNG-Dateien für Grafiken und Bilder mit klaren Linien besser geeignet sind.
Wenn jedoch die Ladezeit der Website ein Problem darstellt, kann es sinnvoll sein, das WebP-Format zu verwenden, um die Größe der Dateien weiter zu reduzieren.
0 Responses
Hallo Michael, das ist wirklich ein aufschlussreicher und hilfreicher Artikel, der durch deine Ausdrucksweise noch verständlicher wird! Danke für den Tipp zum Service “TinyPNG”, damit konntest du wirklich sehr viel Dateigröße einsparen und ich nun sicherlich auch.
Viele Grüße
Antonia
Liebe Antonia,
sehr gerne.
Michael