Bilder komprimieren und verkleinern: So geht’s
Bilder sind heute ein elementarer Bestandteil jeder Webseite und machen zumindest auch ihren größten Teil aus. Gleichzeitig sind Faktoren wie die Ladegeschwindigkeit ein wichtiger Aspekt der Nutzererfahrung: Braucht eine Webseite zu lange beim Laden, werden potenzielle Besucher ungeduldig, brechen womöglich den Ladevorgang ab und werden in Zukunft die Webseite meiden.
Aber lange Ladezeiten können nicht nur Besucher und mögliche Kunden als störend empfinden, sie beeinflussen auch direkt das Ranking bei den großen Suchmaschinen. Lange Ladezeiten durch unzureichend komprimierte Bilder schaden deinem Web-Auftritt also gleich doppelt.
In diesem Ratgeber erfährst du, wie du deine Bilder am besten komprimieren kannst und welche Schritte dazu erforderlich sind.
Warum solltest du deine Bilder komprimieren
Das erste Bild, das dem Besucher beim Besuch deiner Webseite ins Auge springt, kann den Eindruck bereits entscheidend prägen. Eine ansprechende Optik wird von Nutzern generell mit Professionalität assoziiert, was umso wichtiger ist, wenn dein Web-Auftritt geschäftlicher Natur ist. Ein spartanisches Aussehen deiner Website oder schlichte Texte könnten bei den Interessenten Zweifel an der Professionalität wecken. Eine überwiegende Präsentation des Contents in langweiliger Textform empfiehlt sich ebenfalls nicht: Eine solche Darbietung der Inhalte wirkt einerseits langweilig, zudem ist das Lesen langer Erläuterungen mit einem Zeitaufwand verbunden, der etwaige Besucher schnell dazu bewegen könnte, deine Seite zu verlassen und woanders zu suchen. Ein besseres Angebot ist schließlich nur einen Klick entfernt.
Aussagekräftige und qualitativ hochwertige Bilder sind also ohne Zweifel einer der wesentlichen Schlüssel für einen erfolgreichen Web-Auftritt.
Die Kehrseite der Medaille ist jedoch, dass Bilder, je nach Qualität, viel Speicherplatz belegen. Heute macht das durchschnittliche Downloadvolumen von Bildern beim Besuch von Online-Shops rund 2 Megabyte aus. Und zwar bei jedem einzelnen Aufruf.
Hieraus kann ein langsamer Page Speed resultieren. Als Page Speed der Zeitraum bezeichnet, der zwischen dem Absenden einer Anfrage und der kompletten Auslieferung der abgefragten Inhalte vergeht. Der Ladegeschwindigkeit und Ladestabilität wurde in den letzten Jahren seitens der Algorithmen der großen Suchmaschinen-Anbieter eine immer höhere Bedeutung zugemessen. Soll deine Webseite ansprechende Bilder enthalten, aber soll sie gleichzeitig nicht bei Nutzern und Suchmaschinen wegen langer Ladezeiten in Ungnade fallen, wirst du um das Komprimieren deiner Bilder nicht herumkommen.
Welche Bilder-Formate gibt es fürs WEB und welches nutzte ich wann?
Es gibt mehrere Dateiformate, die du verwenden kannst und welches infrage kommt, ist vom jeweiligen Verwendungszweck abhängig. Drei Typen von Dateien sind dabei besonders beliebt:
Das JPG / JPEG-Format ist das wohl am häufigsten verwendete digitale Bildformat. JPG kann bis 16,7 Millionen Farben darstellen und bietet den Vorteil, dass eine starke Komprimierung der Datei möglich ist. Dieser Vorgang ist jedoch mit Qualitätseinbußen verbunden. Die Stärken dieses Formats liegen in der Darstellung vieler Farben und starken Kontrasten, weshalb JPG – Dateien besonders geeignet sind, um Fotos oder fotoähnliche Grafiken zu speichern.
Das PNG-Format kann 256 bis 16,7 Millionen Farben darstellen und ist deshalb inzwischen ähnlich beliebt wie JPG. Es bietet aber den Vorteil, dass es sich, verglichen mit JPG, fast verlustfrei komprimieren lässt, sodass es sich vor allem für die Speicherung von Logos und Grafiken, aber auch für Texte in Bildform anbietet. Solche Bilder, die nur wenige Farben enthalten, lassen sich bei diesen Dateien auf einen Bruchteil der ursprünglichen Größe komprimieren.
Das GIF-Format kann zwar nur 256 Farben abbilden, ist aber aufgrund des Umstandes beliebt, dass damit mehrere aneinandergereihte Bilder in Form einer kleinen Animation abgespielt werden können. Dies macht Dateien im GIF-Format vor allem auf Social-Media-Plattformen beliebt.
Du könntest dich jetzt fragen, warum Dateien im JPG-Format solchen im PNG-Format vorzuziehen sein könnten, denn entsprechend den obigen Erläuterungen scheint es so, als würde das PNG-Format dem JPG-Format überlegen sein.
Die Wahl zwischen den Formaten wird dadurch entschieden, was genau das jeweilige Bild darstellen soll, denn, zwischen den beiden Formaten gibt es zwei bedeutende Unterschiede:
- Ein Vorteil von PNG ist die Unterstützung von Transparenz. Du kannst in diesem Dateiformat einen transparenten Hintergrund verwenden, den du zum Beispiel um ein ungleichmäßig geformtes Objekt legen kannst. Mit der Wahl des PNG-Formats vermeidest du, dass weiße oder andersfarbige Kästchen um dein Bild herum erscheinen. Sind Transparenz-Effekte gewünscht, ist folglich das PNG-Format die richtige Wahl.
- Der Vorteil von JPG liegt dagegen in der hohen Komprimierung auch komplexer Fotos mit vielen Farben und Kontrasten. PNG erlaubt eine hohe Kompression nur bei relativ wenigen Farben. JPG-Dateien beanspruchen daher weniger Speicherplatz. Bei farb- und kontrastreichen Fotos bietet das JPG-Format deshalb meistens einen besseren Kompromiss aus Qualitätsverlust und Dateigröße
Dateien mit dem Format JPG und PNG kannst du mit allen Bildbearbeitungsprogrammen problemlos ineinander umwandeln.
Welche Möglichkeiten gibt es Bilder für Webseiten zu komprimieren?
Komprimierung von Bildern online
Du musst nicht zwangsläufig eine spezielle Software installieren, um deine Dateien mit Bildinhalten zu komprimieren. Du findest im Internet Möglichkeiten, die eine Kompression kostenlos anbieten. Diese Webseiten sind häufig so aufgebaut, dass du deine Bilddatei per Drag&Drop in ein Fenster ziehen kannst. Danach wird deine Datei auf die Webseite hochgeladen und der Kompressionsvorgang beginnt. Nachteil dieser kostenfreien Angebote ist eine Beschränkung der unterstützten Dateiformate und eine mangelnde Auswahl an Abstufungen beim Kompressionsgrad. Außerdem gibt es auf Limitierungen bei der Anzahl der Dateien, die innerhalb einer gewissen Zeitspanne hochgeladen und bearbeitet werden können. Überdies musst du stets bedenken, dass deine Bilder, auf die du möglicherweise ein Urheberrecht hast oder die noch nicht für die Augen der Öffentlichkeit bestimmt sind, Dritten zugänglich gemacht werden, wenn du sie einmal auf einer fremden Webseite hochgeladen hast.
Komprimierung von Bildern mittels Photoshop
Photoshop ist wahrscheinlich immer noch der Goldstandard unter den Bildbearbeitungsprogrammen. Das umfangreiche Tool aus dem Haus Adobe bietet eine Vielzahl an Möglichkeiten zur Gestaltung und der Anpassung der Bilder. Für die Betreiber von Webseiten ist die Funktion „Für Web speichern“ besonders geeignet. Dieser Modus unterstützt bei der Komprimierung nicht nur die gängigen Formate JPG, PNG und GIF, sondern auf das Rastergrafikformat WBMP, das speziell auf mobile Endgeräte zugeschnitten ist. Die jeweiligen Formate kannst du auch umwandeln.
Im Photoshop-Weboptimierungsmodus kannst du sowohl die gewünschten Zielformate auswählen, als auch die Farbtiefe und Abmessungen des Fotos für deine Webseite optimieren. Praktisch ist, dass Photoshop sowohl das Original- als auch das Ziel-Bild gegenüberstellt, sodass du auf einen Blick sehen kannst, wie stark sich die beabsichtigte Komprimierung auf die Bildqualität auswirken wird.
Wenn du eine Datei in Photoshop optimieren willst, damit sie später auf deine Webseite hochgeladen werden kann, dann öffnest du ein Foto und wählst „Datei“, dann „Für Web speichern“. Anschließen kannst du das gewünschte Dateiformat auswählen.
Die Optionen zur Optimierung werden auf der rechten Seite des Dialogfelds angezeigt. Hier können unter anderem auch Komprimierungs- und Farboptionen ausgewählt werden. Du siehst in diesem Feld auch zwei Bilder: Das auf der linken Seite zeigt das Original, das auf der rechten Seite zeigt den Zustand nach erfolgter Bearbeitung der Datei.
Komprimierung von Bildern mittels Kraken.io
Auf kraken.io findest du eine weitere ausgezeichnete Möglichkeit, deine Bilder zu komprimieren und umzuwandeln, sodass sie später problemlos auf deine Webseite hochgeladen werden können. Das dortige Angebot hat sich auf SEO-freundliches Umwandeln und Komprimieren von Bildern spezialisiert.
Besonders an diesem Tool zur Bildbearbeitung ist, dass sich Dateien nicht nur händisch optimieren und in andere Formate umwandeln lassen, sondern es auch Plugins für gängige Systeme wie WordPress gibt, durch welche die Inhalte automatisch optimiert werden.
Benutzer von Photoshop werden auch bei Kraken.io keine Funktionen vermissen, im Gegenteil: Für den bisherigen Platzhirsch im Bereich der Bildbearbeitung stellt Kraken.io eine perfekte Ergänzung dar, denn du kannst zunächst eine Bildkompression mittels Photoshop durchführen und anschließend eine weitere Kompression durch die Nutzung von Kraken.io erreichen. Dadurch kann eine die Dateigröße nochmals um etwa 5 % bis 10 % reduziert werden. Dies mag vielleicht zunächst nach keinem großen Nutzen klingen: Doch hier spielt die Menge des Traffics auf deiner Webseite eine entscheidende Rolle. Hast du auf diese dutzende Bilder hochgeladen, die von Besuchern bei jedem Aufruf erneut heruntergeladen werden, so machen 5 % bis 10 % kleinere Dateien schnell einen großen Unterschied aus.
Die verbesserte Page Speed wird dabei auch zwangsläufig von den Suchmaschinen der Algorithmen honoriert und können dir einen entscheidenden Vorteil gegenüber all den Webseiten-Betreibern sichern, die bislang beim Umwandeln und Komprimieren ihrer Dateien lediglich die klassischen Bildbearbeitungsprogramme verwenden. Im heutigen Internet, in denen Algorithmen darüber entscheiden, ob deine Webseite oder dein Online-Shop gesehen werden oder nicht, kann dir eine Verbesserung deines Page Speeds einen Vorsprung gegenüber anderen Betreibern geben.
Kraken.io bietet eine kostenlose Testversion, bei der jedoch Funktionen im Gegensatz zur bezahlten Variante nicht verfügbar sind. Die Bedienung ist äußerst intuitiv: Du ziehst deine Datei in das vorgezeichnete Fenster, worauf diese hochgeladen wird und bearbeitet werden kann. Danach kann zwischen drei Optimierungsmodi ausgewählt werden, wobei die „Expert“-Option eine Vielzahl von Möglichkeiten bietet, mit denen zum Beispiel Metadaten beim Umwandeln gesichert werden können. Alle bei Kraken.io gespeicherten Bilder kannst du in ein ZIP-Format umwandeln und dann in einer deutlich komprimierten Form herunterladen, was vor allem bei besonders großen Bildersammlung sehr nützlich ist.
Fazit
Dateien, welche Bilder beinhalten, sollten mit Hinblick auf die Page Speed möglichst klein sein. Zu große Dateien reduzieren die Page Speed und machen deine Webseite nicht nur für Nutzer unattraktiv, sondern führen auch dazu, dass sie von den Algorithmen der Suchmaschinen-Betreiber niedriger gelistet wird. Entsprechend empfiehl es sich, auf möglichst geringe Speicherplatzbelegung der auf deine Webseite hochgeladenen Dateien zu achten. Bei der Frage, ob von den gängigen Formaten JPG oder PNG geeignet ist, kommt es immer auf den Einzelfall an, da beide Formate Vor- und Nachteile bieten.
Solltest du dich bei deiner Wahl geirrt haben, ist dies jedoch kein Problem, da du die Formate jeweils mit einem Bildbearbeitungsprogramm ineinander umwandeln kannst. Einen Vorsprung gegenüber anderen Webseiten-Betreibern kann dir das Angebot von kraken.io einräumen. Dieses ermöglicht nach einer Kompression deiner Datei zum Beispiel mittels Photoshop eine abermalige Reduzierung der Speicherbelegung deiner Datei von zumeist 5 % bis 10 %, ohne dass es zu Qualitätseinbußen kommt.
Wenn du professionelle Unterstützung bei der Optimierung der Ladezeit deiner Webseite, deines Online-Shops oder deiner Landingpage in Anspruch nehmen möchtest, dann ist dir unsere Agentur dabei gerne behilflich!