Unser Video-Leitfaden zur verlustbehafteten und verlustfreien Komprimierung<\/a><\/h3>\n<\/kinsta-video>\nUnterschiede zwischen verlustbehaftet und verlustfrei<\/h2>\n
Wenn es um die Komprimierung digitaler Bilder geht, gibt es verschiedene Formate, aus denen du w\u00e4hlen kannst. Manchmal haben diese auch andere Namen, was von vielen Faktoren abh\u00e4ngt. Im Wesentlichen gibt es jedoch zwei Arten:<\/p>\n
\n- Verlustbehaftete Komprimierung:<\/b> Hier geht es darum, die kleinstm\u00f6gliche Dateigr\u00f6\u00dfe f\u00fcr ein Bild zu erreichen. Daher steht die Bildqualit\u00e4t oft ganz unten auf der Priorit\u00e4tenliste.<\/li>\n
- Verlustfreie Komprimierung:<\/b> Auch bei diesem Komprimierungsformat wird die Dateigr\u00f6\u00dfe erheblich reduziert, aber das Bild leidet nicht unter Artefakten und anderen Problemen.<\/li>\n<\/ul>\n
In den meisten F\u00e4llen h\u00e4ngt die Entscheidung f\u00fcr ein bestimmtes Format von deinem Ziel ab: Willst du kleine Dateien, oder liegt dein Schwerpunkt auf der Erhaltung der Qualit\u00e4t?<\/p>\n
Bei der verlustbehafteten Komprimierung werden Daten, die du f\u00fcr unn\u00f6tig h\u00e4ltst, dauerhaft aus dem Bild entfernt. Dabei werden viele verschiedene Techniken eingesetzt, die zu einer wesentlich geringeren Dateigr\u00f6\u00dfe f\u00fchren.<\/p>\n
Bei der verlustfreien Komprimierung werden ebenfalls Daten entfernt, aber sie kann das Original bei Bedarf wiederherstellen. Das Ziel ist es, die Qualit\u00e4t hoch zu halten und gleichzeitig die Dateigr\u00f6\u00dfe zu verringern.<\/p>\n
Es gibt verschiedene M\u00f6glichkeiten, dies zu erreichen, aber das Ergebnis ist oft das gleiche. Um herauszufinden, welche Option f\u00fcr deine Bed\u00fcrfnisse die richtige ist, sollten wir zun\u00e4chst einen Schritt zur\u00fcckgehen und uns die Grundlagen der Bilder und der Komprimierung im Allgemeinen ansehen.<\/p>\n\n
Die Elemente eines digitalen Bildes<\/h2>\n
Wie bei der Software- und Webentwicklung gibt es oft einen „Stack“, um ein Bild von der Kamera ins Internet zu bringen.<\/p>\n
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\u00fcnde mit Farben, Bildplatzhaltern, dynamischen Elementen und mehr \u00fcbersetzt.<\/p>\n
Ein Bild wird in der RAW-Datei je nach Kamerahersteller, Bearbeitungssoftware, Farbraumalgorithmus und anderen Faktoren leicht unterschiedlich dargestellt. Anschlie\u00dfend bearbeitest du das Bild und exportierst es in eines der verschiedenen Dateiformate (mehr dazu sp\u00e4ter):<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/editing-software.png\")
Ein Beispiel f\u00fcr die Bearbeitung einer RAW-Datei in Capture One.<\/figcaption><\/figure>\nEs gibt ein paar verschiedene Elemente, die ein digitales Standardbild ausmachen:<\/p>\n
\n- Dateityp:<\/b> Verschiedene Typen bieten Qualit\u00e4ten, die f\u00fcr dein endg\u00fcltiges Bild geeignet sein k\u00f6nnen oder auch nicht. Entscheidend ist, dass du den f\u00fcr deine Anwendung am besten geeigneten Dateityp w\u00e4hlst.<\/li>\n
- Aufl\u00f6sung:<\/b> Sie wird oft als Megapixel (MP) angegeben, aber auch als Pixel pro Zoll (PPI) oder Dots per Inch (DPI). H\u00f6here Aufl\u00f6sungen bieten eine bessere Qualit\u00e4t, aber sie erh\u00f6hen auch die anf\u00e4ngliche Dateigr\u00f6\u00dfe<\/li>\n
- Bittiefe:<\/b> Dieser Aspekt bestimmt die Farbinformationen in einem Bild. Eine niedrige Bittiefe gibt nur wenige Farben wieder, w\u00e4hrend eine hohe Bittiefe potenziell Millionen von Farben auf einmal darstellen kann. Generell gilt: Je h\u00f6her, desto besser.<\/li>\n
- Dimensionen:<\/b> Das ist der Platz, den ein Bild einnimmt. Zum Beispiel k\u00f6nnen 1.000 Pixel x 500 Pixel die Gesamtgr\u00f6\u00dfe eines Bildes definieren.<\/li>\n
- Farbraum:<\/b> Dies ist ein Algorithmus, der bestimmt, wie Farben dargestellt werden. Jeder Farbraum ist anders eingerichtet und h\u00e4ngt oft von den Vorlieben des Fotografen ab.<\/li>\n<\/ul>\n
Diese Elemente werden kombiniert, um ein Bild von unterschiedlicher Qualit\u00e4t zu erhalten. Ein gro\u00dfes, hochaufl\u00f6sendes JPEG-Foto mit hoher Bit-Tiefe bietet zum Beispiel h\u00f6chste Qualit\u00e4t und Sch\u00e4rfe:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/high-quality-image.jpg\")
Ein Bild mit hoher Qualit\u00e4t.<\/figcaption><\/figure>\nIm Gegensatz dazu kann selbst ein Bild mit gro\u00dfen Abmessungen und der F\u00e4higkeit, viele Farben darzustellen, bei einer niedrigen Aufl\u00f6sung schlecht aussehen:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/low-quality-image.jpg\")
Ein Bild mit niedriger Qualit\u00e4t.<\/figcaption><\/figure>\nMit diesem Gleichgewicht entwickelst du das Kernbild, bevor du die Komprimierung anwendest. Allerdings hat das Format, das du f\u00fcr das Bild verwendest, einen gro\u00dfen Einfluss auf die endg\u00fcltige Qualit\u00e4t.<\/p>\n
Wie die Optimierung von Web-Bildern funktioniert<\/h2>\n
Da die Bildkomprimierung im Grunde immer gleich abl\u00e4uft, kannst du bei der Optimierung von Bildern f\u00fcr das Web Standardregeln anwenden.<\/p>\n
Wir behandeln viele dieser Konzepte an anderer Stelle im Kinsta-Blog<\/a>, aber es lohnt sich, eine kurze Zusammenfassung zu geben:<\/p>\n\n- Verwende eine Aufl\u00f6sung von 72 PPI, da dies der Standard f\u00fcr das Internet ist. F\u00fcr die Archivierung kannst du eine h\u00f6here PPI\/DPI-Aufl\u00f6sung verwenden, aber wir gehen davon aus, dass du das Bild im Internet ver\u00f6ffentlichst.<\/li>\n
- Setze die „lange Kante“ des Bildes auf 2048 Pixel, da dies f\u00fcr viele verschiedene Anwendungen optimal ist.<\/li>\n
- Verwende eine 8-Bit-Farbtiefe, wenn du die M\u00f6glichkeit dazu hast.<\/li>\n
- Lass ein Bild vor der Ver\u00f6ffentlichung durch ein Komprimierungs- und Optimierungsprogramm laufen.<\/li>\n<\/ul>\n
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\u00e4utern werden.<\/p>\n
Dazu schauen wir uns die Vor- und Nachteile von verlustbehafteter und verlustfreier Kompression an.<\/p>\n
Wie Bildkomprimierung deinen Webbildern helfen kann<\/h3>\n
Im Allgemeinen werden bei der Komprimierung das Minimum und das Maximum enger zusammengedr\u00fcckt. Bei der Kompression wird zum Beispiel die niedrigste Lautst\u00e4rke in der Musik angehoben und die h\u00f6chste reduziert. Dadurch wird die durchschnittliche Lautst\u00e4rke f\u00fcr das Ohr lauter.<\/p>\n
Bei Bildern ist die Komprimierung eher ein reduktiver Prozess. Das bedeutet, dass mehr Daten aus deinem Bild entfernt werden, um die Dateigr\u00f6\u00dfe zu verringern, w\u00e4hrend die Qualit\u00e4t so hoch wie m\u00f6glich bleibt.<\/p>\n
Es gibt viele verschiedene propriet\u00e4re Algorithmen, die helfen, die Dateigr\u00f6\u00dfe von Bildern zu reduzieren. In vielen F\u00e4llen sind diese f\u00fcr ein bestimmtes Unternehmen gesch\u00fctzt. Es gibt viele „verlustbehaftete“ und „verlustfreie“ Komprimierungsstandards, die jeweils mit eigenen Bezeichnungen versehen sind:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-formats.png\")
Die Komprimierungsoptionen in ShortPixel.<\/figcaption><\/figure>\nDennoch gibt es viele Vorteile bei der Bildkomprimierung, die nicht nur auf ein bestimmtes Format beschr\u00e4nkt sind:<\/p>\n
\n- So kannst du die Dateigr\u00f6\u00dfe niedrig halten, was die Leistung deiner Webseite verbessert.<\/li>\n
- Dadurch hat auch der Server deiner Webseite weniger zu tun, was sich auf die Leistung auswirkt.<\/li>\n
- Kleine Dateigr\u00f6\u00dfen tragen dazu bei, die Serverbelastung zu verringern. So tr\u00e4gst du zu einer nachhaltigen und ethischen Zukunft bei.<\/li>\n
- Je nach Algorithmus und Komprimierungsqualit\u00e4t, die du w\u00e4hlst, kannst du eine nahezu perfekte und vergleichbare Qualit\u00e4t anzeigen.<\/li>\n<\/ul>\n
\u00c4hnlich wie bei der Erstellung von Bildern, die du mit anderen teilen m\u00f6chtest, ist es wichtig, dass du mit verschiedenen Kompressionswerten spielst, ein bestimmtes Unternehmen w\u00e4hlst und den richtigen Algorithmus ausw\u00e4hlst, um Ergebnisse zu erzielen, die f\u00fcr dich funktionieren.<\/p>\n
Vor- und Nachteile der verlustbehafteten Komprimierung<\/h2>\n
Bei der verlustbehafteten Komprimierung<\/a> wird die Dateigr\u00f6\u00dfe des Bildes reduziert, ohne dass alle anderen Aspekte ber\u00fccksichtigt werden. Die Funktionsweise des Algorithmus besteht darin, Daten dauerhaft zu entfernen. Das kann so zerst\u00f6rerisch sein, wie es klingt.<\/p>\nAuch 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\u00fcngliche, qualitativ hochwertige Bild so gut wie m\u00f6glich darzustellen, aber mit einem geringeren Gewicht – und das bedeutet, dass einige Daten nicht ber\u00fccksichtigt werden k\u00f6nnen.<\/p>\n
Im Allgemeinen bietet die verlustbehaftete Komprimierung einige Vorteile:<\/p>\n
\n- Die Dateigr\u00f6\u00dfen werden klein sein – in manchen F\u00e4llen unter 10 Kilobyte (KB).<\/li>\n
- Der Qualit\u00e4tsverlust ist in vielen F\u00e4llen akzeptabel, trotz der Artefakte.<\/li>\n<\/ul>\n
Das bringt uns zu den Nachteilen der verlustbehafteten Komprimierung: Die Bildqualit\u00e4t nimmt mit jedem Grad der Komprimierung ab:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-slider.png\")
Ein Kompressionsregler f\u00fcr ein JPEG-Bild.<\/figcaption><\/figure>\nDu wirst feststellen, dass in einigen F\u00e4llen Farbstreifen – bei denen die Farbschattierungen nicht richtig wiedergegeben werden – und ein Verlust an Kantensch\u00e4rfe sichtbar werden. Bei Bildern mit weniger Farben ist dies weniger stark ausgepr\u00e4gt, aber die Beeintr\u00e4chtigung der Klarheit ist immer noch vorhanden.<\/p>\n
Au\u00dferdem ist die Bildverschlechterung ein permanentes Merkmal des Komprimierungsprozesses. Das bedeutet, dass es keine M\u00f6glichkeit gibt, die Auswirkungen zu einem sp\u00e4teren Zeitpunkt r\u00fcckg\u00e4ngig zu machen.<\/p>\n
Trotz der Nachteile ist die verlustbehaftete Komprimierung hervorragend f\u00fcr das Web und die Leistung deiner Webseite. Die winzigen Dateigr\u00f6\u00dfen f\u00fchren nicht immer zu k\u00f6rnigen Bildern, obwohl du es nat\u00fcrlich auch auf die Spitze treiben kannst:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/over-compressed-cat-min.jpg\")
<\/a>Ein Beispiel f\u00fcr ein zu stark komprimiertes Bild.<\/figcaption><\/figure>\nVerlustbehaftete Komprimierung ist jedoch nicht die einzige Option. Die verlustfreie Komprimierung ist eine Alternative f\u00fcr qualit\u00e4tsbewusste Webseiten-Betreiber.<\/p>\n
Vor- und Nachteile der verlustfreien Komprimierung<\/h2>\n
Verlustfreie Komprimierung tut das, was auf dem Etikett steht: Sie komprimiert die Dateigr\u00f6\u00dfe eines Bildes so weit wie m\u00f6glich, ohne die sichtbare Qualit\u00e4t zu beeintr\u00e4chtigen. Dazu werden die Metadaten des Bildes entfernt, die unn\u00f6tig viel Platz beanspruchen k\u00f6nnen:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/image-metadata.png\")
Die Metadaten eines Bildes.<\/figcaption><\/figure>\nDer verlustfreie Komprimierungsalgorithmus sucht auch nach sich wiederholenden Pixelsequenzen und kodiert dann eine Abk\u00fcrzung, 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\u00e4hlte Akronym) verwenden, um es blitzschnell zu referenzieren.<\/p>\n
Die verlustfreie Komprimierung funktioniert auf die gleiche Weise, nur dass sie weniger zerst\u00f6rerisch ist. W\u00e4hrend das Entfernen der Metadaten nicht r\u00fcckg\u00e4ngig gemacht werden kann, ist ein Teil der Komprimierung m\u00f6glich.<\/p>\n
Die Vorteile der verlustfreien Komprimierung liegen vor allem in der Beibehaltung der Qualit\u00e4t:<\/p>\n
\n- Bei der verlustfreien Komprimierung bleibt die Qualit\u00e4t eines Bildes im Vergleich zu allen anderen Algorithmen am besten erhalten.<\/li>\n
- Verlustfrei ist fantastisch f\u00fcr Archivierungszwecke. Zum Beispiel kann ein Fotograf die Speicherressourcen mit einem Bild ausgleichen, das die meisten Daten bewahrt.<\/li>\n
- Lossless ist der bevorzugte Komprimierungsalgorithmus f\u00fcr die bildende Kunst: Fotografie, Grafikdesign, digitale Kunst und mehr. Kombiniert man einen verlustfreien Algorithmus mit der richtigen Tiefe und Aufl\u00f6sung, kann man fast eine „Eins-zu-Eins“-Kopie erreichen.<\/li>\n<\/ul>\n
Es ist jedoch zu beachten, wie gut die verlustfreie Komprimierung f\u00fcr bestimmte Nischen geeignet ist: Die Bandbreite der Anwendungen ist klein. Das schr\u00e4nkt ihre Verf\u00fcgbarkeit insgesamt ein.<\/p>\n
Hier sind einige weitere Nachteile der verlustfreien Komprimierung, die du beachten solltest:<\/p>\n
\n- Wenn eine Webseite viele Bilder verwendet, ist eine verlustfreie Komprimierung m\u00f6glicherweise nicht optimal, um sie anzuzeigen. Das liegt daran, dass du in solchen Situationen meist Wert auf eine kleinere Dateigr\u00f6\u00dfe legst.<\/li>\n
- Obwohl die Komprimierung die Dateigr\u00f6\u00dfe verringert, ver\u00e4ndern die verlustfreien Algorithmen die Bilddaten nicht so stark wie die verlustbehafteten. Deshalb kann es sein, dass du nur marginale Gr\u00f6\u00dfenreduzierungen siehst und keine extremen Verschlankungsergebnisse.<\/li>\n<\/ul>\n
Als N\u00e4chstes sehen wir uns die schnellste (und potenziell beste) Methode an, dies zu tun.<\/p>\n
Wie du zwischen verlustbehafteter und verlustfreier Komprimierung entscheidest<\/h2>\n
Jetzt kennst du den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung. Vielleicht wei\u00dft du aber immer noch nicht, welcher Algorithmus der beste f\u00fcr deine Webseite ist.<\/p>\n
Es gibt zwei Situationen, die du ber\u00fccksichtigen solltest:<\/p>\n
\n- F\u00fcr die meisten Anwendungsf\u00e4lle im Internet ist eine verlustbehaftete Komprimierung akzeptabel.<\/li>\n
- Wenn du Fotografien oder fotografierte Kunstwerke anzeigen willst, ist eine verlustfreie Komprimierung besser geeignet.<\/li>\n<\/ol>\n
Diese \u00dcberlegungen basieren auf der Verwendung eines der Standard-Webbildformate wie JPEG, PNG oder GIF. Bei moderneren Formaten wie HEIC und WebP k\u00f6nnen sich deine Anforderungen an die Komprimierung jedoch unterscheiden.<\/p>\n
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<\/a> standardm\u00e4\u00dfig, was zeigt, dass verlustbehaftete Komprimierung f\u00fcr fast jede Anwendung geeignet ist.<\/p>\nOptimiere deine Bilder mit einem Online-Komprimierungsdienst<\/h2>\n
Es gibt viele M\u00f6glichkeiten, wie du deine Bilder komprimieren kannst, bevor du sie auf deiner Webseite zeigst. Du k\u00f6nntest dich zum Beispiel daf\u00fcr entscheiden, die Komprimierung in der Bearbeitungsphase durchzuf\u00fchren. Das k\u00f6nnte ein Nebenprodukt der Konvertierung von RAW-Formaten sein.<\/p>\n
Einige Premium Hosts wie Kinsta bieten sogar integrierte Leistungen an, mit denen du deine Bilddateien automatisch optimieren kannst. Die f\u00fcr alle Kunden kostenlose Funktion „Image Optimization“ von Kinsta<\/a> erstellt WebP-Versionen<\/a> deiner Bilder und liefert die kleinere Version \u00fcber das schnelle Kinsta’s CDN<\/a> an deine Besucher aus. Du kannst zwischen verlustbehafteter und verlustfreier Komprimierung w\u00e4hlen und die Funktion nach Belieben ein- oder ausschalten.<\/p>\nNeben 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\u00e4che (UI). Au\u00dferdem bieten die meisten einen kostenlosen Service an, damit du die App zumindest ausprobieren kannst, bevor du dich festlegst.<\/p>\n
In unserem Artikel \u00fcber Bildoptimierung<\/a> 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<\/a>:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/shortpixel-interface.png\")
Die ShortPixel-Schnittstelle.<\/figcaption><\/figure>\nHier 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\u00e4hlen, da der Prozess dann sofort beginnt.<\/p>\n
Die Auswahl ist einfach: Zwei Formen der verlustbehafteten Komprimierung („Lossy“ und „Glossy“) und eine verlustfreie Option. Die Benutzeroberfl\u00e4che von ShortPixel erkl\u00e4rt die Unterschiede zwischen den einzelnen Algorithmen sehr gut, und du kannst die Bilder innerhalb von Sekunden herunterladen.<\/p>\n
Unterschiede zwischen verlustbehaftet und verlustfrei<\/h2>\n
Wenn es um die Komprimierung digitaler Bilder geht, gibt es verschiedene Formate, aus denen du w\u00e4hlen kannst. Manchmal haben diese auch andere Namen, was von vielen Faktoren abh\u00e4ngt. Im Wesentlichen gibt es jedoch zwei Arten:<\/p>\n
- \n
- Verlustbehaftete Komprimierung:<\/b> Hier geht es darum, die kleinstm\u00f6gliche Dateigr\u00f6\u00dfe f\u00fcr ein Bild zu erreichen. Daher steht die Bildqualit\u00e4t oft ganz unten auf der Priorit\u00e4tenliste.<\/li>\n
- Verlustfreie Komprimierung:<\/b> Auch bei diesem Komprimierungsformat wird die Dateigr\u00f6\u00dfe erheblich reduziert, aber das Bild leidet nicht unter Artefakten und anderen Problemen.<\/li>\n<\/ul>\n
In den meisten F\u00e4llen h\u00e4ngt die Entscheidung f\u00fcr ein bestimmtes Format von deinem Ziel ab: Willst du kleine Dateien, oder liegt dein Schwerpunkt auf der Erhaltung der Qualit\u00e4t?<\/p>\n
Bei der verlustbehafteten Komprimierung werden Daten, die du f\u00fcr unn\u00f6tig h\u00e4ltst, dauerhaft aus dem Bild entfernt. Dabei werden viele verschiedene Techniken eingesetzt, die zu einer wesentlich geringeren Dateigr\u00f6\u00dfe f\u00fchren.<\/p>\n
Bei der verlustfreien Komprimierung werden ebenfalls Daten entfernt, aber sie kann das Original bei Bedarf wiederherstellen. Das Ziel ist es, die Qualit\u00e4t hoch zu halten und gleichzeitig die Dateigr\u00f6\u00dfe zu verringern.<\/p>\n
Es gibt verschiedene M\u00f6glichkeiten, dies zu erreichen, aber das Ergebnis ist oft das gleiche. Um herauszufinden, welche Option f\u00fcr deine Bed\u00fcrfnisse die richtige ist, sollten wir zun\u00e4chst einen Schritt zur\u00fcckgehen und uns die Grundlagen der Bilder und der Komprimierung im Allgemeinen ansehen.<\/p>\n\n
Die Elemente eines digitalen Bildes<\/h2>\n
Wie bei der Software- und Webentwicklung gibt es oft einen „Stack“, um ein Bild von der Kamera ins Internet zu bringen.<\/p>\n
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\u00fcnde mit Farben, Bildplatzhaltern, dynamischen Elementen und mehr \u00fcbersetzt.<\/p>\n
Ein Bild wird in der RAW-Datei je nach Kamerahersteller, Bearbeitungssoftware, Farbraumalgorithmus und anderen Faktoren leicht unterschiedlich dargestellt. Anschlie\u00dfend bearbeitest du das Bild und exportierst es in eines der verschiedenen Dateiformate (mehr dazu sp\u00e4ter):<\/p>\n
Ein Beispiel f\u00fcr die Bearbeitung einer RAW-Datei in Capture One.<\/figcaption><\/figure>\n Es gibt ein paar verschiedene Elemente, die ein digitales Standardbild ausmachen:<\/p>\n
- \n
- Dateityp:<\/b> Verschiedene Typen bieten Qualit\u00e4ten, die f\u00fcr dein endg\u00fcltiges Bild geeignet sein k\u00f6nnen oder auch nicht. Entscheidend ist, dass du den f\u00fcr deine Anwendung am besten geeigneten Dateityp w\u00e4hlst.<\/li>\n
- Aufl\u00f6sung:<\/b> Sie wird oft als Megapixel (MP) angegeben, aber auch als Pixel pro Zoll (PPI) oder Dots per Inch (DPI). H\u00f6here Aufl\u00f6sungen bieten eine bessere Qualit\u00e4t, aber sie erh\u00f6hen auch die anf\u00e4ngliche Dateigr\u00f6\u00dfe<\/li>\n
- Bittiefe:<\/b> Dieser Aspekt bestimmt die Farbinformationen in einem Bild. Eine niedrige Bittiefe gibt nur wenige Farben wieder, w\u00e4hrend eine hohe Bittiefe potenziell Millionen von Farben auf einmal darstellen kann. Generell gilt: Je h\u00f6her, desto besser.<\/li>\n
- Dimensionen:<\/b> Das ist der Platz, den ein Bild einnimmt. Zum Beispiel k\u00f6nnen 1.000 Pixel x 500 Pixel die Gesamtgr\u00f6\u00dfe eines Bildes definieren.<\/li>\n
- Farbraum:<\/b> Dies ist ein Algorithmus, der bestimmt, wie Farben dargestellt werden. Jeder Farbraum ist anders eingerichtet und h\u00e4ngt oft von den Vorlieben des Fotografen ab.<\/li>\n<\/ul>\n
Diese Elemente werden kombiniert, um ein Bild von unterschiedlicher Qualit\u00e4t zu erhalten. Ein gro\u00dfes, hochaufl\u00f6sendes JPEG-Foto mit hoher Bit-Tiefe bietet zum Beispiel h\u00f6chste Qualit\u00e4t und Sch\u00e4rfe:<\/p>\n
Ein Bild mit hoher Qualit\u00e4t.<\/figcaption><\/figure>\n Im Gegensatz dazu kann selbst ein Bild mit gro\u00dfen Abmessungen und der F\u00e4higkeit, viele Farben darzustellen, bei einer niedrigen Aufl\u00f6sung schlecht aussehen:<\/p>\n
Ein Bild mit niedriger Qualit\u00e4t.<\/figcaption><\/figure>\n Mit diesem Gleichgewicht entwickelst du das Kernbild, bevor du die Komprimierung anwendest. Allerdings hat das Format, das du f\u00fcr das Bild verwendest, einen gro\u00dfen Einfluss auf die endg\u00fcltige Qualit\u00e4t.<\/p>\n
Wie die Optimierung von Web-Bildern funktioniert<\/h2>\n
Da die Bildkomprimierung im Grunde immer gleich abl\u00e4uft, kannst du bei der Optimierung von Bildern f\u00fcr das Web Standardregeln anwenden.<\/p>\n
Wir behandeln viele dieser Konzepte an anderer Stelle im Kinsta-Blog<\/a>, aber es lohnt sich, eine kurze Zusammenfassung zu geben:<\/p>\n
- \n
- Verwende eine Aufl\u00f6sung von 72 PPI, da dies der Standard f\u00fcr das Internet ist. F\u00fcr die Archivierung kannst du eine h\u00f6here PPI\/DPI-Aufl\u00f6sung verwenden, aber wir gehen davon aus, dass du das Bild im Internet ver\u00f6ffentlichst.<\/li>\n
- Setze die „lange Kante“ des Bildes auf 2048 Pixel, da dies f\u00fcr viele verschiedene Anwendungen optimal ist.<\/li>\n
- Verwende eine 8-Bit-Farbtiefe, wenn du die M\u00f6glichkeit dazu hast.<\/li>\n
- Lass ein Bild vor der Ver\u00f6ffentlichung durch ein Komprimierungs- und Optimierungsprogramm laufen.<\/li>\n<\/ul>\n
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\u00e4utern werden.<\/p>\n
Dazu schauen wir uns die Vor- und Nachteile von verlustbehafteter und verlustfreier Kompression an.<\/p>\n
Wie Bildkomprimierung deinen Webbildern helfen kann<\/h3>\n
Im Allgemeinen werden bei der Komprimierung das Minimum und das Maximum enger zusammengedr\u00fcckt. Bei der Kompression wird zum Beispiel die niedrigste Lautst\u00e4rke in der Musik angehoben und die h\u00f6chste reduziert. Dadurch wird die durchschnittliche Lautst\u00e4rke f\u00fcr das Ohr lauter.<\/p>\n
Bei Bildern ist die Komprimierung eher ein reduktiver Prozess. Das bedeutet, dass mehr Daten aus deinem Bild entfernt werden, um die Dateigr\u00f6\u00dfe zu verringern, w\u00e4hrend die Qualit\u00e4t so hoch wie m\u00f6glich bleibt.<\/p>\n
Es gibt viele verschiedene propriet\u00e4re Algorithmen, die helfen, die Dateigr\u00f6\u00dfe von Bildern zu reduzieren. In vielen F\u00e4llen sind diese f\u00fcr ein bestimmtes Unternehmen gesch\u00fctzt. Es gibt viele „verlustbehaftete“ und „verlustfreie“ Komprimierungsstandards, die jeweils mit eigenen Bezeichnungen versehen sind:<\/p>\n
Die Komprimierungsoptionen in ShortPixel.<\/figcaption><\/figure>\n Dennoch gibt es viele Vorteile bei der Bildkomprimierung, die nicht nur auf ein bestimmtes Format beschr\u00e4nkt sind:<\/p>\n
- \n
- So kannst du die Dateigr\u00f6\u00dfe niedrig halten, was die Leistung deiner Webseite verbessert.<\/li>\n
- Dadurch hat auch der Server deiner Webseite weniger zu tun, was sich auf die Leistung auswirkt.<\/li>\n
- Kleine Dateigr\u00f6\u00dfen tragen dazu bei, die Serverbelastung zu verringern. So tr\u00e4gst du zu einer nachhaltigen und ethischen Zukunft bei.<\/li>\n
- Je nach Algorithmus und Komprimierungsqualit\u00e4t, die du w\u00e4hlst, kannst du eine nahezu perfekte und vergleichbare Qualit\u00e4t anzeigen.<\/li>\n<\/ul>\n
\u00c4hnlich wie bei der Erstellung von Bildern, die du mit anderen teilen m\u00f6chtest, ist es wichtig, dass du mit verschiedenen Kompressionswerten spielst, ein bestimmtes Unternehmen w\u00e4hlst und den richtigen Algorithmus ausw\u00e4hlst, um Ergebnisse zu erzielen, die f\u00fcr dich funktionieren.<\/p>\n
Vor- und Nachteile der verlustbehafteten Komprimierung<\/h2>\n
Bei der verlustbehafteten Komprimierung<\/a> wird die Dateigr\u00f6\u00dfe des Bildes reduziert, ohne dass alle anderen Aspekte ber\u00fccksichtigt werden. Die Funktionsweise des Algorithmus besteht darin, Daten dauerhaft zu entfernen. Das kann so zerst\u00f6rerisch sein, wie es klingt.<\/p>\n
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\u00fcngliche, qualitativ hochwertige Bild so gut wie m\u00f6glich darzustellen, aber mit einem geringeren Gewicht – und das bedeutet, dass einige Daten nicht ber\u00fccksichtigt werden k\u00f6nnen.<\/p>\n
Im Allgemeinen bietet die verlustbehaftete Komprimierung einige Vorteile:<\/p>\n
- \n
- Die Dateigr\u00f6\u00dfen werden klein sein – in manchen F\u00e4llen unter 10 Kilobyte (KB).<\/li>\n
- Der Qualit\u00e4tsverlust ist in vielen F\u00e4llen akzeptabel, trotz der Artefakte.<\/li>\n<\/ul>\n
Das bringt uns zu den Nachteilen der verlustbehafteten Komprimierung: Die Bildqualit\u00e4t nimmt mit jedem Grad der Komprimierung ab:<\/p>\n
Ein Kompressionsregler f\u00fcr ein JPEG-Bild.<\/figcaption><\/figure>\n Du wirst feststellen, dass in einigen F\u00e4llen Farbstreifen – bei denen die Farbschattierungen nicht richtig wiedergegeben werden – und ein Verlust an Kantensch\u00e4rfe sichtbar werden. Bei Bildern mit weniger Farben ist dies weniger stark ausgepr\u00e4gt, aber die Beeintr\u00e4chtigung der Klarheit ist immer noch vorhanden.<\/p>\n
Au\u00dferdem ist die Bildverschlechterung ein permanentes Merkmal des Komprimierungsprozesses. Das bedeutet, dass es keine M\u00f6glichkeit gibt, die Auswirkungen zu einem sp\u00e4teren Zeitpunkt r\u00fcckg\u00e4ngig zu machen.<\/p>\n
Trotz der Nachteile ist die verlustbehaftete Komprimierung hervorragend f\u00fcr das Web und die Leistung deiner Webseite. Die winzigen Dateigr\u00f6\u00dfen f\u00fchren nicht immer zu k\u00f6rnigen Bildern, obwohl du es nat\u00fcrlich auch auf die Spitze treiben kannst:<\/p>\n
<\/a>Ein Beispiel f\u00fcr ein zu stark komprimiertes Bild.<\/figcaption><\/figure>\n Verlustbehaftete Komprimierung ist jedoch nicht die einzige Option. Die verlustfreie Komprimierung ist eine Alternative f\u00fcr qualit\u00e4tsbewusste Webseiten-Betreiber.<\/p>\n
Vor- und Nachteile der verlustfreien Komprimierung<\/h2>\n
Verlustfreie Komprimierung tut das, was auf dem Etikett steht: Sie komprimiert die Dateigr\u00f6\u00dfe eines Bildes so weit wie m\u00f6glich, ohne die sichtbare Qualit\u00e4t zu beeintr\u00e4chtigen. Dazu werden die Metadaten des Bildes entfernt, die unn\u00f6tig viel Platz beanspruchen k\u00f6nnen:<\/p>\n
Die Metadaten eines Bildes.<\/figcaption><\/figure>\n Der verlustfreie Komprimierungsalgorithmus sucht auch nach sich wiederholenden Pixelsequenzen und kodiert dann eine Abk\u00fcrzung, 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\u00e4hlte Akronym) verwenden, um es blitzschnell zu referenzieren.<\/p>\n
Die verlustfreie Komprimierung funktioniert auf die gleiche Weise, nur dass sie weniger zerst\u00f6rerisch ist. W\u00e4hrend das Entfernen der Metadaten nicht r\u00fcckg\u00e4ngig gemacht werden kann, ist ein Teil der Komprimierung m\u00f6glich.<\/p>\n
Die Vorteile der verlustfreien Komprimierung liegen vor allem in der Beibehaltung der Qualit\u00e4t:<\/p>\n
- \n
- Bei der verlustfreien Komprimierung bleibt die Qualit\u00e4t eines Bildes im Vergleich zu allen anderen Algorithmen am besten erhalten.<\/li>\n
- Verlustfrei ist fantastisch f\u00fcr Archivierungszwecke. Zum Beispiel kann ein Fotograf die Speicherressourcen mit einem Bild ausgleichen, das die meisten Daten bewahrt.<\/li>\n
- Lossless ist der bevorzugte Komprimierungsalgorithmus f\u00fcr die bildende Kunst: Fotografie, Grafikdesign, digitale Kunst und mehr. Kombiniert man einen verlustfreien Algorithmus mit der richtigen Tiefe und Aufl\u00f6sung, kann man fast eine „Eins-zu-Eins“-Kopie erreichen.<\/li>\n<\/ul>\n
Es ist jedoch zu beachten, wie gut die verlustfreie Komprimierung f\u00fcr bestimmte Nischen geeignet ist: Die Bandbreite der Anwendungen ist klein. Das schr\u00e4nkt ihre Verf\u00fcgbarkeit insgesamt ein.<\/p>\n
Hier sind einige weitere Nachteile der verlustfreien Komprimierung, die du beachten solltest:<\/p>\n
- \n
- Wenn eine Webseite viele Bilder verwendet, ist eine verlustfreie Komprimierung m\u00f6glicherweise nicht optimal, um sie anzuzeigen. Das liegt daran, dass du in solchen Situationen meist Wert auf eine kleinere Dateigr\u00f6\u00dfe legst.<\/li>\n
- Obwohl die Komprimierung die Dateigr\u00f6\u00dfe verringert, ver\u00e4ndern die verlustfreien Algorithmen die Bilddaten nicht so stark wie die verlustbehafteten. Deshalb kann es sein, dass du nur marginale Gr\u00f6\u00dfenreduzierungen siehst und keine extremen Verschlankungsergebnisse.<\/li>\n<\/ul>\n
Als N\u00e4chstes sehen wir uns die schnellste (und potenziell beste) Methode an, dies zu tun.<\/p>\n
Wie du zwischen verlustbehafteter und verlustfreier Komprimierung entscheidest<\/h2>\n
Jetzt kennst du den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung. Vielleicht wei\u00dft du aber immer noch nicht, welcher Algorithmus der beste f\u00fcr deine Webseite ist.<\/p>\n
Es gibt zwei Situationen, die du ber\u00fccksichtigen solltest:<\/p>\n
- \n
- F\u00fcr die meisten Anwendungsf\u00e4lle im Internet ist eine verlustbehaftete Komprimierung akzeptabel.<\/li>\n
- Wenn du Fotografien oder fotografierte Kunstwerke anzeigen willst, ist eine verlustfreie Komprimierung besser geeignet.<\/li>\n<\/ol>\n
Diese \u00dcberlegungen basieren auf der Verwendung eines der Standard-Webbildformate wie JPEG, PNG oder GIF. Bei moderneren Formaten wie HEIC und WebP k\u00f6nnen sich deine Anforderungen an die Komprimierung jedoch unterscheiden.<\/p>\n
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<\/a> standardm\u00e4\u00dfig, was zeigt, dass verlustbehaftete Komprimierung f\u00fcr fast jede Anwendung geeignet ist.<\/p>\n
Optimiere deine Bilder mit einem Online-Komprimierungsdienst<\/h2>\n
Es gibt viele M\u00f6glichkeiten, wie du deine Bilder komprimieren kannst, bevor du sie auf deiner Webseite zeigst. Du k\u00f6nntest dich zum Beispiel daf\u00fcr entscheiden, die Komprimierung in der Bearbeitungsphase durchzuf\u00fchren. Das k\u00f6nnte ein Nebenprodukt der Konvertierung von RAW-Formaten sein.<\/p>\n
Einige Premium Hosts wie Kinsta bieten sogar integrierte Leistungen an, mit denen du deine Bilddateien automatisch optimieren kannst. Die f\u00fcr alle Kunden kostenlose Funktion „Image Optimization“ von Kinsta<\/a> erstellt WebP-Versionen<\/a> deiner Bilder und liefert die kleinere Version \u00fcber das schnelle Kinsta’s CDN<\/a> an deine Besucher aus. Du kannst zwischen verlustbehafteter und verlustfreier Komprimierung w\u00e4hlen und die Funktion nach Belieben ein- oder ausschalten.<\/p>\n
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\u00e4che (UI). Au\u00dferdem bieten die meisten einen kostenlosen Service an, damit du die App zumindest ausprobieren kannst, bevor du dich festlegst.<\/p>\n
In unserem Artikel \u00fcber Bildoptimierung<\/a> 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<\/a>:<\/p>\n
Die ShortPixel-Schnittstelle.<\/figcaption><\/figure>\n 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\u00e4hlen, da der Prozess dann sofort beginnt.<\/p>\n
Die Auswahl ist einfach: Zwei Formen der verlustbehafteten Komprimierung („Lossy“ und „Glossy“) und eine verlustfreie Option. Die Benutzeroberfl\u00e4che von ShortPixel erkl\u00e4rt die Unterschiede zwischen den einzelnen Algorithmen sehr gut, und du kannst die Bilder innerhalb von Sekunden herunterladen.<\/p>\n
- Aufl\u00f6sung:<\/b> Sie wird oft als Megapixel (MP) angegeben, aber auch als Pixel pro Zoll (PPI) oder Dots per Inch (DPI). H\u00f6here Aufl\u00f6sungen bieten eine bessere Qualit\u00e4t, aber sie erh\u00f6hen auch die anf\u00e4ngliche Dateigr\u00f6\u00dfe<\/li>\n
- Verlustfreie Komprimierung:<\/b> Auch bei diesem Komprimierungsformat wird die Dateigr\u00f6\u00dfe erheblich reduziert, aber das Bild leidet nicht unter Artefakten und anderen Problemen.<\/li>\n<\/ul>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/imagify-interface.png\")
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-interface.png\")
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-expert-mode.png\")