Digitale Bilder sind ein fester Bestandteil des Internets, und es ist schwierig, Inhalte ohne Medien zu erstellen. Ein einfaches Foto ist eine großartige Möglichkeit, deinem Text einen zusätzlichen Kontext zu geben.

Allerdings kann ein Bild ohne Optimierung eine enorme Dateigröße haben. Verlustbehaftete oder verlustfreie Komprimierung ist eine gängige Überlegung, denn beide können die Größe eines Bildes verringern, wobei allerdings auch Qualitätseinbußen in Kauf genommen werden müssen.

Du wirst fast immer eine gewisse Komprimierung eines Bildes benötigen. Dadurch wird die Qualität auf einem Niveau gehalten, das du als akzeptabel erachtest, und die Dateigröße wird verringert. Die Wahl der richtigen Komprimierungsstufe hängt von deinen Zielen und Anforderungen ab.

In diesem Beitrag werden wir uns mit verlustbehafteter und verlustfreier Komprimierung befassen. Außerdem werden wir über den Prozess sprechen, den ein Bild durchläuft, um „in Form“ zu kommen, was Komprimierung ist und über viele andere Aspekte der Optimierung deiner Bilder.

Unser Video-Leitfaden zur verlustbehafteten und verlustfreien Komprimierung

Unterschiede zwischen verlustbehaftet und verlustfrei

Wenn es um die Komprimierung digitaler Bilder geht, gibt es verschiedene Formate, aus denen du wählen kannst. Manchmal haben diese auch andere Namen, was von vielen Faktoren abhängt. Im Wesentlichen gibt es jedoch zwei Arten:

  • Verlustbehaftete Komprimierung: Hier geht es darum, die kleinstmögliche Dateigröße für ein Bild zu erreichen. Daher steht die Bildqualität oft ganz unten auf der Prioritätenliste.
  • Verlustfreie Komprimierung: Auch bei diesem Komprimierungsformat wird die Dateigröße erheblich reduziert, aber das Bild leidet nicht unter Artefakten und anderen Problemen.

In den meisten Fällen hängt die Entscheidung für ein bestimmtes Format von deinem Ziel ab: Willst du kleine Dateien, oder liegt dein Schwerpunkt auf der Erhaltung der Qualität?

Bei der verlustbehafteten Komprimierung werden Daten, die du für unnötig hältst, dauerhaft aus dem Bild entfernt. Dabei werden viele verschiedene Techniken eingesetzt, die zu einer wesentlich geringeren Dateigröße führen.

Bei der verlustfreien Komprimierung werden ebenfalls Daten entfernt, aber sie kann das Original bei Bedarf wiederherstellen. Das Ziel ist es, die Qualität hoch zu halten und gleichzeitig die Dateigröße zu verringern.

Es gibt verschiedene Möglichkeiten, dies zu erreichen, aber das Ergebnis ist oft das gleiche. Um herauszufinden, welche Option für deine Bedürfnisse die richtige ist, sollten wir zunächst einen Schritt zurückgehen und uns die Grundlagen der Bilder und der Komprimierung im Allgemeinen ansehen.

Die Elemente eines digitalen Bildes

Wie bei der Software- und Webentwicklung gibt es oft einen „Stack“, um ein Bild von der Kamera ins Internet zu bringen.

Ein Bild beginnt als „Rohdaten“ (daher der Name RAW). Das ist vergleichbar mit dem Code einer App: Die Schnipsel, Zeilen und Werte werden in Hintergründe mit Farben, Bildplatzhaltern, dynamischen Elementen und mehr übersetzt.

Ein Bild wird in der RAW-Datei je nach Kamerahersteller, Bearbeitungssoftware, Farbraumalgorithmus und anderen Faktoren leicht unterschiedlich dargestellt. Anschließend bearbeitest du das Bild und exportierst es in eines der verschiedenen Dateiformate (mehr dazu später):

Ein Beispiel für die Bearbeitung einer RAW-Datei in Capture One, geöffnet für ein Bild von zwei stehenden Treibholzblöcken an einem Strand bei Sonnenuntergang.
Ein Beispiel für die Bearbeitung einer RAW-Datei in Capture One.

Es gibt ein paar verschiedene Elemente, die ein digitales Standardbild ausmachen:

  • Dateityp: Verschiedene Typen bieten Qualitäten, die für dein endgültiges Bild geeignet sein können oder auch nicht. Entscheidend ist, dass du den für deine Anwendung am besten geeigneten Dateityp wählst.
  • Auflösung: Sie wird oft als Megapixel (MP) angegeben, aber auch als Pixel pro Zoll (PPI) oder Dots per Inch (DPI). Höhere Auflösungen bieten eine bessere Qualität, aber sie erhöhen auch die anfängliche Dateigröße
  • Bittiefe: Dieser Aspekt bestimmt die Farbinformationen in einem Bild. Eine niedrige Bittiefe gibt nur wenige Farben wieder, während eine hohe Bittiefe potenziell Millionen von Farben auf einmal darstellen kann. Generell gilt: Je höher, desto besser.
  • Dimensionen: Das ist der Platz, den ein Bild einnimmt. Zum Beispiel können 1.000 Pixel x 500 Pixel die Gesamtgröße eines Bildes definieren.
  • Farbraum: Dies ist ein Algorithmus, der bestimmt, wie Farben dargestellt werden. Jeder Farbraum ist anders eingerichtet und hängt oft von den Vorlieben des Fotografen ab.

Diese Elemente werden kombiniert, um ein Bild von unterschiedlicher Qualität zu erhalten. Ein großes, hochauflösendes JPEG-Foto mit hoher Bit-Tiefe bietet zum Beispiel höchste Qualität und Schärfe:

Ein Bild mit hoher Qualität, das das Endprodukt des im vorherigen Screenshot gezeigten Bildes von zwei stehenden Treibholzblöcken an einem Strand bei Sonnenuntergang zeigt, mit hohem Farbkontrast und Objektschärfe.
Ein Bild mit hoher Qualität.

Im Gegensatz dazu kann selbst ein Bild mit großen Abmessungen und der Fähigkeit, viele Farben darzustellen, bei einer niedrigen Auflösung schlecht aussehen:

Ein Bild mit niedriger Qualität, das dasselbe Bild von Treibholz an einem Strand zeigt, aber mit geringerer Farbintensität und Objektschärfe.
Ein Bild mit niedriger Qualität.

Mit diesem Gleichgewicht entwickelst du das Kernbild, bevor du die Komprimierung anwendest. Allerdings hat das Format, das du für das Bild verwendest, einen großen Einfluss auf die endgültige Qualität.

Wie die Optimierung von Web-Bildern funktioniert

Da die Bildkomprimierung im Grunde immer gleich abläuft, kannst du bei der Optimierung von Bildern für das Web Standardregeln anwenden.

Wir behandeln viele dieser Konzepte an anderer Stelle im Kinsta-Blog, aber es lohnt sich, eine kurze Zusammenfassung zu geben:

  • Verwende eine Auflösung von 72 PPI, da dies der Standard für das Internet ist. Für die Archivierung kannst du eine höhere PPI/DPI-Auflösung verwenden, aber wir gehen davon aus, dass du das Bild im Internet veröffentlichst.
  • Setze die „lange Kante“ des Bildes auf 2048 Pixel, da dies für viele verschiedene Anwendungen optimal ist.
  • Verwende eine 8-Bit-Farbtiefe, wenn du die Möglichkeit dazu hast.
  • Lass ein Bild vor der Veröffentlichung durch ein Komprimierungs- und Optimierungsprogramm laufen.

Es ist ein einfaches Format, mit dem du konsistente Ergebnisse erzielen kannst, auch wenn wir die Komprimierung und Optimierung im weiteren Verlauf dieses Artikels noch genauer erläutern werden.

Dazu schauen wir uns die Vor- und Nachteile von verlustbehafteter und verlustfreier Kompression an.

Wie Bildkomprimierung deinen Webbildern helfen kann

Im Allgemeinen werden bei der Komprimierung das Minimum und das Maximum enger zusammengedrückt. Bei der Kompression wird zum Beispiel die niedrigste Lautstärke in der Musik angehoben und die höchste reduziert. Dadurch wird die durchschnittliche Lautstärke für das Ohr lauter.

Bei Bildern ist die Komprimierung eher ein reduktiver Prozess. Das bedeutet, dass mehr Daten aus deinem Bild entfernt werden, um die Dateigröße zu verringern, während die Qualität so hoch wie möglich bleibt.

Es gibt viele verschiedene proprietäre Algorithmen, die helfen, die Dateigröße von Bildern zu reduzieren. In vielen Fällen sind diese für ein bestimmtes Unternehmen geschützt. Es gibt viele „verlustbehaftete“ und „verlustfreie“ Komprimierungsstandards, die jeweils mit eigenen Bezeichnungen versehen sind:

Die Komprimierungsoptionen in ShortPixel. Hier kannst du zwischen den Komprimierungsstufen "Lossy", "Glossy" und "Lossless" wählen.
Die Komprimierungsoptionen in ShortPixel.

Dennoch gibt es viele Vorteile bei der Bildkomprimierung, die nicht nur auf ein bestimmtes Format beschränkt sind:

  • So kannst du die Dateigröße niedrig halten, was die Leistung deiner Webseite verbessert.
  • Dadurch hat auch der Server deiner Webseite weniger zu tun, was sich auf die Leistung auswirkt.
  • Kleine Dateigrößen tragen dazu bei, die Serverbelastung zu verringern. So trägst du zu einer nachhaltigen und ethischen Zukunft bei.
  • Je nach Algorithmus und Komprimierungsqualität, die du wählst, kannst du eine nahezu perfekte und vergleichbare Qualität anzeigen.

Ähnlich wie bei der Erstellung von Bildern, die du mit anderen teilen möchtest, ist es wichtig, dass du mit verschiedenen Kompressionswerten spielst, ein bestimmtes Unternehmen wählst und den richtigen Algorithmus auswählst, um Ergebnisse zu erzielen, die für dich funktionieren.

Vor- und Nachteile der verlustbehafteten Komprimierung

Bei der verlustbehafteten Komprimierung wird die Dateigröße des Bildes reduziert, ohne dass alle anderen Aspekte berücksichtigt werden. Die Funktionsweise des Algorithmus besteht darin, Daten dauerhaft zu entfernen. Das kann so zerstörerisch sein, wie es klingt.

Auch wenn wir nicht zu sehr ins Detail gehen wollen, solltest du wissen, dass ein Teil der Daten, die bei der verlustbehafteten Komprimierung entfernt werden, im Bild sichtbar ist. Das Ziel ist es, das ursprüngliche, qualitativ hochwertige Bild so gut wie möglich darzustellen, aber mit einem geringeren Gewicht – und das bedeutet, dass einige Daten nicht berücksichtigt werden können.

Im Allgemeinen bietet die verlustbehaftete Komprimierung einige Vorteile:

  • Die Dateigrößen werden klein sein – in manchen Fällen unter 10 Kilobyte (KB).
  • Der Qualitätsverlust ist in vielen Fällen akzeptabel, trotz der Artefakte.

Das bringt uns zu den Nachteilen der verlustbehafteten Komprimierung: Die Bildqualität nimmt mit jedem Grad der Komprimierung ab:

Ein Schieberegler für die Komprimierung eines JPEG-Bildes, der einen "Export"-Dialog zeigt, bei dem das "Format" auf "JPEG" und der "Qualitäts"-Balken auf etwa 70 % eingestellt ist, zusammen mit der reduzierten Dateigröße (716 KB).
Ein Kompressionsregler für ein JPEG-Bild.

Du wirst feststellen, dass in einigen Fällen Farbstreifen – bei denen die Farbschattierungen nicht richtig wiedergegeben werden – und ein Verlust an Kantenschärfe sichtbar werden. Bei Bildern mit weniger Farben ist dies weniger stark ausgeprägt, aber die Beeinträchtigung der Klarheit ist immer noch vorhanden.

Außerdem ist die Bildverschlechterung ein permanentes Merkmal des Komprimierungsprozesses. Das bedeutet, dass es keine Möglichkeit gibt, die Auswirkungen zu einem späteren Zeitpunkt rückgängig zu machen.

Trotz der Nachteile ist die verlustbehaftete Komprimierung hervorragend für das Web und die Leistung deiner Webseite. Die winzigen Dateigrößen führen nicht immer zu körnigen Bildern, obwohl du es natürlich auch auf die Spitze treiben kannst:

Ein Porträt eines ausgestopften Katzenspielzeugs mit offensichtlichen Artefakten der Überkomprimierung, wie Banding, unscharfe Elemente und Degradierung.
Ein Beispiel für ein zu stark komprimiertes Bild.

Verlustbehaftete Komprimierung ist jedoch nicht die einzige Option. Die verlustfreie Komprimierung ist eine Alternative für qualitätsbewusste Webseiten-Betreiber.

Vor- und Nachteile der verlustfreien Komprimierung

Verlustfreie Komprimierung tut das, was auf dem Etikett steht: Sie komprimiert die Dateigröße eines Bildes so weit wie möglich, ohne die sichtbare Qualität zu beeinträchtigen. Dazu werden die Metadaten des Bildes entfernt, die unnötig viel Platz beanspruchen können:

Ein Metadatenfeld mit Fotodetails, das das Bild eines braunen Eichhörnchens überlagert, das im Gras am Fuß eines Baumes sitzt.
Die Metadaten eines Bildes.

Der verlustfreie Komprimierungsalgorithmus sucht auch nach sich wiederholenden Pixelsequenzen und kodiert dann eine Abkürzung, um sie anzuzeigen. Nehmen wir zum Beispiel „Command Line Interface“ Du wirst das Akronym oft einmal definieren und dann „CLI“ (oder das von dir gewählte Akronym) verwenden, um es blitzschnell zu referenzieren.

Die verlustfreie Komprimierung funktioniert auf die gleiche Weise, nur dass sie weniger zerstörerisch ist. Während das Entfernen der Metadaten nicht rückgängig gemacht werden kann, ist ein Teil der Komprimierung möglich.

Die Vorteile der verlustfreien Komprimierung liegen vor allem in der Beibehaltung der Qualität:

  • Bei der verlustfreien Komprimierung bleibt die Qualität eines Bildes im Vergleich zu allen anderen Algorithmen am besten erhalten.
  • Verlustfrei ist fantastisch für Archivierungszwecke. Zum Beispiel kann ein Fotograf die Speicherressourcen mit einem Bild ausgleichen, das die meisten Daten bewahrt.
  • Lossless ist der bevorzugte Komprimierungsalgorithmus für die bildende Kunst: Fotografie, Grafikdesign, digitale Kunst und mehr. Kombiniert man einen verlustfreien Algorithmus mit der richtigen Tiefe und Auflösung, kann man fast eine „Eins-zu-Eins“-Kopie erreichen.

Es ist jedoch zu beachten, wie gut die verlustfreie Komprimierung für bestimmte Nischen geeignet ist: Die Bandbreite der Anwendungen ist klein. Das schränkt ihre Verfügbarkeit insgesamt ein.

Hier sind einige weitere Nachteile der verlustfreien Komprimierung, die du beachten solltest:

  • Wenn eine Webseite viele Bilder verwendet, ist eine verlustfreie Komprimierung möglicherweise nicht optimal, um sie anzuzeigen. Das liegt daran, dass du in solchen Situationen meist Wert auf eine kleinere Dateigröße legst.
  • Obwohl die Komprimierung die Dateigröße verringert, verändern die verlustfreien Algorithmen die Bilddaten nicht so stark wie die verlustbehafteten. Deshalb kann es sein, dass du nur marginale Größenreduzierungen siehst und keine extremen Verschlankungsergebnisse.

Als Nächstes sehen wir uns die schnellste (und potenziell beste) Methode an, dies zu tun.

Wie du zwischen verlustbehafteter und verlustfreier Komprimierung entscheidest

Jetzt kennst du den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung. Vielleicht weißt du aber immer noch nicht, welcher Algorithmus der beste für deine Webseite ist.

Es gibt zwei Situationen, die du berücksichtigen solltest:

  1. Für die meisten Anwendungsfälle im Internet ist eine verlustbehaftete Komprimierung akzeptabel.
  2. Wenn du Fotografien oder fotografierte Kunstwerke anzeigen willst, ist eine verlustfreie Komprimierung besser geeignet.

Diese Überlegungen basieren auf der Verwendung eines der Standard-Webbildformate wie JPEG, PNG oder GIF. Bei moderneren Formaten wie HEIC und WebP können sich deine Anforderungen an die Komprimierung jedoch unterscheiden.

Wir gehen sogar so weit zu sagen, dass die verlustbehaftete Komprimierung deine Standardwahl sein sollte, es sei denn, du zeigst Fotos auf deiner Webseite. WordPress komprimiert Bilder standardmäßig, was zeigt, dass verlustbehaftete Komprimierung für fast jede Anwendung geeignet ist.

Optimiere deine Bilder mit einem Online-Komprimierungsdienst

Es gibt viele Möglichkeiten, wie du deine Bilder komprimieren kannst, bevor du sie auf deiner Webseite zeigst. Du könntest dich zum Beispiel dafür entscheiden, die Komprimierung in der Bearbeitungsphase durchzuführen. Das könnte ein Nebenprodukt der Konvertierung von RAW-Formaten sein.

Einige Premium Hosts wie Kinsta bieten sogar integrierte Leistungen an, mit denen du deine Bilddateien automatisch optimieren kannst. Die für alle Kunden kostenlose Funktion „Image Optimization“ von Kinsta erstellt WebP-Versionen deiner Bilder und liefert die kleinere Version über das schnelle Kinsta’s CDN an deine Besucher aus. Du kannst zwischen verlustbehafteter und verlustfreier Komprimierung wählen und die Funktion nach Belieben ein- oder ausschalten.

Neben den eingebauten Werkzeugen gibt es aber auch viele Online-Leistungen, die du nutzen kannst. Jeder von ihnen bietet eine Auswahl an Algorithmen und eine vorbildliche Benutzeroberfläche (UI). Außerdem bieten die meisten einen kostenlosen Service an, damit du die App zumindest ausprobieren kannst, bevor du dich festlegst.

In unserem Artikel über Bildoptimierung stellen wir einige Optionen vor, allerdings handelt es sich dabei um WordPress-spezifische Plugins, die mit einer Programmierschnittstelle (API) verbunden sind. Die gute Nachricht ist, dass viele dieser Plugins auch eine Online-Schnittstelle bieten. Nimm zum Beispiel ShortPixel:

Die ShortPixel-Benutzeroberfläche mit dem ShortPixel-Logo oben und den Worten "Online Bildkomprimierung & -optimierung": JPG, PNG und GIF online komprimieren".
Die ShortPixel-Schnittstelle.

Hier ziehst du die Bilder auf den Uploader und wartest dann, bis die App sie komprimiert und verarbeitet hat. Du solltest jedoch zuerst den Algorithmus auswählen, da der Prozess dann sofort beginnt.

Die Auswahl ist einfach: Zwei Formen der verlustbehafteten Komprimierung („Lossy“ und „Glossy“) und eine verlustfreie Option. Die Benutzeroberfläche von ShortPixel erklärt die Unterschiede zwischen den einzelnen Algorithmen sehr gut, und du kannst die Bilder innerhalb von Sekunden herunterladen.

Obwohl beide deinen Ansprüchen gerecht werden, sieht die Imagify-Oberfläche eleganter und professioneller aus als die von ShortPixel. Auch hier gibt es drei „Kompressionsstufen“ – Normal, Aggressiv und Ultra:

Die Imagify-Benutzeroberfläche mit dem großen Feld "Hochladen" auf der rechten Seite und den Optionen auf der linken Seite, einschließlich der Auswahl für den "Komprimierungsgrad" und andere "Ausgabeoptionen" wie die Größenänderung.
Die Imagify-Oberfläche.

Der kleine Unterschied besteht darin, dass Imagify mit einer verlustfreien Komprimierung beginnt und sich dann zu einem verlustbehafteten Algorithmus mit starken Artefakten hocharbeitet. Es gibt aber noch ein paar andere Optionen, die du bei anderen Lösungen nicht findest.

Zunächst einmal kannst du die EXIF-Daten deines Bildes beibehalten und sogar die Größe nach der Konvertierung ändern. Das ist manchmal von unschätzbarem Wert, vor allem, wenn du eine Komprimierungsstufe anwenden willst, bei der die EXIF-Daten entfernt werden oder die Größe eines Bildes eingeschränkt wird.

Ähnlich wie sein mythischer Namensvetter kann Kraken deine Bilder bearbeiten und verschiedene Komprimierungsarten anwenden. Die meisten Nutzer werden sich entweder für die verlustbehaftete oder die verlustfreie Komprimierung entscheiden.

Die Kraken-Benutzeroberfläche zeigt eine geordnete Liste von Schritten zum Hochladen eines Bildes, von denen der zweite die Optionen "Lossy" und "Lossless" enthält.
Die Kraken-Oberfläche.

Es gibt aber auch einen Expertenmodus:

Die Optionen im Kraken-Expertenmodus auf der Registerkarte "Experte" zeigen Optionen zum Ändern der Größe des Bildes, zum Beibehalten der Metadaten und zum Ändern der Ausrichtung.
Die Optionen des Kraken-Expertenmodus.

Hier kannst du unter anderem die Komprimierung an deine eigenen Bedürfnisse anpassen. Du kannst zum Beispiel die JPEG- und PNG-Komprimierungsstufen einstellen, festlegen, dass die Metadaten des Bildes erhalten bleiben, und sogar mit Chroma Subsampling arbeiten, um die Farben weiter zu verändern.

Zusammenfassung

Bilder können wie ein einfacher Aspekt deiner Webseite erscheinen: Du nimmst eine Datei, lädst sie in WordPress hoch und fügst dann einen Bildblock hinzu, um sie anzuzeigen.

Doch bei der Aufbereitung eines Bildes für das Internet steckt viel mehr dahinter, als du vielleicht denkst. Das von dir gewählte Komprimierungsformat kann sich auf die Dateigröße, die Bildqualität und vieles mehr auswirken.

In diesem Beitrag haben wir uns mit verlustbehafteter und verlustfreier Komprimierung befasst und zusammengefasst, welches Format du wählen solltest. Trotz der Gratwanderung zwischen Qualität und Größe ist die verlustbehaftete Komprimierung für die meisten Anwendungsfälle im Internet perfekt. Fotografen oder diejenigen, die sich Sorgen um die Qualität ihrer Bilder machen, sollten die verlustfreie Komprimierung wählen, obwohl sie weniger Vorteile in Bezug auf die Dateigröße bietet.

Auf welcher Seite stehst du im Kampf zwischen verlustbehafteter und verlustfreier Kompression? Teile uns deine Meinung in den Kommentaren unten mit!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.