Bilder für Webseite optimieren: So geht es richtig
Bilder optimierst du für deine Webseite in drei Schritten: Wähle das passende Dateiformat (für Fotos heute meist WebP oder JPEG), skaliere das Bild auf die tatsächlich benötigte Größe und komprimiere es vor dem Hochladen mit einem kostenlosen Tool oder einem WordPress Plugin. So bleibt die Qualität erhalten und deine Webseite lädt deutlich schneller.
Bilder sind ein wichtiger Teil des Web-Erlebnisses. Sie geben Artikeln einen Kontext, vermitteln Botschaften schneller und effektiver, und häufig macht es einfach Spaß, sie anzusehen. Gleichzeitig nehmen gerade Bilder verhältnismäßig viel Speicherplatz in Anspruch und bremsen unoptimiert die Ladegeschwindigkeit deiner Webseite aus.
In diesem Beitrag zeige ich dir, wie du deine Bilder für eine bessere Website-Performance optimierst: vom richtigen Dateiformat über kostenfreie Tools bis hin zu WordPress Plugins. Außerdem erkläre ich die wichtigsten Begriffe und beantworte häufig gestellte Fragen.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenOptimiere deine Bilder vor dem Hochladen
Bilder und Fotos auf Webseiten sind super, aber es wird oft vergessen, diese vor dem Hochladen zu optimieren. Das Ergebnis können Fotos von schlechter Qualität sein, die verpixelt oder unscharf aussehen, wenn sie im Web betrachtet werden. Darüber hinaus solltest du deine Bilder im Hinblick auf eine bessere Ladegeschwindigkeit optimieren.
Das richtige Bildformat / Dateityp für Bilder auswählen
Es gibt verschiedene Dateitypen für Bilder. Sehr häufig werden JPEG, PNG, WebP, GIF und SVG verwendet. Doch welcher Dateityp ist der richtige für deine Webseite? Das hängt vom Zweck und der Darstellung des Bildes ab.
JPEG (oftmals auch JPG geschrieben)
JPEGs sind der am häufigsten verwendete Dateityp für Fotos. Der Dateiname JPEG ist eine Abkürzung und steht für „Joint Photographic Experts Group“. Dieses Format wurde eigens für das Speichern von Fotos entwickelt. Bilder in diesem Format können gut komprimiert werden.
Vorteile:
– JPEGs sind der gebräuchlichste Dateityp und komprimieren eine Vielzahl von Details in fotorealistischen Bildern.
– Der Grad der Komprimierung ist einstellbar.
– Speicherplatzbedarf ist relativ gering.
Nachteile:
– Bei starker Komprimierung leidet die Bildqualität sichtbar.
– Es können keine Transparenzen im Bild wiedergegeben werden.
PNG
PNG steht für „Portable Network Graphics“. Bei diesem Dateiformat ist die Komprimierung nicht verlustbehaftet, im Gegenzug nehmen die Bilder (im Vergleich zum JPEG) mehr Speicherplatz in Anspruch. Der große Vorteil von PNGs besteht darin, dass Transparenzen im Bild wiedergegeben werden. Dies ist wichtig, wenn beispielsweise Personen oder Objekte freigestellt werden.
Vorteile:
– Das Bildformat PNG gibt Farben und Transparenzen verlustfrei wieder.
Nachteile:
– Mehr Speicherplatzbedarf, da die Komprimierung nicht so effizient wie bei JPEG ist.
WebP
WebP wurde von Google speziell für Bilder im Web entwickelt und ist heute der Standard für Fotos auf Webseiten. Die Dateien sind bei vergleichbarer Qualität rund 25 bis 34 Prozent kleiner als JPEGs. Außerdem unterstützt WebP Transparenzen und wird inzwischen von allen modernen Browsern dargestellt.
Vorteile:
– Hervorragende Bildkomprimierung bei guter Qualität.
– Unterstützt auch Transparenzen und Animationen.
– Wird von allen modernen Browsern unterstützt.
Nachteile:
– Nur sehr alte Browser und manche ältere Bildbearbeitungsprogramme können WebP nicht öffnen.
GIF
GIFs können für Animationen verwendet werden, im Grunde für jede kleine Animation, die nicht zu komplex ist. Allerdings können im GIF-Format nur Bilder mit maximal 256 Farben (8 Bit) dargestellt werden.
Vorteile:
– Eignen sich für einfache Animationen mit wenig Speicherplatzbedarf.
– Auch Transparenzen können dargestellt werden.
Nachteile:
– Ungeeignet für Fotos, da auf 256 Farben begrenzt. Wurde deswegen im Bereich der Bilder durch PNG und WebP abgelöst.
SVG
SVG (Scalable Vector Graphics) ist ein sogenanntes Vektorformat. Diese Vektorgrafiken setzen sich nicht aus Pixeln zusammen, sondern nutzen mathematische Formeln: Die Bilder bestehen aus Punkten, Linien und Kurven (die als Vektoren beschrieben werden). Da keine Pixel verwendet werden, kann das Bild beliebig groß- und kleinskaliert werden, und es bleibt dennoch stets gestochen scharf. Dieses Verfahren benötigt nur sehr wenig Speicherplatz und eignet sich hervorragend für die Darstellung von Logos und Icons. Komplexe Bilder können auf diese Weise leider nicht dargestellt werden.
Vorteile:
– Beliebige Skalierung, ohne dass die Darstellungsqualität leidet.
– Es wird nur sehr wenig Speicherplatz benötigt.
– Muss nicht weiter komprimiert werden (kann auch nicht komprimiert werden).
Nachteile:
– Eignet sich nur für simple Grafiken (zum Beispiel ein Logo). Komplexe Bilder lassen sich hiermit nicht darstellen.
– In den mathematischen Formeln, die das Bild beschreiben, lässt sich auch Schadcode verstecken.
Und was ist mit AVIF? AVIF ist das modernste Bildformat und komprimiert noch effizienter als WebP: Die Dateien sind bei vergleichbarer Qualität oft 30 bis 50 Prozent kleiner. Alle großen Browser unterstützen das Format inzwischen, und seit Version 6.5 kannst du AVIF-Bilder direkt in die WordPress Mediathek hochladen. Wenn du das Maximum an Performance herausholen möchtest, lohnt sich ein Blick auf dieses Format.
Komprimierung der Bilder
Nachdem das passende Dateiformat gewählt wurde, solltest du deine Bilder vor dem Hochladen auf die Webseite komprimieren. Achte dabei auch auf die Bildabmessungen: Lade ein Bild nur so groß hoch, wie es tatsächlich angezeigt wird. Ein Foto mit 6000 Pixeln Breite bringt in einem Blogbeitrag keinen sichtbaren Mehrwert, kostet aber unnötig Ladezeit.
Bei der Kompression von Bildern wird zwischen zwei Typen unterschieden: verlustfrei und verlustbehaftet.
Verlustfreie Optimierung
Bei der verlustfreien Komprimierung bleiben alle Bildinformationen erhalten. Es gehen also keine Details verloren, dafür fällt die Ersparnis bei Dateigröße und Ladezeit deutlich kleiner aus als bei der verlustbehafteten Optimierung.
Verlustbehaftete Optimierung
Die verlustbehaftete Komprimierung reduziert Bildinformationen. Das bedeutet, dass einige Details verloren gehen, die vorher für Farben, Strukturen usw. verwendet wurden. Der Grad der Optimierung lässt sich jedoch einstellen. Bei richtiger Verwendung ist ein Unterschied zum Originalbild nicht (oder nur sehr schwer) zu erkennen.
Für das Komprimieren der Bilder kannst du eine Bildbearbeitungssoftware wie Photoshop, Gimp oder das kostenlose Online-Tool Pixlr verwenden. Alternativ gibt es im Internet kostenfreie Tools wie TinyPNG, Compressnow oder Optimizilla. Mit diesen Hilfsmitteln lassen sich oftmals 30 bis 70 Prozent der Dateigröße einsparen.
Es gibt auch WordPress Plugins, welche die Bilder direkt nach dem Hochladen komprimieren und optimieren. Das ist praktisch, dennoch ist es ratsam, die Bilder schon vorab bestmöglich zu optimieren. Meine drei Favoriten stelle ich dir weiter unten vor.
TinyPNG
TinyPNG eignet sich besonders gut, wenn hochwertige, transparente PNG-Bilder komprimiert werden sollen. Das Tool kann PNG-Dateien um bis zu 80 Prozent verkleinern, ohne dass die Qualität sichtbar leidet. Inzwischen verarbeitet TinyPNG neben PNG und JPEG auch die modernen Formate WebP und AVIF und kann Bilder direkt in diese Formate umwandeln.
https://tinypng.com/
Compressnow
Dies ist ein weiteres kostenfreies Tool zur Bildoptimierung. Compressnow unterstützt die Dateiformate JPEG, GIF und PNG. Den Grad der Komprimierung legst du dabei selbst fest.
https://compressnow.com/
Optimizilla
Auch dieser Online-Bildoptimierer verwendet intelligente Kompressionsalgorithmen, um JPEG-, PNG-, WebP-, GIF- und SVG-Bilder auf die minimal mögliche Größe zu verkleinern, während das erforderliche Qualitätsniveau beibehalten wird. Praktisch: Du kannst mehrere Bilder auf einmal hochladen und die Qualität für jedes Bild einzeln per Regler feinjustieren.
https://imagecompressor.com/de/
Bilder für Webseite optimieren: WordPress Plugins
Glücklicherweise gibt es für WordPress viele Plugins, die Bilder automatisch optimieren. Das kann eine Menge Arbeit sparen. Dennoch halte ich es für ratsam, die Bilder wie beschrieben schon vor dem Hochladen zu optimieren. Anschließend übernimmt ein WordPress Plugin die finale Optimierung und kitzelt ein paar weitere Prozentpunkte an Ladegeschwindigkeit heraus. Bei Kundenprojekten sehe ich immer wieder, dass genau diese Kombination die besten Ergebnisse liefert.
Es gibt viele Plugins, die in diesem Bereich Hilfe versprechen. Dies sind jedoch meine Favoriten:
Smush
Smush (früher unter dem Namen WP Smush It bekannt) ist eines der beliebtesten Plugins für die Bildoptimierung in WordPress und auf über einer Million Webseiten im Einsatz.
Es komprimiert Bilder wahlweise verlustfrei oder verlustbehaftet, ohne offensichtlichen visuellen Unterschied zum Original. Zudem bringt Smush Lazy Loading mit und kann deine Bilder in die modernen Formate WebP und AVIF umwandeln.
Die Bedienung ist denkbar einfach: Einstellungen wählen, auf „Smush“ klicken, fertig.
EWWW Image Optimizer
Das Plugin EWWW Image Optimizer optimiert Bilder direkt beim Hochladen, und zwar kostenlos und ohne Mengenbegrenzung auf deinem eigenen Server. Auch bereits hochgeladene Bilder lassen sich nachträglich per Bulk-Optimierung verarbeiten. Dabei kann auch das Dateiformat konvertiert werden: Aus einem PNG-Screenshot wird auf Wunsch ein deutlich kleineres JPEG oder WebP.
ShortPixel Image Optimizer
Mit diesem Plugin kannst du in der kostenfreien Variante 100 Bilder je Monat komprimieren. Beachte dabei: Auch jede von WordPress erzeugte Vorschaugröße (Thumbnail) verbraucht ein Guthaben. ShortPixel verarbeitet PNG, JPG, GIF, WebP, AVIF und sogar PDF-Dateien. Es wird sowohl eine verlustbehaftete als auch eine verlustfreie Bildkompression unterstützt.
Übrigens: WordPress selbst bringt inzwischen einiges an Bordmitteln mit. Bilder werden seit Version 5.5 automatisch per Lazy Loading geladen, WebP-Uploads sind seit Version 5.8 möglich und seit Version 6.5 akzeptiert die Mediathek auch AVIF-Dateien. Wie stark optimierte Bilder auf die Ladezeit einzahlen, erfährst du in meinen Beiträgen zu den Google Core Web Vitals und zum Thema Ladezeit verbessern mit Caching.
Fazit
Bilder sind oft der größte Hebel für die Performance einer Webseite. Mit dem richtigen Dateiformat, einer sinnvollen Bildgröße und einer guten Komprimierung machst du deine Webseite spürbar schneller. Das freut nicht nur deine Besucher, sondern auch Google, denn die Ladezeit fließt in das Ranking ein. Die vorgestellten Tools und Plugins nehmen dir dabei fast die komplette Arbeit ab.
Du möchtest wissen, wo deine Webseite in Sachen Ladezeit und Bildoptimierung wirklich steht? Mit einer Webseiten-Analyse inklusive Beratung zeige ich dir die größten Baustellen und wie du sie behebst. Einen Überblick über alle Leistungen rund um WordPress und Webdesign findest du hier.
FAQ: Bildoptimierung für Webseiten
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
