Bilder für das Web optimieren- Wie geht das?
Eine Website ohne Bilder? Wohl kaum. Bilder sind ein extrem wichtiger Bestandteil von informativen Webseiten-Inhalten und nicht wegzudenken, da sie einen erheblichen Mehrwert darstellen.
Da die Ladezeit einer Webseite zusätzlich in den Rankingfaktor einer Suchmaschine eingeht und die Seite bei einer schnelleren Ladezeit von Suchmaschinen priorisiert wird, ist es essentiell, Bilder für das Web zu optimieren und diese auf der eigenen Site zu platzieren. Schnelle Seiten nehmen einen höheren Rang bei den Suchmaschinen ein, und Bilder können bei kleinerer Dateigröße in der Bildersuche einer Suchmaschine auch wesentlich schneller indiziert werden.
Außerdem sind User bekanntlich schnell genervt, wenn das Laden einer Seite nicht schnell genug geht. Die Wahrscheinlichkeit, dass dann diese entsprechende Website wieder besucht wird, sinkt! Daher ist es extrem wichtig, Bilder für das Web zu optimieren.
Optimierung bedeutet in diesem Zusammenhang: maximal optisch ansprechendes Ergebnis bei geringem Speicherplatzbedarf bzw. geringer Dateigröße. Daher ist es besonderes wichtig, diese Aspekte eines Bildes zu verbessern. Hierbei sind einige Aspekte zu beachten, damit ein optimales Ergebnis resultiert. Werden Bilder für das Web optimiert, ist das wichtigste Ziel immer die Optimierung der Ladezeit und eine gute optische Performance der Inhalte. Es gibt so gut wie keine anderen Maßnahmen, die Ladezeit einer Webseite zu verkürzen (bis zu 50%) als Bilder für das Web zu optimieren.
Diese Optimierung der eingebetteten Bilder verbessert die Performance der Website. Ein guter Workflow zur Optimierung der Bilder ist daher Gold wert. Außerdem wird die Erstellung von Back-Ups von Websiten beschleunigt, wenn die Dateigrößen geringer ausfallen und auch weniger Bandbreite in Netzwerken und bei Browsern verbraucht.
Dass nachdem Bilder für das Web optimiert wurden, dann konsekutiv auch weniger Speicherplatz auf dem Server benötigt wird, versteht sich von selbst.
Beim Bilder für das Web zu optimieren geht es zunächst darum, die optische Performance eines Bildes zu verbessern. Selbstverständlich sollte man voraussetzten, das Bildkomposition, Motivwahl und Aussage des Bildes bereits bei der Aufnahme optimal gestaltet wurden. Auch die Auswahl an geeigneten Bildern ist eine Kunst für sich.
Die kürzeste Ladezeit und die geringeste Dateigröße bringen nichts, wenn das Bild an sich schlecht ist und nicht zum Thema passt. Da der sogennante visuelle Content immer bedeutender wird (Stichwort: soziale Medien), wird auch die Qualität eines Bildes immer bedeutsamer. Schließlich umgeben uns diese Bilder überall und in vielfacher Art und Weise. Und eine Website ohne Bilder mit ausschließlichem Textinhalt wirkt eintönig und überladen.
Bilder für das Web zu optimieren umfasst mehrere Komponenten und Arbeitsvorgänge. Zum einen sollten Klarheit und Dynamik so angepasst werden, dass ein stimmiger Gesamteindruck entsteht. Optionen wie Schärfung und Weichzeichnung sollten sparsam, aber nachhaltig eingesetzt werden. Gelegentlich sind weitere Anpassung wie Objektivkorrekturen oder die Entfernung von chromatischen Aberrationen notwendig. Die Bildbearbeitung ist sehr vom Verwendungszweck abhängig. Der Gesamteindruck des Bildes sollte immer auch zum Gesamteindruck der Website passen. Außerdem sollten in einem weiteren Bearbeitungsschritt alle Metadaten außer der Copyright Information entfernt werden. Dieser Bearbeitungsschritt kann einige Byte pro Foto einsparen (ca. 10KB). Wasserzeichen sind Geschmackssache, können den Bildeindruck stören, aber den Bilderdiebstahl nicht zuverlässig verhindern.
Bilder für das Web zu optimieren bedeute, die die Datenmenge zu reduzieren. Daher ist ein ausreichendes Beschneiden der Bildgröße (“Cropping”) sehr wichtig: die Entfernung unwichtiger Bildinhalte spart zusätzliches Volumen an Speicherplatz ein.
Wenn es um das Thema Bilder für das Web optimieren geht, bieten viele professionelle Anbieter von Bildbearbeitungssoftware auch die Funktion “Optimiert für Web-Speichern” oder Ähnliches an. Oft kann mit diesem Tool eine gutes Resultat erzielt werden. Außerdem sollte dem Bild beim Speichern ein aussagekräftiger Name gegeben werden (am Besten mit einem schlüssigem Keyword, das zur entsprechenden Website passt), da beim Hochladen WordPress einen Permalink erstellt.
Daher kann dann ein Bild mit einem guten Keyword und dem Permalink durch eine Suchmaschine wesentlich schneller gefunden werden, was sich wiederum positiv auf das Ranking auswirken wird.
Bilder für das Web optimieren - Bildgröße anpassen!
Nachdem das Bild optisch optimiert wurde – also gut aussieht- sollte die Bildgröße angepasst werden. Hierbei wird oft Bildgröße mit Auflösung verwechselt. Die Bildgröße oder Bildmaße meinen die Länge und Breite eines Bildes in Pixeln. Ein Bild der Größe 800×1000 Pixel ist also 800 Pixel hoch und 1000 Pixel breit. Die Bildmaße richten sich nach der Anwendung und dem gewünschten optischen Eindruck des Bildes. Wichtig ist, dass ein Bild sowohl auf einem mobilen Endgerät also auch auf einem Desktop-PC gut zur Geltung kommt.
Je höher die Auflösung des Endgeräts (Smartphone, Desktop-PC, TV-Monitor) ist, desto kleiner wird auch ein Digitalbild angezeigt. Die Displays eine immer höhere Auflösung aufweisen, werden somit die Inhalte auch immer kleiner dargestellt. Dies gilt übrigens nicht in Relation übrigens nicht für die unkomprimierten Original-Dateien der Digitalkameras, da deren Auflösung mit zunehmendem Entwicklungsstand ebenfalls steigt.
Es gibt zahlreiche im Internet verfügbare Freeware, mit der Online die Bildmaße schnell und unkompliziert angepasst werden können. Die Nutzung dieser Software ist sehr effektiv und zielorientiert.
Ein wichtiger Aspekt ist die Wahl des idealen Bildformats. Es gibt zahlreiche relevante Bildformate, wobei einige sich besonderes für die Anwendung auf einer Website eignen.
Noch einige Worte zu den Stichwörtern “verlustbehaftet” und “verlustfrei”:
Bei einer verlustbehafteten Filterung gehen Daten aus dem Bild verloren, was zwangsläufig zu einer Verschlechterung der Qualität führt. Hierdurch läßt sich die Dateigröße um ein Vielfaches reduzieren. Bei verlustfreier Darstellung werden die Daten komprimiert und wieder dekomprimiert, worunter die Qualität nicht leidet. Möchte man die Datenmenge reduzieren, sind Qualitätsverluste meist unausweichlich. Es gilt also immer, eine gute Balance zu finden.
Bilder für das Web optimieren: welche geeigneten Dateiformate gibt es hierfür ?
jpeg
Beim Thema Bilder für das Web optimieren kommt man am jpeg nicht vorbei. Diese Format ist ein wirklicher Allrounder; es gibt eine verlustbehaftete und verlustfreie Optimierung. Es eignet sich perfekt für eine fotorealistische Darstellung von Bildinhalten. Je nach Komprimierungsgrad variieren Dateigröße und Qualität. Bei einer höheren Komprimierung sinkt die Größe, jedoch auch die Qualität und damit der optische Eindruck. Außerdem kommt es bei höherer Komprimierung zu einer deutlichen Artefaktbildung insbesondere bei homogenen farbigen Flächen, was im Bildeindruck sehr störend sein kann. Die Komprimierung sollte so gewählt werden, dass die Artefakte entweder nicht sichtbar sind oder zumindest nicht störend wirken. Bei einer gut angepassten Komprimierung sind die Qualitätsunterschiede fast unmerklich. Eine Kompressionsstufe von 60-75% liefert meist noch eine gute Qualität bei vernünftiger Dateigröße. Jpeg ist immer noch das Standartformat für Fotos in hoher Qualität.
GIF
Das GIF-Format ist für bewegte, einfache Bildserien geeignet. Allerdings findet sich keine fotorealistische Darstellung, da maximal 256 Farben in 8-Bit Farbtiefe dargestellt werden können. Es ist daher für qualitativ hochwertige Fotos in einer ansprechenden Darstellung gänzlich ungeeignet. Das GIF Format kann daher gut für Icons, Logos oder einfache Illustrationen mit wenigen Farben eingesetzt werden.
PNG
Dieses Format präsentiert Bilder in hoher Qualität, kann aber auch mit einem Verlust an Qualität einhergehen. Es gibt PNG-8, das aufgrund seiner Farbtiefe mit GIF vergleichbar ist und eine geringe Qualität bietet. Darüber hinaus existiert PNG-24 mit hoher Qualität und Verlustfreiheit- allerdings zu Lasten der Dateigröße. PNG kann von älteren Browsern nicht verarbeitet werden.
SVG
Hierbei handelt es sich um ein reines Vektorformat. Es basiert auf eine Vektorgrafik (mathematisch definierte Linien, Kurven und Punkte) und nicht auf einzelnen Pixeln. Daher ist eine gute Skalierbarkeit frei gegeben. Da hier keine einzelnen Pixel gespeichert werden, sondern Vektorkomponenten, ist der Speicherplatzbedarf gering. Es eignet sich gut für Logos und Diagramme.
Wenn das richtige Bildmaß sowie das geeignete Format ausgewählt wurden, muss das Bild gespeichert werden. Hierbei ist eine Komprimierung unerlässlich, um die Datei klein zu halten und schnelle Ladezeiten realisieren zu können.
Um Bilder für das Web zu optimieren, finden sich im Internet zahlreiche Freeware-Anbieter, bei denen online ein Bild mit dem entsprechenden Komprimierungsgrad gespeichert werden kann. Dabei sollte immer auf störende Artefakte geachtet werden: hierbei hilft oft Ausprobieren und eine genau Inaugenscheinnahme des Bildeindrucks. Hier können Nuancen im Komprimierungsgrad zwischen einem schlechten und guten Bild entscheiden. Der resultierende Bildeindruck sollte keinen sichtbaren Qualitätsverlust aufweisen. Sind Artefakte oder eine Qualitätsminderung ersichtlich, sollten diese zumindest nicht störend sein. Immer sollte beim Bilder für das Web optimieren die eigentliche Dateigröße überprüft werden. Denn womöglich kann mit einer höheren Kompression Datenvolumen gespart werden, ohne dass sich die Qualität des Bildes nachhaltig verschlechtert!
Eine Alternative beim Bilder für das Web zu optimieren sind Plug-Ins, die Bilder automatisch beim Upload auf eine Website optimieren und oft eine gute Balance zwischen Dateigröße und Qualität abliefern. Man sollte das Ergebnis jedoch selbst immer wieder kritisch überprüfen, da die Plug-Ins als automatisierter Workflow selbstverständlich den visuellen Bildeindruck nicht berücksichtigen können: was dem Algorithmus noch durchgeht, kann den Betrachter der Website schon deutlich stören (beispielsweise Artefakte bei der jpeg Kompression)!
Bilder für das Web optimieren- Zusammenfassung des Workflows
- 1. Geeignete Bilder auswählen und suffizient und ansprechend bearbeiten
- 2. Dateigröße und Bildmaße beachten, entsprechend Croppen
- 3. Das Bild in ein geeignetes Format überführen (Fotorealistische Darstellung: jpg; Icons: svg; Animationen: GIF)
- 4. Das Bild mit Freeware oder Plug-In komprimieren
- 5. Abschließenden Bildeindruck (Artefakte?) und Dateigröße überprüfen (Kann noch mehr eingespart werden?)
- 6. Bild hochladen
Noch einfacher mit LiteSpeed Cache
Bei der webhoster.de AG wird der Litespeed Enterprise Server als Webserver verwendet. Dieser beinhaltet eine Lizenz für das Litespeed Cache Modul beispielsweise für Wordpress. Hier kann man dann ganz einfach alle Bilder selbstständig optimieren lassen und auch im Code die Bilder durch webP Bilder austauschen lassen. Google mag webp Bilder viel lieber.
Bilder für das Web optimieren - Fazit!
Große Dateien verlangsamen eine Webseite stark. Diese Verlangsamung schlägt sich in einer deutlich schlechteren Suchmaschinen Priorisierung nieder. Eine gute Optimierung der Bilder realisiert daher kurze Ladezeiten und verbessert somit die technische SEO (Suchmaschinenoptimierung).
Dabei sollte auf ein gutes optisches Ergebnis geachtet, ein ideales Format ausgewählt und in einer akzeptablen Rate komprimiert werden, um Qualitätsverluste zu vermeiden.
Ein gutes Gleichwicht zwischen geringer Dateigröße und guter Qualität ist das Hauptziel, um Bilder für das Web zu optimieren.
Wenn möglich, sollte Vektorgrafiken der Vorzug gegeben werden. Das jpeg-Format ist als nützliches Standartformat immer gut zu handeln, ist in der Anwendung unkompliziert, kann auf allen Browsern gut gelesen werden und wird daher auch am häufigsten genutzt.
Gelegentliches Experimentieren mit den Einstellungen kann oft zu einem besseren Resultat führen. Automatisierte Prozesse (Plug-Ins) sollten genutzt, aber die Qualität überprüft werden. Dann steht einem optisch ansprechenden Gesamteindruck der Website nichts mehr im Wege!