Haupt / Wie Man

So komprimieren Sie Bilder: Ein Webdesigner-Handbuch

Die durchschnittliche Geschwindigkeit einer modernen Internetverbindung würde für Webmaster der Vergangenheit sehr futuristisch klingen. In den Anfängen des Webs war die Menge der übertragenen Daten sowohl zeitlich als auch kostenmäßig von entscheidender Bedeutung. Daher versuchten alle, die etwas online hosten, Bilder kleiner zu machen.

Ironischerweise ist das Problem heutzutage nicht verschwunden. Jedes Mal, wenn Sie eine skriptlastige Website besuchen (z. B. Mainstream-Weltnachrichten), werden häufig ein Dutzend Megabyte JavaScript-Code, Bilder, Videos und so weiter abgerufen. Es kann immer noch schmerzhaft langsam sein und für einige Benutzer mobiler Daten sogar einen hübschen Cent kosten (dies sollte kein Problem sein, wenn Sie einen anständigen Benutzer verwenden Webseitenersteller , und gut Web-Hosting sollte es für dich im Auge behalten).

In diesem Tutorial erfahren Sie, wie Sie Bitmap-Dateien für das Web verkleinern können. Solange es die guten alten PNG- und JPEG-Formate verwendet (siehe mehr darüber Bilddateiformate hier, und stellen Sie sicher, dass Sie Ihre Dateien auf der rechten Seite speichern Cloud-Speicher Wir werden sehen, wie wir sie verkleinern können, ohne die Qualität zu beeinträchtigen Open Source Projekte . Am Ende werden wir wesentlich kleinere Dateien haben, die immer noch gut aussehen, aber weniger Zeit und Daten benötigen, um in den Webbrowsern der Benutzer gerendert zu werden.

Lesen Sie weiter, um in die Details einzutauchen. Zunächst ein kurzer Hinweis zur Software. Alle hier genannten Tools sind Open Source - springen Sie nach unten, um eine Anleitung zu erhalten wie man die Software bekommt du brauchst.

Die besten WordPress-Portfolio-Themen

Wählen Sie das richtige Format

Es mag trivial klingen, immer noch über die Dateigröße nachzudenken, aber es gibt genug Beispiele, bei denen ein Bild entweder ohne Zweck zu massiv ist oder trotz seiner Größe schrecklich aussieht. Um solche Fehler zu vermeiden, wählen Sie ein Format, um ein Bild mit Bedacht zu speichern oder zu konvertieren. Bei Verwendung von JPEG wird ein Bild in Kacheln mit einer Größe von 8 x 8 Pixel aufgeteilt, wobei jede Kachel komprimiert wird. Die Komprimierungsstufe hängt vom Benutzer ab (dies ist der Schieberegler beim Speichern eines Bildes). In der Regel ermöglicht JPEG jedoch eine Erhöhung der Dateigröße um 10: 1 bei akzeptablem Qualitätsverlust.

Der Wahrnehmungsunterschied zwischen JPEG-Dateien mit hohem (80-100) und niedrigem (40-60) Komprimierungsverhältnis ist für fotografische Bilder minimal, macht sich jedoch bei Dingen wie digitalen Grafiken, Symbolen und Screenshots bemerkbar. Daher wird empfohlen, JPEG für Fotos zu wählen und für die anderen Arten von Bitmap-Bildern etwas anderes zu verwenden.

PNG ist eines der am besten geeigneten Formate für Netzwerkgrafiken (genau das bedeutet die Abkürzung). Während das JPEG-Format immer verlustbehaftet ist (auch wenn die Qualität auf 100 eingestellt ist), kann das PNG-Format entweder verlustbehaftet sein oder nicht. Selbst wenn dies der Fall ist, werden Daten komprimiert, indem die Anzahl der im Bild verwendeten Farben verringert wird, sodass das Ergebnis normalerweise immer noch klar und deutlich aussieht. Wählen Sie also PNG für die Darstellung von Screenshots oder anderen Bildern mit fester Füllung.

Beginnen Sie mit bequemen Methoden

Imagine basiert auf Electron und bietet eine benutzerfreundliche Oberfläche für die gleichzeitige Verarbeitung mehrerer Bilder

Die Optimierung von Bitmap-Dateien ist mit einer Reihe von Freeware-Tools möglich, sodass Sie sich nicht auf einen vollwertigen Bildeditor verlassen müssen. Stellen Sie sich vor, es handelt sich um eine solche Anwendung, die unglaublich einfach zu bedienen ist. Ziehen Sie einfach ein Bild (oder einen Stapel von Bildern) über das Imagine-Fenster und passen Sie die Komprimierungsrate mit den kleinen Schiebereglern an.

Stellen Sie sich vor, Sie arbeiten mit JPEG-, PNG- und WebP-Dateien und sind ideal für verlustbehaftete Codierung. Der größte Vorteil ist, dass das Tool interaktiv ist. Es zeigt Ihnen sofort, wie das Bild mit den aktuellen Einstellungen aussehen wird, und zeigt die vorgeschlagene Dateigröße an. Stellen Sie sich vor, es eignet sich hervorragend für die Stapelverarbeitung - zumindest können bei Bedarf alle geöffneten Bilder auf einmal gespeichert werden.

Es ist unnötig zu erwähnen, dass es Dutzende, wenn nicht Hunderte anderer JPEG- und PNG-Optimierer gibt, einschließlich einiger praktischer Onlinedienste (wie z TinyJPG ). Aber beeilen Sie sich noch nicht - wir haben etwas Besseres im Ärmel.

Fortgeschrittene Komprimierungstechniken

Für JPEG haben wir ein Testfoto eines Strohhutes auf einem unscharfen Hintergrund verwendet. Guetzli reduzierte die Dateigröße um 33 Prozent und Lepton um weitere 23 Prozent

Auf den ersten Blick sieht es so aus, als könnten wir verlustbehafteten JPEG-Dateigrößen nicht viel mehr abnehmen, was durch vergebliche Versuche, Bilder mithilfe von ZIP oder einer anderen Komprimierungstechnik weiter zu archivieren, sofort bewiesen werden kann. Aber hier kommt Guetzli, ein intelligenter Schweizer Cookie und ein ausgefeilter Wahrnehmungscodierer für JPEG.

Guetzli verkleinert ein durchschnittliches JPEG um 20 bis 30 Prozent, indem es seine Kompressionsdichte erhöht. Das Geheimnis ist, dass der Algorithmus weiß, wie Menschen wahrnehmen, was sie sehen, sodass das resultierende Bild für das Auge immer noch gut aussieht. Guetzli ist ein plattformübergreifendes Befehlszeilentool, das die folgende Syntax verwendet:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Das Originalbild kann entweder PNG oder JPEG sein, während die Ausgabe immer JPEG ist. Daher können Sie Guetzli verwenden, um PNG dank seiner hochmodernen Komprimierung in JPEG zu konvertieren. Die Qualität sollte zwischen 0-100 liegen. Guetzli ist eine unglaublich ressourcenintensive Software. Es verbraucht fast 300 MB Speicher pro 1 Megapixel und auch viel CPU-Leistung. Wir hoffen, dass Ihre superoptimierten JPEGs die globale Erwärmung nicht fördern…

Tragbare Netzwerkgrafiken sind eine andere Geschichte, solange sie für verlustfreie Bildcodierung entwickelt wurden. Wenn Sie ein Bild in einem Bildeditor wie GIMP als PNG speichern, haben Sie einen Schieberegler für das Komprimierungsverhältnis mit Werten von 0 bis 9. Hier bedeutet 0 keine Komprimierung und das Bild wiegt so, als ob es als TIFF gespeichert worden wäre. Im Gegensatz dazu entfernt 9 die meisten nicht benötigten Farbinformationen und führt zu einer Datei, die 15 bis 20 Mal kleiner als TIFF ist.

Dieses Mal werden wir versuchen, eine bereits kleine PNG-Datei (mit einem Verhältnis von 9) noch kleiner zu machen. Zu diesem Zweck verwenden wir Zopfli, ein weiteres Open-Source-Tool, das wiederum in Google Labs verwurzelt ist. Zopfli ist ein hochwertiger Kompressor für die Deflate-, Gzip- und Zlib-Datencodierung.

Der interessante Teil ist, dass Zopfli zwei Encoder in einem Bundle enthält: die Allzweck-Binärdatei und das dedizierte 'zopflipng'-Tool. Letzteres ist genau das, was wir brauchen! Zopflipng ist ein Deflate-basierter Encoder mit bestimmten Algorithmen, die aus dem WebP-Format zurückportiert wurden. Es ist klug genug, automatisch die beste Strategie mithilfe von Scanline-Codes auszuwählen und verschiedene unnötige Blöcke in PNG zu entfernen. Verwenden Sie es mit dieser einfachen Syntax:

zopflipng original_png output_png

Zopflipng kann die Arbeit wahrscheinlich mit den folgenden expliziten Optionen noch besser machen:

zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent original_png output_png

Der Preis, den Sie zahlen, ist der gleiche wie bei Guetzli: Das Tool benötigt viel Zeit, um ein Bild zu verarbeiten, insbesondere wenn es groß ist. Je mehr Iterationen Sie verwenden, desto länger dauert es, aber 500 ist eine vernünftige Zahl. Die Zunahme der Dateigröße mit Zopfli liegt zwischen 8 und 20 Prozent, was für visuell perfekte Bilder sehr gut ist. Kurz gesagt, bei Screenshots ist es üblich, 8 Prozent zu gewinnen, während bei Fotos 20 Prozent möglich sind (wenn Sie sie als PNGs speichern müssen).

Aktualisieren Sie auf Dateiformate der nächsten Generation

Das Test-PNG-Bild war ein gewöhnlicher Screenshot von 1920 x 1080; Die konsequente Komprimierung durch Zopflipng und dann FLIF stieg um 14 Prozent, ohne die Anzahl der Farben zu verringern

Formal geht dieser Teil über PNG und JPEG hinaus, ist jedoch sehr praktisch, da Sie die Dateikonvertierung im laufenden Betrieb organisieren können. Wir meinen hier die Verwendung alternativer und neuer Bildformate, die die besten Industriestandards übertreffen (siehe WebP).

Eines davon ist FLIF, ein neues verlustfreies Bildformat, das auf der MANIAC-Komprimierungsmethode (Meta-Adaptive Near-Zero Integer Arithmetic Coding) basiert und PNG, FFV1, verlustfreies WebP, verlustfreies BPG und verlustfreies JPEG 2000 hinsichtlich des Komprimierungsverhältnisses übertreffen kann. FLIF ist für alle Plattformen verfügbar und wird von einigen Bildbetrachtern bereits unterstützt, aber es ist noch ein langer Weg bis zum Mainstream. Derzeit ist es sinnvoll, FLIF für die Speicherung oder auf der Serverseite zu verwenden. Es kann sich wie ein effizientes Archivierungsformat verhalten. Sie müssen den Code von der GitHub-Seite des Projekts abrufen und kompilieren. Sobald Sie die haben flif Verwenden Sie den folgenden Befehl, um ein PNG-Image zu codieren:

flif -e original_png output_flif

Ersetzen -ist mit -d und ordnen Sie die Dateien in umgekehrter Reihenfolge an, um Ihr Bild wieder in PNG zu dekomprimieren. In Bezug auf die Tools gibt es derzeit die FLIF WIC API-Komponente für Windows, das Qt FlIF-Plugin für Linux und den Phew Image Viewer sowie das QuickLook-Plugin für MacOS (Einzelheiten finden Sie im Abschnitt Links). Im Vergleich zu dem Bild, das zuvor von Zopflipng gefoltert wurde, reduziert FLIF die Dateigröße weiter um ~ 10 Prozent. Beeindruckende Ergebnisse!

Unser letzter Held ist Lepton, ein weiteres Open-Source-Format, das von den Dropbox-Entwicklern großzügig veröffentlicht wurde. Lepton macht mit JPEG das, was FLIF mit PNG macht. Lepton kann JPEGs im verlustfreien Modus um bis zu 22 Prozent verkleinern, was bedeutet, dass der Encoder im Vergleich zur ursprünglichen JPEG-Datei keinen Qualitätsverlust verursacht. Unter der Haube impliziert Lepton intelligente Techniken zum Komprimieren dieser 8x8-JPEG-Blöcke. Anstatt Nullen und Einsen zu schreiben, codiert Lepton Bitmap-Daten mit dem arithmetischen VP8-Codierer, der den Kontext um jeden Block berücksichtigt.

Unser Test hat gezeigt, dass Lepton sehr effizient und schnell ist. Der Befehl sah folgendermaßen aus:

lepton original.jpg output.lep

Und in ein oder zwei Sekunden produzierte das Tool die .lep-Datei, die um fast ein Viertel des Originals kleiner war. Im Vergleich zum zeitaufwändigen Guetzli ist Lepton unglaublich schnell. Sie können Lepton genauso verwenden wie Dropbox. Das Format ermöglicht es Ihnen, die Speicherkosten um 20 bis 25 Prozent zu senken. Da es so schnell ist, können Sie Codierungs- / Decodierungssequenzen im laufenden Betrieb ohne größere Nachteile ausführen. Der Dekodierungsbefehl ist übrigens ebenso einfach, er muss nur die beiden Dateien austauschen und die resultierende Datei ist identisch mit dem ursprünglichen JPEG:

lepton original.lep output.jpg

Verwenden Sie die beschriebenen Techniken, um die Speicherung von Benutzerdaten zu optimieren oder die Ladegeschwindigkeit Ihrer Webprojekte weiter zu verbessern.

So erhalten Sie die Software

Jede in diesem Tutorial beschriebene Software ist Open Source, sodass Sie sie frei verwenden können. Es ist nicht erforderlich, alles aus Quellen zu kompilieren, da die meisten der folgenden Tools binäre Downloads haben. Hier erfahren Sie, wie Sie die Software zum Laufen bringen.

Schnapp dir die Guetzli-Binärdatei Hier . Das ist am einfachsten. Zopfli gibt den Code nur an (erstellen Sie ihn mit 'make') bei GitHub . Es kann jedoch klüger sein, es über den Paketmanager von node.js abzurufen:

npm install node-zopfli

Einige hilfreiche Links für FLIF:

FLIF-Hub : Referenzimplementierung, Quellen und Windows-Binärdateien
XnView MP : Ein plattformübergreifender Foto-Viewer mit integrierter FLIF-Unterstützung
qt-flif-plugin : Ein Paradies für Linux-Benutzer
Puh : Ein Viewer und ein QuickLook-Plug-In für macOS
Lepton : Quellcode und Windows-Binärdateien

Dieser Artikel wurde ursprünglich in Ausgabe 316 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Sie hier die Ausgabe 316 oder Abonnieren Sie hier .

Zum Thema passende Artikel: