Bilder für Webseite optimieren
Bilder sind ein wichtiger Teil des Web-Erlebnisses. Sie geben Artikeln einen Kontext, helfen dabei, Botschaften schneller und effektiver zu vermitteln, und häufig macht es einfach Spaß, sie anzusehen.
Doch Bilder sollten für den Einsatz auf der Webseite optimiert sein, damit das Bild einerseits gut dargestellt wird und andererseits eine schnelle Ladegeschwindigkeit der Webseite möglich ist. Schließlich nehmen insbesondere Bilder verhältnismäßig viel Speicherplatz in Anspruch.
Die Optimierung der Bilder für die Webseite kann dabei auf verschiedene Weise erfolgen, von kostenfreien Tools im Internet bis hin zu Plugins für WordPress.
In diesem Blog-Beitrag erfährst du, wie Bilder für eine bessere Website-Performance optimiert werden können. Außerdem werden Begrifflichkeiten erklärt und häufig gestellte Fragen beantwortet.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Optimiere deine Bilder vor dem Hochladen
Bilder und Fotos auf Webseiten sind super, aber es wird oftmals 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 sollten Bilder in Hinblick auf eine bessere Ladegeschwindigkeit optimiert werden.
Das richtige Bildformat / Dateityp für Bilder auswählen
Es gibt verschiedene Dateitypen für Bilder. Dabei werden JPEG, PNG, GIF und SVG sehr häufig verwendet. Doch welcher Dateityp ist der richtige für die Webseite? Das hängt vom Zweck und der Darstellung des Bildes ab.
Komprimierung der Bilder
Nachdem das passende Dateiformat gewählt wurde, sollten die Bilder, vor dem Hochladen auf die Webseite, komprimiert werden.
Bei der Kompression von Bildern wird zwischen zwei Typen unterschieden: Verlustfrei und Verlustbehaftet.
Verlustfreie Optimierung
Bei der verlustfreien Komprimierung bleiben alle Pixel erhalten. Somit gehen keine Informationen verloren, dennoch werden die Bildgröße und die Ladezeit etwas (sehr viel weniger als bei der verlustbehafteten Optimierung) reduziert.
Verlustbehaftete Optimierung
Die verlustbehaftete Komprimierung ist eine Art der Komprimierung, bei der Pixel reduziert werden. Das bedeutet, dass einige Informationen verloren gehen, die vorher für Farben, Details usw. verwendet wurden. Der Grad der Optimierung kann jedoch eingestellt werden. Bei richtiger Verwendung ist ein Unterschied zum Original-Bild nicht (oder nur sehr schwer) zu erkennen.
Für das Komprimieren der Bilder kann eine Bildbearbeitungssoftware wie beispielsweise Photoshop oder Gimp verwendet werden. Alternativ gibt es im Internet kostenfreie Tools wie TinyPNG, Compressnow oder Optimizilla. Mit diesen Hilfsmitteln lassen sich oftmals 30% – 70% der Dateigrößen einsparen.
Es gibt an dieser Stelle auch WordPress Plugins, welche die Bilder direkt nach dem Hochladen komprimieren und optimieren. Dies ist super, dennoch ist es oftmals ratsam die Bilder schon vorab bestmöglich zu optimieren.
TinyPNG
TinyPng eignet sich besonders gut, wenn hochwertige, transparente PNG-Bilder komprimiert werden sollen. Es kann PNG-Dateien um bis zu 80 % verkleinern, ohne dass die Qualität darunter leidet. Das Tool kann allerdings auch JPEG Bilder verarbeiten.
https://tinypng.com/
Compressnow
Dies ist ein weiteres kostenfreies Tool zur Bildoptimierung. Compressnow unterstützt die Dateiformate JPEG, GIF und PNG.
https://compressnow.com/
Optimizilla
Auch dieser Online Bild Optimierer verwendet intelligente Kompressionsalgorithmen, um JPEG und PNG Bilder auf die minimal mögliche Größe zu verkleinern, während das erforderliche Qualitätsniveau beibehalten wird. Ein Vorteil von Optimizilla ist, dass man bis zu 20 Bilder auf einmal hochladen, optimieren und anschließend downloaden kann.
https://imagecompressor.com/de/
Bilder für Webseite optimieren – WordPress Plugins
Glücklicherweise gibt es für WordPress viele Plugins, die Bilder automatisch optimieren. Dies kann eine Menge Arbeit sparen. Dennoch halte ich es für ratsam, die Bilder, wie beschrieben, vor dem Hochladen zu optimieren, um die bestmöglichen Ergebnisse zu erzielen. Anschließend kann ein entsprechendes WordPress Plugin die finale Optimierung vornehmen und somit ein paar weitere Prozentpunkte an Performance (im Bereich der Ladegeschwindigkeit der Webseite) herauskitzeln.
Es gibt viele Plugins, die in diesem Bereich Hilfe versprechen. Dies sind jedoch meine Favoriten:
WP Smush It
Dieses Plugin ist perfekt für die Optimierung der Bilder in einer WordPress-Website.
Es ändert die Größe und komprimiert Bilder ohne offensichtlichen visuellen Unterschied zum Original.
Zudem ist das Plugin wirklich einfach zu bedienen: Einfach die Bilder hochladen, die gewünschten Einstellungen wählen und dann auf “Smush now” klicken.
Dieses Plugin ist so beliebt, dass es auf über einer Million Webseiten im Einsatz ist.
EWWW Image Optimizer
Das Plugin EWWW Image Optimizer optimiert Bilder direkt beim Hochladen. Es können aber auch zuvor hochgeladene Bilder bearbeitet werden. Dabei kann auch das Dateiformat konvertiert werden: Wenn z. B. ein Screenshot in PNG hochgeladen wurde, kann die Konvertierung in JPEG zu einer kleineren Dateigröße führen.
ShortPixel Image Optimizer
Mit diesem Plugin können in der kostenfreien Variante 100 Bilder je Monat komprimiert werden. Dabei werden folgende Dateitypen verarbeitet: PNG, JPG, GIF, WebP und sogar PDF-Dateien. Es wird sowohl eine verlustbehaftete als auch eine verlustfreie Bildkompression unterstützt.
FAQ – Bildoptimierung für Webseiten
Gibt es eine maximale Anzahl von Bildern für eine Webseite?
Nein. Allerdings sollte man sich bewusst sein, dass mehr Bilder zu mehr Datenvolumen und damit auch zu einem langsameren Pagespeed führen können.
Was sind die Vorteile der Bildoptimierung?
Durch die Reduzierung der Dateigröße wird Speicherplatz eingespart. Hierdurch kann die Ladezeit der Website verbessert werden, da weniger Daten heruntergeladen werden müssen, um eine optimierte Seite zu laden. Benutzer sehen eine schnellere Website mit reaktionsfähigeren Bildern, die weniger Platz auf ihren Geräten einnehmen, was wiederum zu einer höheren Kundenzufriedenheit führt.
Welche Datengröße sollte ein Bild haben?
Das kommt ganz drauf an, wo und wie das Bild eingesetzt wird. Meine Empfehlung: Große Bilder (wie zum Beispiel das Hero-Bild) sollten maximal 130 – 250 KB haben. Kleine Bilder ca. 50 KB, Icons hingegen sollten 10 KB oder weniger Speicherplatz belegen.
Kann ich ein Bild vergrößern / verkleinern, ohne das es verpixelt?
Ja, vorausgesetzt es handelt sich um eine Vektorgrafik (also beispielsweise eine SVG). Pixelgrafiken (z.B. JPEG, PNG) leiden jedoch unter einer Skalierung. Werden jedoch solche Bilder nur sehr geringfügig in der Größe angepasst, so ist der Qualitätsverlust wahrscheinlich nicht ersichtlich.
Welches Bildformat soll ich bei Transparenzen im Bild verwenden?
Hier eignet sich PNG. Zwar werden Transparenzen auch von GIF unterstützt, die Qualität des Bildes ist jedoch bei PNG weitaus besser.
Soll ich Bilder im Format Webp auf meiner Webseite verwenden?
Ja, da Webp-Bilder, trotz guter Qualität, sehr stark komprimiert sind und auf Webseiten sehr schnell geladen werden. Allerdings wird Webp noch nicht von jedem Browser unterstützt. Aus diesem Grund sollten die Bilder auch im Format JPEG bereitgestellt werden. Mit Hilfe von Programmen kann dann jedem Browser das Bild im entsprechenden Format ausgespielt werden (alte Browser erhalten das JPEG Bild, neue Browser nutzen das Webp Bild). Diese intelligente Bildverteilung kann beispielsweise mit dem Plugin WP Fastest Cache Premium umgesetzt werden.
Was bedeutet Lazy Load?
Lazy Loading, wörtlich „faules Laden“ bedeutet im Kontext der Bildoptimierung, dass die Bilder auf der Webseite erst dann geladen werden, wenn diese in das Sichtfeld des Webseitenbesuchers gelangen. Durch dieses Verfahren kann die Webseite schneller geladen werden, was für die Suchmaschinenoptimierung sehr positiv ist.
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
