Clever JPEG Optimization Techniques

Posted by admin am 5. Juli 2009 | Keine Kommentare

(No Ratings Yet)

Loading ...

Autor: Kamel Nahdi

Ich bin Kamel Nahdi. Ich schreibe Tutorials für verschiedene Zeitschriften und Webseiten, wenn ich nicht entwerfen Gig Poster, T-Shirts, Kataloge, Magazine, etc.

Kamel Nahdi hat, schrieb 46 Artikel für uns.

Get Shareaholic

Wenn Menschen über die Bildoptimierung zu sprechen, sollten sie nur den limitierten untersuchten Parametern durch populäre Bild-Editoren angeboten, wie die "Quality"-Regler, die Anzahl der Farben in der Palette, Dithering und so weiter. Auch ein paar Hilfsprogramme, wie optipng und jpegtran , zu verwalten, um zusätzliche Bytes aus Bilddateien zu quetschen. Alle diese sind ziemlich gut bekannt Werkzeuge, die Web-Entwickler und Designer bieten mit einfachen Techniken der Bildoptimierung.

In diesem Artikel zeigen wir Ihnen, einen anderen Ansatz zur Bildoptimierung, basierend darauf, wie die Bilddaten in unterschiedlichen Formaten gespeichert. Beginnen wir mit dem JPEG-Format und eine einfache Technik, die als die acht-Raster zu beginnen.

Acht-Pixel Grid

Wie Sie bereits wissen, besteht ein JPEG-Bild aus einer Serie von 8 × 8 Pixel-Blöcke, die besonders sichtbar werden, wenn Sie die JPEG "Quality"-Parameter zu niedrig eingestellt. Wie hilft uns mit Bildoptimierung? Betrachten wir folgendes Beispiel:

32 × 32 Pixel, Qualität: 10 (in Photoshop), 396 Bytes.

Beide weißen Quadrate die gleiche Größe: 8 x 8 Pixel. Obwohl die Qualität niedrig eingestellt ist, sucht der unteren rechten Ecke Fuzzy (wie man erwarten könnte) und der oberen linken Ecke sieht schön und sauber. Wie konnte das passieren? Um dies zu beantworten, müssen wir auf diesem Bild unter einem Gitter aus:

Wie Sie sehen können, ist die obere linke Quadrat in einem Acht-Pixel-Raster, was bedeutet, dass das Quadrat scharfe Blicke sorgt ausgerichtet.

Beim Speichern wird das Bild in Blöcke von 8 × 8 Pixel unterteilt, und jeder Block wird unabhängig optimiert. Da die untere rechte Quadrat nicht mit der Gitterzelle, sieht der Optimierer für Farb-Indizes im Durchschnitt zwischen Schwarz und Weiß (in JPEG, je 8 × 8-Block wird als Sinus-codiert). Dies erklärt die fuzz. Viele fortschrittliche Tools für JPEG-Optimierung haben diese Funktion, die eine selektive Optimierung und die Ergebnisse in Koeffizienten unterschiedlicher Qualität in verschiedenen Bildbereichen und mehr gerettet Bytes aufgerufen wird.

Diese Technik ist besonders nützlich für das Speichern von rechteckigen Objekten. Mal sehen, wie es mit einer eher praktischen image funktioniert:

13,51 KB.

12,65 KB.

Im ersten Beispiel ist die Mikrowelle zufällig positioniert. Vor dem Speichern der zweiten Datei, richten wir das Bild mit den acht-Pixel-Raster. Qualitäts-Einstellungen sind die gleichen für beide: 55. Werfen wir einen genaueren Blick (die roten Linien markieren das Raster):

Wie Sie sehen können, haben wir 1 KB von Bilddaten einfach durch die Positionierung des Bildes korrekt gespeichert. Auch haben wir das Bild ein wenig "sauberer" zu.

Farboptimierung

Diese Technik ist recht kompliziert und funktioniert nur für bestimmte Arten von Bildern. Aber wir werden über sie sowieso gehen, wenn nur die Theorie lernen.

Zuerst müssen wir wissen, welches Farbmodell wird für das JPEG-Format verwendet. Die meisten Bildformate sind im RGB-Farbmodell, aber JPEG können auch in YCbCr, die häufig für das Fernsehen verwendet werden.

YCbCr ist vergleichbar mit dem HSV-Modell in dem Sinne, dass YCbCr und HSV beiden separaten Leichtigkeit, für die menschliche visuelle System ist sehr empfindlich von Chroma (HSV vertraut sein sollten, um die meisten Designer). Es besteht aus drei Komponenten: Farbton, Sättigung und Wert. Das wichtigste für unsere Zwecke hier ist der Wert, der auch als Leichtigkeit bekannt (Optimierer eher Farbkanäle komprimieren, aber halten Sie den Wert so hoch wie möglich, weil der Mensch am empfindlichsten auf it). Photoshop verfügt über ein Lab-Farbmodus, der uns besser darauf vorbereiten das Bild für die Kompression im JPEG-Optimierer hilft.

Beginnen wir mit der Mikrowelle, wie unser Beispiel-Stick. Es ist ein feines Netz über der Tür, die ein perfektes Beispiel für unsere Farb-Optimierung ist. Nach einer einfachen Kompression, in einer Qualität von 55, wiegt die Datei 64,39 KB.

990 × 405 Pixel, Qualität: 55 (in Photoshop), 64,39 KB.
Größere Version.

Öffnen Sie die größere Version des Bildes in Photoshop, und schalten Sie Lab-Farbmodus: Bild>> Modus>> Lab-Farbe.

Lab-Modus ist fast, aber nicht ganz, wie HSV und YCbCr. Die Leichtigkeit Kanal enthält Informationen über das Bild der Leichtigkeit. Der A-Kanal zeigt, wie viel Rot oder Grün ist. Und die B-Kanal Griffe blau und gelb. Trotz dieser Unterschiede können Sie diesen Modus, uns loszuwerden redundanten Farbinformationen.

Wechseln Sie die Kanäle-Palette und Blick auf die A-und B-Kanäle. Wir können deutlich sehen, die Textur des Netzes, und es scheint, drei Blöcke mit unterschiedlichen Intensitäten der Leichtigkeit werden.

Wir werden sein macht etwas Farbe ändert, so hält eine Kopie des Originals öffnen in einem separaten Fenster wird wahrscheinlich helfen. Unser Ziel ist es, die körnige Textur in diesen Abschnitten in beiden Farbkanäle glatt. Dies gibt dem Optimierer viel einfacher Daten zu verarbeiten. Sie wundern sich vielleicht, warum wir die Optimierung dieser speziellen Bereich des Bildes (die Ofentür Fenster) sind. Einfache: In diesem Bereich besteht aus abwechselnd schwarzen und orange Pixeln. Schwarze Null ist Leichtigkeit, und diese Information wird in der Leichtigkeit Kanal gespeichert. Also, wenn wir diesen Bereich komplett orange in die Farbkanäle vornehmen, werden wir nichts verlieren, weil die Leichtigkeit Kanal wird bestimmen, welche Pixel sollte dunkel sein, und der Unterschied zwischen voll schwarz und dunkel orange werden nicht auf einer solchen Textur bemerkbar.

Wechseln Sie auf die A-Kanal, wählen Sie jeden Block getrennt und wenden Sie einen Median-Filter (Filter>> Rauschfilter>> Median). Der Radius sollte so klein wie möglich (dh bis die Textur verschwindet), um nicht die Blendung zu viel zu verzerren. Ziel für 4 im ersten Block, 2 in der zweiten und 4 in der dritten. An diesem Punkt wird die Tür wie folgt aussehen:

Größere Version.

Die Sättigung ist gering, so werden wir brauchen, um dies zu beheben. Um alle Farbänderungen sofort, duplizieren Sie die momentan aktive Fenster: Fenster>> Anordnen>> Neues Fenster. In dem neuen Fenster auf den Lab-Kanal klicken, um das Bild zu sehen. Als Ergebnis sollten Sie Ihren Arbeitsplatz so aussehen:

Das Original befindet sich auf der rechten Seite, das Duplikat auf der linken Seite und am Arbeitsplatz an der Unterseite.

Wählen Sie alle drei Blöcke in der A-Kanal in den Arbeitsplatz, und rufen Sie den Levels Fenster (Strg + L oder Image>> Adjustments>> Levels). Bewegen Sie den mittleren Regler nach links, so dass die Farbe des Ofens ist drin in der Ausfertigung mit der des Originals (Ich habe einen Wert von 1,08 für den mittleren Regler). Machen Sie dasselbe mit den B-Kanal und sehen, wie sieht es aus:

990 × 405 Pixel, Qualität: 55 (in Photoshop), 59,29 KB
Large-Version

Wie Sie sehen können, entfernten wir 5 KB aus dem Bild (es war 64,39 KB). Obwohl die Beschreibung dieser Technik sieht groß und unheimlich, es dauert nur etwa eine Minute durchführen: Schalten Sie den Lab-Farbmodell, wählen Sie verschiedene Regionen der Farbkanäle und die Nutzung der Median-Filter auf sie, dann tun einige Sättigung Korrektur. Wie bereits erwähnt, ist diese Technik nützlich für die Theorie dahinter, aber ich benutze es für die Feinabstimmung große Werbung Bilder, die aussehen sauber und scharf sein.

Gemeinsame JPEG Optimierungstipps

Wir werden hier beenden, indem sie einige nützliche Tipps zur Optimierung.

Jedes Mal, wenn Sie die Bildkomprimierung Qualität, werden absichtlich in Ihrer Wahl des Programms, die Sie für die Optimierung. JPEG-Standards sind streng: sie bestimmen nur, wie ein Bild umgewandelt wird, wenn geringere Dateigröße. Aber der Entwickler entscheidet, was genau der Optimierer tut.

Zum Beispiel, fördern einige Vermarkter ihre Software als mit den besten Optimierung, so dass Sie Dateien auf eine kleine Größe mit hoher Qualität zu speichern, während porträtiert Photoshop als dass Dateien doppelt so schwer. Nicht übernommen in. Jedes Programm hat seine eigene Qualität skalieren und verschiedene Werte bestimmen zusätzliche Optimierungsalgorithmen erhalten.

Das einzige Kriterium, nach dem die Optimierung Leistung zu vergleichen, um die Qualität zu Größenverhältnis. Wenn Sie ein Bild mit einer 55 bis 60 Quality in Photoshop, wie es aussehen wird und haben die gleiche Größe wie Dateien mit anderer Software, sagen wir, 80 Quality made.

Speichern Sie niemals Bilder bei 100 Qualität. Dies ist nicht die höchste Qualität, sondern nur eine mathematische Optimierung zu begrenzen. Sie werden am Ende mit einem unverhältnismäßig schwere Datei. Speichern eines Bildes mit einer Qualität von 95 ist mehr als genug, um Verlust zu verhindern.

Beachten Sie, dass, wenn Sie die Qualität auf unter 50 in Photoshop, eine zusätzliche Optimierung Algorithmus namens Farbe Downsampling, das im Durchschnitt der Farbe in den benachbarten acht Pixel-Blöcke ausgeführt wird:

48 × 48 Pixel, Qualität: 50 (in Photoshop), 530 Bytes.

48 × 48 Pixel, Qualität: 51 (in Photoshop), 484 Bytes.

Also, wenn das Bild kleiner, kontrastreiche Details im Bild, Einstellung der Qualität auf mindestens 51 in Photoshop ist besser.

In einem zukünftigen Artikel werden wir über einige erweiterte PNG Tipps zur Optimierung gehen.

Über den Autor
Sergey Chikuyonok ist eine russische Front-End-Web-Entwickler und Autor mit einer großen Leidenschaft für die Optimierung: von Bildern und JavaScript Effekte Arbeitsprozess und Zeitersparnis auf Codierung.