Der ultimative Bilder-für-WordPress-Guide

Bilder transportieren Emotionen. Bilder sagen mehr als 1000 Worte. Bilder sind also wichtig - auch für deine Website.

Doch gerade die Kombination von Bildern und WordPress birgt so ihre Tücken. Machst du hier Fehler, lädt deine Website langsam. Dies führt dazu, dass potentielle Kunden verloren gehen und dein Suchmaschinen-Ranking leidet.

Dieser Guide enthält daher das ultimative Wissen über die Verwendung von Bildern in WordPress.
Der ultimative Bilder-für-WordPress-Guide

Große Bilder = lange Ladezeit = schlechtes Google Ranking

Fotos von aktuellen Smartphones generieren sehr große Bilder. Fotos vom aktuellen iPhone haben eine Auflösung von 4032x3024 Pixel (12 Megapixel) und sind ca. 6MB groß. Pro Foto. Huawei’s Top-Modell schießt sogar Fotos mit 8000x6000 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.

All-Inkl PrivatPlus

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.

All-Inkl PrivatPlus

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.

All-Inkl PrivatPlus

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.

All-Inkl PrivatPlus
All-Inkl PrivatPlus

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.

Die Qual der Wahl

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

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 online ändern mit iLoveIMG

Du hast auf einem älteren Rechner ohne Paint 3D? Dann kannst du auch iLoveIMG verwenden. Öffne https://www.iloveimg.com/de und wähle “BILD skalieren” (oder eine der anderen, sehr nützlichen Funktionen).

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:

All-Inkl PrivatPlus

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

All-Inkl PrivatPlus

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: kümmere dich um 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:

  1. Die Auflösung sollte nur so hoch wie unbedingt notwendig sein, maximal 800-1400 Pixel
  2. Die Datei selbst sollte in den meisten Fällen kleiner als 250kB sein
  3. 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,

Lies weiter

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die Daten werden wie in der Datenschutzerklärung angegeben verarbeitet und gespeichert.

DI (FH) Michael Baierl - einfach Websites für Selbstständige

Hi! Ich bin Michael, Web-Entwickler aus Wien.

Du findest hier Tipps & Tricks rund um deine Selbstständigkeit sowie deine Website.

Lass uns einfach Websites bauen!

Der ultimative Bilder-für-WordPress-Guide
18 Bewertungen: 4.7