Heute werden wir über ein Thema sprechen, das mir sehr am Herzen liegt: Bildkomprimierung! Ich mache nur einen halben Scherz, aber es hat etwas seltsam Befriedigendes daran, die Größe einer Bilddatei um große Prozente zu reduzieren, ohne die Qualität zu beeinträchtigen.

Die Inspiration für diesen Beitrag stammt von einem sehr beliebten Beitrag in der Facebook-Gruppe Beaver Builders. Ich hatte gerade ein Video-Tutorial über die Aktivierung und Verwendung des neuen Guetzli-Algorithmus von Google in ImageOptim gedreht und war schockiert über all die anderen Optionen, mit denen ich bisher nicht vertraut war. In diesem Artikel sprechen wir über einige Tipps und Tools zum Komprimieren von Bildern für das Web.

Erste Terminologie

Bevor wir näher darauf eingehen, wollen wir einige gemeinsame Terminologien festlegen.

JPEG, PNG, SVG – Dies sind die drei beliebtesten Bilddateitypen im Web. In diesem Tutorial konzentrieren wir uns hauptsächlich auf JPEGs und PNGs, da diese am meisten von der Komprimierung und Optimierung profitieren.

JPEGs eignen sich normalerweise besser für Bilder mit hoher Wiedergabetreue wie Fotos und Webgrafiken, die keine Transparenz aufweisen.

PNGs eignen sich hervorragend für Dinge wie Symbole und Logos oder alles, was Transparenz erfordert. PNGs können auch erheblich optimiert werden, nachdem sie aus Photoshop oder dem Grafikbearbeitungstool Ihrer Wahl stammen.

Verlustfrei und verlustbehaftet – Dies sind Komprimierungsmethoden. Verlustfreie Komprimierung bedeutet, dass Ihr Bild keine Qualität verliert. Im wahrsten Sinne des Wortes überhaupt keine. Dazu gehört das Entfernen von Metadaten aus dem Bild oder von allem, was sich nicht auf die Qualität auswirkt.

Verlustbehaftet bedeutet, dass der Komprimierungsalgorithmus die Qualität Ihres Bildes verringert. Sie erzielen zwar bessere Komprimierungsergebnisse, müssen jedoch Einbußen bei der Bildqualität hinnehmen. Die meisten verlustbehafteten Komprimierungstools verfügen über einen Prozentschieberegler, sodass Sie das Verhältnis zwischen Qualität und Dateigröße auswählen können.

Profi-Tipp: Bei großen Bildhintergründen verwische ich das Bild oft etwas oder füge eine deckende Farbebene über das Foto. Das Reduzieren der Details und/oder das Normalisieren der Farbe ist eine schöne ästhetische Stilwahl, die die Dateigröße erheblich reduziert. Auf unserer Jobseite können Sie dies in Aktion erleben.

Wie stark sollte ich Bilder komprimieren?

Ziel der Bildkomprimierung ist es, die Dateigröße so weit wie möglich zu reduzieren, ohne zu große Einbußen bei der Qualität hinnehmen zu müssen. Dabei handelt es sich eher um eine Kunst als um eine Wissenschaft, und der Grad der „akzeptablen Qualität“ variiert je nach Situation.

Ein Fotostudio möchte seine Arbeit wahrscheinlich in höchster Qualität hervorheben, während eine Immobilien-Website möglicherweise bereit ist, im Gegenzug für die Anzeige von mehr Bildern auf der Seite auf Qualität zu verzichten.

Mit den meisten Bildbearbeitungsprogrammen können Sie Bilder in unterschiedlicher Qualität exportieren. Wenn Sie jedoch ein spezielles Bildkomprimierungstool verwenden, ist es manchmal am besten, dieser Software die bestmögliche Qualität zu geben und die Komprimierungsalgorithmen von dort aus arbeiten zu lassen.

Werkzeugoptionen für die Bildkomprimierung

Wie ich kürzlich herausgefunden habe, mangelt es nicht an Optionen, wenn es um Tools und Dienste zur Bildkomprimierung geht.

ImageOptim

Ich habe mit ImageOptim angefangen und bevorzuge es immer noch. ImageOptim ist nur unter OSX verfügbar, unterstützt jedoch verlustbehaftete und verlustfreie Komprimierung sowohl für JPEG- als auch PNG-Dateien. Es kann auch für die Verwendung des relativ neuen Komprimierungsalgorithmus Guetzli von Google konfiguriert werden. Guetzli kann die Dateigröße im Durchschnitt um 20–30 % stärker reduzieren als andere Algorithmen.

ImageOptim ist ein Programm, das sich im Dock Ihres Macs befindet. Sie können Bilder einfach per Drag & Drop auf das Programmsymbol ziehen und sie werden dann komprimiert. Ich neige dazu, ein oder zwei Bilder gleichzeitig zu optimieren, daher funktioniert diese Lösung für mich hervorragend. Wenn Sie jedoch an einer großen Anzahl von Bildern oder Bildern mit großen Dateien arbeiten, sind einige der anderen Optionen möglicherweise die bessere Wahl für große Aufgaben.

Smush von WPMU Dev

Smush ist ein kostenloses WordPress-Plugin von WPMU Dev, das so konfiguriert werden kann, dass vorhandene Bilder in Ihrer WordPress-Installation und/oder beim Hochladen auf WordPress optimiert werden. Smush ist großartig, weil die schwere Arbeit von den Servern von WPMU Dev übernommen wird und Bilder optimiert und in der Größe geändert werden.

Wenn Sie Websites für Kunden erstellen – insbesondere für solche, die gerne mehrere Megabyte große Bilder direkt von ihrer Digitalkamera hochladen – ist Smush eine großartige Option, die Sie einrichten und vergessen können.

TinyPNG

TinyPNG ist ein webbasierter Bildkomprimierer. Sie können Ihre Bilder (bis zu 5 bm) hochladen und die komprimierte Version herunterladen. Dies verbraucht Bandbreite und ist daher möglicherweise nicht die beste Option, wenn Sie über eine langsame oder kostenpflichtige Internetverbindung verfügen. Es unterstützt JPEG- und PNG-Dateitypen. Es ist kostenlos. Es scheint keine Kontrolle über das Qualitätsniveau der Komprimierung zu bieten.

Nachdem ich mit TinyPNG experimentiert habe, denke ich, dass ich immer noch ImageOptim bevorzuge, aber es wäre eine großartige Option für Windows-Benutzer, schnelle Einzelaufträge oder Benutzer, die speziell nach einem webbasierten Kompressor suchen. Oder wenn Sie versuchen, die Verarbeitung in die Cloud statt auf Ihren lokalen Computer zu verlagern.

Stellen Sie sich vor

Imagify ist eine weitere webbasierte SASS-Option, die ein spezielles WordPress-Plugin zur Optimierung und Größenänderung von Bildern bereitstellt, während Sie sie hochladen oder direkt aus dem WordPress-Administrationsbereich. Das Imagify WordPress-Plugin kann sich einer beeindruckenden durchschnittlichen Bewertung von 4,5 Sternen rühmen und in vielen Rezensionen wird darauf hingewiesen, dass die mit Imagify erzielte Bildqualität besser ist als die der Alternativen.

Imagify bietet einen kostenlosen Plan an, mit dem Sie Bilder unter 2 MB hochladen und optimieren können. Die optimierte Version der Bilder bleibt 24 Stunden lang zum Herunterladen von ihren Servern verfügbar.

JPEGMini

JPEGMini ist ein SASS-Dienst, der für Leute interessant sein dürfte, die eine Arbeitslösung suchen. Stellen Sie sich vor, Sie haben die Aufgabe, Zehntausende hochauflösende Produktbilder für einen E-Commerce-Shop zu optimieren. Mit JPEGMini können Sie die gesamte Verarbeitung auf die vermutlich schnellen und optimierten Cloud-Server verlagern.

ShortPixel

ShortPixel ist ein weiteres webbasiertes SASS. Wenn Sie die Bildkomprimierung auf einen Cloud-Server verlagern möchten, ist dies eine gute Option. Ihr kostenloser Plan ermöglicht Ihnen die Optimierung von bis zu 100 Bildern pro Monat und es gibt Premium-Pläne ab 5 $/Monat für mehr. ShortPixel hat auch ein WordPress-Plugin und ist der absolute Favorit beim Rest des BB-Teams.

Stellen Sie sich vor

Was ist dein Favorit?

Wenn Sie den ursprünglichen Facebook-Thread besuchen, der zu diesem Beitrag inspiriert hat, werden Sie mehrere andere Optionen und Leute sehen, die aus verschiedenen Gründen die eine oder andere bevorzugen. Vermissen wir Ihren Favoriten? Teilen Sie uns in den Kommentaren mit, was es ist und warum es Ihnen gefällt.

Auch wenn Sie der Typ sind, der Leistung isst, schläft und atmet, wird Ihnen dieses Interview mit Jon Brown über moderne Best Practices im Bereich Leistung wahrscheinlich gefallen.