Share
Haben Sie sich jemals gefragt, was der Unterschied zwischen JPEG-, GIF- und PNG-Bildern ist, die wir im Web verwenden? Als Designer - und insbesondere als Webdesigner - ist es wichtig, den Unterschied zwischen den verschiedenen Bildformaten und deren Verwendung in jeder Situation zu kennen. In diesem Artikel wird beschrieben, wie Sie sie in jeder Situation einsetzen können, um die Dateigrößen klein und die Bildqualität hoch zu halten. Wir legen dies unter "Basix" ab, aber die Informationen sollten für alle interessant sein, die ein tieferes Verständnis der Bildformate erlangen möchten.
Um ein Werkzeug optimal nutzen zu können, müssen Sie zunächst die Funktionsweise des Werkzeugs verstehen. Um zu verstehen, wie Bildtypen besser verwendet werden, müssen wir die Funktionsweise ihres Kompressionsalgorithmus untersuchen. Ich weiß, ich weiß, du bist kein Zahlenfreak und wen interessiert das wirklich? Es ist wie ein Auto zu fahren; Sie können es besser fahren, wenn Sie wissen, wie alle kleinen Teile zusammenwirken. Und wenn etwas schief geht, können Sie es beheben!
JPEG wurde von der Joint Photographic Experts Group entwickelt. Wie Sie vielleicht schon vermutet haben, funktioniert es gut für natürliche Bildtypen (Fotografie). Natürliche Bildtypen wie das Fotografieren weisen gleichmäßige Farbvariationen auf, sodass das JPEG-Format auch für Bilder geeignet ist, die Farbverläufe und unterschiedliche Farbtöne und Farben enthalten.
Ein wichtiger Punkt bei JPEGs ist, dass sie im Allgemeinen a sind verlustbehaftet Format, es sei denn, Sie verwenden eine andere, verlustfreie Variation. Eine verlustbehaftete Komprimierung ist einfach eine Form der Kodierung, die einige ihrer Daten verwirft (verliert). Wenn Sie also ein JPG 100-mal speichern, verschlechtert sich die Komprimierung mit der Zeit. Es gibt "verlustfreie" Versionen von JPGs, diese Variationen sind jedoch nicht üblich und werden nicht allgemein unterstützt. Wenn Sie Bilddaten in einem verlustfreien Format speichern müssen, verwenden Sie am besten ein Format wie TIFF oder PSD.
Nun zum technischen Teil: Beim JPEG-Prozess wird das Bild in 8 × 8-Pixelblöcke unterteilt und durch eine DCT-Berechnung (Discrete Cosine Transform) mit anschließender Quantisierung (JPEG 2000, eine neuere Version) anstelle von DCT, einer Wavelet-Transformation verwendet ).
In Laien ausgedrückt: Es betrachtet im Wesentlichen Blöcke des Bildes und bestimmt die kleinen Farbabweichungen und verwirft dann einige dieser Variationen basierend auf dem von Ihnen gewählten Komprimierungsgrad. Die verworfenen Daten werden vollständig aus der Datei entfernt, wodurch eine kleine Datei entsteht. Folglich verringert sich auch die Bildqualität. Sie wissen wahrscheinlich, dass Sie bei einer sehr hohen Komprimierung ein verschlechtertes, pixeliertes Bild erhalten…, während niedrigere Komprimierungseinstellungen zu einem Bild mit höherer Qualität führen.
GIF (Graphics Interchange Format) wurde von CompuServe entwickelt und verwendet das verlustfreie LZW-Komprimierungsverfahren (Lempel-Ziv-Welch). Diese Komprimierungsmethode erstellt eine Farbtabelle für das Bild, in der jeder Farbwert Pixeln zugewiesen wird. Diese Komprimierungsmethode macht dieses Bildformat ideal für Strichzeichnungen, Logos oder andere einfache Bilder ohne Farbverläufe oder Farbveränderungen.
Eine interessante Anmerkung zu dieser Komprimierungsmethode ist, dass sie die Pixeländerung horizontal betrachtet. Dies bedeutet, dass Bilder, bei denen Pixelfarbänderungen häufiger auftreten, horizontal größer sind als Bilder, bei denen Pixelfarbänderungen häufiger auftreten. Das Format unterstützt bis zu 8 Bit pro Pixel - so kann ein einzelnes Bild auf eine Palette von bis zu 256 verschiedenen Farben verweisen. Sie können weniger Farben verwenden (Sie haben möglicherweise nur GIF-Bilder mit einer Handvoll Farben gesehen), was zu interessanten, sogar künstlerischen Ergebnissen führen kann.
GIFs können zwei weitere Dinge tun, die JPEGs nicht können. Erstens kann eine GIF Transparenz verwenden. In einer GIF sind Pixel entweder zu 100% transparent oder zu 100% undurchsichtig. GIF ist auch ein Multi-Image-Format, das Sie verwenden können Animation (wohl oder übel).
PNG (Portable Network Graphics) wurde entwickelt, um das GIF-Format im Wesentlichen zu ersetzen oder zumindest zu verbessern. PNG verwendet die DEFLATE-Komprimierungsmethode - den gleichen Algorithmus, der in zip und gzip verwendet wird. Ich werde nicht näher darauf eingehen, wie diese Komprimierungsmethode funktioniert, weil sie für diesen Artikel etwas zu kompliziert ist, aber es ist eine verlustfreie Komprimierung. Aus diesem Grund führt das PNG-Format tendenziell zu größeren Bildgrößen als JPEG, wenn es für fotografische Bilder verwendet wird. Bei Verwendung für Bilder vom Strichart-Typ führt PNG zu sehr viel kleineren Dateien als JPEG und fast immer zu kleineren Formaten als GIF.
Im Gegensatz zu GIF ist PNG mit JPEG identisch, da es sich um ein Einzelbildformat handelt. Das heißt, PNG unterstützt keine Animationen. Es unterstützt jedoch einen großen Vorteil, den weder JPEG noch GIF unterstützen: Alpha-Transparenz. Pixel in einem PNG-Bild könnten im Vergleich zum GIF-Format zu 50% transparent sein, wodurch diese Pixel entweder zu 100% transparent oder zu 100% undurchsichtig sein müssten. Wie Sie sich vorstellen können, würde dies ein besseres Mischen und eine glattere Grafik ermöglichen als GIF. PNG führt auch einige andere Verbesserungen gegenüber dem GIF-Format durch, die jedoch nicht erforderlich sind.
Es ist unnötig zu erwähnen, dass PNG in fast jeder Hinsicht ein viel besseres Format als GIF ist, mit Ausnahme von sehr kleinen Dateien (wie sie in Hintergrundmustern verwendet werden). Das PNG-Format wurde von Webdesignern frühzeitig in Brand gesetzt, da es nicht mit einigen älteren Webbrowsern kompatibel war. Dieses Problem kann jedoch weitgehend durch einige großartige Skripts gelöst werden, wie das Skript DD_Belated.
Wie Sie wahrscheinlich wissen, gibt es zwei Haupttypen von PNG.
Nachfolgend finden Sie zwei Beispielbilder, die zeigen, wie und wann jedes Bildformat verwendet wird. Sie sind möglicherweise bereits mit diesen Methoden vertraut, aber wenn Sie sie nicht wirklich studiert haben, ist dies eine Überprüfung wert.
Wie Sie sehen können, ist das Bild unten in der Natur fotografisch und die Farben und Töne variieren stark. Offensichtlich verwenden nicht alle Bilder so viele Farben - aber dieses Bild eignet sich hervorragend als Beispiel für die Verwendung des JPEG-Formats.
Das Bild unten zeigt die JPEG-Komprimierung von einer Qualitätseinstellung von 100% bis zu 0%. Bei einer Qualität von 100% scheint das Bild verlustfrei zu sein, jedoch werden immer noch Daten aus dem Originalbild verworfen. Das menschliche Auge kann den Datenverlust nicht sehen, da es winzig ist. Bei 50% nimmt die Bildqualität merklich ab, aber wie Sie sehen, ist die Dateigröße über 100 KB kleiner. Das ist ein gewaltiger Unterschied mit einem geringfügigen sichtbaren Qualitätsverlust. Bei 25% sieht das Bild wirklich schlecht aus und hat nicht viel zusätzliche Dateigröße gespeichert. Bei 0% sieht das Bild schrecklich aus und obwohl das Bild eine viel kleinere Dateigröße als die Einstellung 100% hat, lohnt sich der Kompromiss nicht.
Dieses Bild würde wahrscheinlich bei einer Qualität von ~ 65% am besten aussehen, was die Bildgröße um fast 100K reduzieren würde. Verringern Sie den Schieberegler langsam, bis Sie feststellen können, dass sich die Bildqualität wirklich verschlechtert, um die besten Einstellungen für ein JPEG zu ermitteln. Bewegen Sie dann die Qualität um etwa 5-10% zurück.
Wir wissen, dass diese JPG für das Web anständig aussieht. Schauen wir uns einige Vergleiche der Dateigröße / Qualität für die anderen Formate an:
GIF ergibt eine Dateigröße von 63,77 KB und ein schrecklich aussehendes Bild.
PNG8 führt aufgrund der fortgeschritteneren Komprimierungsmethoden zu einer Dateigröße von 53,52 KB, sieht jedoch genauso aus wie die GIF-Datei.
PNG24 führt zu einer Dateigröße von 253,9 KB und sieht dem Original sehr ähnlich, lohnt jedoch nicht die große Dateigröße.
Die bestmögliche Option für diesen Bildtyp ist JPEG mit ~ 65% Qualität. kleine Dateigröße (39,77K) mit sehr geringem visuellen Qualitätsverlust.
Wie Sie unten sehen können, verwendet das Bild keine unterschiedlichen Farben oder Töne, sondern stattdessen Volltonfarben. Dieses Bild ist 5,72 K (GIF) und verwendet insgesamt 8 Farben. Dies macht GIF und PNG8 zu großartigen Formaten für Strichzeichnungen, einfache Farblogos usw. Dies ist die bessere Wahl, da PNG8 aufgrund der besseren verwendeten Komprimierungsmethode zu einer geringeren Dateigröße (3,54 KB) führt.
Wenn Sie versuchen, ein GIF wie das obige Bild als JPEG zu speichern, kann dies zu Pixelierung oder Bildverzerrung führen. Wenn Sie sich mit Fotografie und anderen reichhaltigen Bildern beschäftigen, führt dies immer zu sehr viel größeren Dateien. Das Bild unten ist auf maximale Komprimierung eingestellt und führt zu einer Dateigröße von fast 8 KB für JPEG gegenüber 5,72 KB für GIF und 3,54 KB für PNG8.
Im Gegensatz zu JPEG und PNG24 können Sie bei GIF und PNG8 auswählen, wie viele Farben verwendet werden können (bis zu 256). Bei Bildern wie Logos und einfachen Strichzeichnungen können Sie eine geringere Dateigröße erzielen, indem Sie weniger Farben auswählen. Achten Sie darauf, dass Sie nicht zu wenige Farben auswählen, da das Bild dadurch viel schlechter aussehen kann.
Das Bild unten zeigt ein PNG8 mit Transparenz (GIF sieht genauso aus) wie in Photoshop. Wenn Sie Transparenz mit GIF oder PNG8 verwenden, sollten Sie die Matte des Bildes auf die Farbe des Hintergrunds einstellen - für eine bessere Überblendung und ein saubereres Bild. Wie bereits erwähnt, ist dies darauf zurückzuführen, dass GIF keine Alphatransparenz unterstützt und Photoshop keine Alphatransparenz mit dem PNG8-Format unterstützt, obwohl es dies unterstützt. (Bearbeiten - Dies wurde in neuen Versionen von Photoshop inzwischen behoben.).
Zum Glück erlaubt uns Fireworks die Verwendung von Alpha Transparency mit dem PNG8-Format (C'mon Photoshop!). Wie Sie im Bild unten sehen können, ist der schwarze Farbverlauf immer noch in der Variation des Tons begrenzt, wodurch der Farbverlauf etwas abgehackt wirkt. Das Beste an der Verwendung von Alpha-Transparenz mit PNG8 ist, dass Sie immer noch die kleine Dateigröße erhalten, die Kanten jedoch nahtlos ineinander übergehen und selbst kleinere Farbverläufe gut aussehen.
Ein weiterer großer Vorteil des PNG8-Formats besteht darin, dass der IE6 die native Verwendung von Alpha-Transparenz unterstützt. Für einfache Bilder, die Alphatransparenz (Schatten, Logos usw.) benötigen, müssen Sie also nicht IE6 hacken, wenn Sie PNG8 und Alphatransparenz verwenden!
Leider können Sie in Photoshop kein Bild als PNG8 mit Alphatransparenz speichern. Sie müssen dazu in Fireworks springen.
Wählen Sie in der Palette Optimieren das PNG8-Format mit ausgewählter Alphatransparenz aus und klicken Sie dann in der rechten unteren Ecke auf „Neu erstellen“.
Sie müssen keine Mattfarbe auswählen und Sie können die Anzahl der Farben an Ihre Bedürfnisse anpassen und die Dateigröße reduzieren. Im Beispiel rechts habe ich diese Einstellungen als „PNG8 Alpha-T“ gespeichert, sodass ich nicht jede Option erneut auswählen muss, wenn ich ein PNG8-Bild mit Alphatransparenz speichern möchte.
Das ist ungefähr alles, was dazu gehört!
Die Verwendung von PNG24 ist im Grunde dieselbe Idee wie die Verwendung von GIF oder PNG8, mit der Ausnahme, dass dies zu einer größeren Dateigröße führt, da es eine viel breitere Palette von Farbvariationen unterstützt. Wenn Sie Bilder mit komplexeren Farbverläufen haben, die Transparenz oder größere Farbtiefe benötigen, ist PNG24 die beste Wahl. Leider unterstützt IE6 PNG24 nicht nativ; so müssen Sie es "hacken", um richtig zu arbeiten.
PNG24s eignen sich in den meisten Fällen, in denen Sie Transparenz benötigen - sie haben eine wesentlich höhere Dateigröße, funktionieren jedoch in Fällen wie Markenlogos, bei denen Qualität wichtig ist und Sie kein verlustbehaftetes Format verwenden möchten.
Dies ist ein relativ neues Format, das Google erst vor wenigen Wochen angekündigt hatte. Aus ihrer Pressemitteilung:
"Um die von JPEG bereitgestellte Komprimierung zu verbessern, haben wir einen Bildkomprimierer verwendet, der auf dem VP8-Codec basiert, den Google im Mai 2010 zur Verfügung gestellt hatte. Wir haben die Techniken der VP8-Video-Intra-Frame-Codierung angewendet, um die Hüllkurve bei der Standbildcodierung zu verschieben. Wir auch ein sehr einfacher Container auf RIFF-Basis angepasst: Während dieses Containerformat einen minimalen Aufwand von nur 20 Byte pro Bild verursacht, ist es erweiterbar, Autoren das Speichern von Metadaten zu ermöglichen, die sie speichern möchten.
Während die Vorteile eines auf VP8 basierenden Bildformats theoretisch klar waren, mussten wir sie in der realen Welt testen. Um die Effektivität unserer Bemühungen zu beurteilen, haben wir zufällig rund 1.000.000 Bilder aus dem Internet (meistens JPEGs und einige PNGs und GIFs) ausgewählt und sie erneut in WebP codiert, ohne die visuelle Qualität spürbar zu beeinträchtigen. Dies führte zu einer Verringerung der Dateigröße um durchschnittlich 39%. Wir erwarten, dass Entwickler in der Praxis mit WebP eine noch bessere Dateigrößenreduzierung erzielen, wenn Sie von einem unkomprimierten Image aus starten. "
Das Ziel hier ist einfach: Bilder mit modernsten Algorithmen im Web zu beschleunigen. Die Frage ist folgende: Wird angenommen? Google ist ein enormes Unternehmen mit einiger Kraft, dieses Format in die Masse zu drängen, aber wie wir bei einigen seiner Produkte gesehen haben (ich sehe Sie bei Wave an!), Können selbst großartige Ideen zum Erliegen kommen.
"Skalierbare Vektorgrafiken" ist ein Format, das sich als weit verbreiteter Bildtyp nie richtig durchsetzen konnte. Die Idee hinter diesem Format besteht darin, "Vektorgrafiken" im Web zu berücksichtigen. Das Format verwendet XML als Basis für die Beschreibung eines 2D-Bildes im Web. Die Browserunterstützung für SVG ist inkonsistent, aber wenn Sie wirklich skalierbare Grafiken einbinden möchten, sollten Sie sich dieses Format genauer ansehen.
In Ihrer Freizeit möchte ich Sie dazu ermutigen, etwas tiefer in diese Bildformate und alles, was sie zu bieten haben, einzugehen. Sie lernen viel und wissen genau, was Sie mit diesen Bildformaten machen können oder welche Sie für jede Situation verwenden können. Der Wert von sehr kleinen Dateigrößen für Bilder scheint mit der Verbreitung des Breitbandzugangs im Internet zu vergehen. Die Geschwindigkeit ist jedoch immer ein nützliches Merkmal der Website. Das Verständnis dieser Bildformate ist der erste Schritt zur Optimierung Ihrer eigenen Bilder im Internet.
Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne weiter unten posten!
Accentsconagua