Bildtypen und Verwendung im Webdesign

Haben Sie sich einmal 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 für jede Situation verwenden, um die Dateigröße klein und die Bildqualität hoch zu halten. Wir legen das unter "Basix" ab, aber die Informationen müssen für alle interessant sein, die ein tieferes Verständnis der Bildformate erlangen möchten.

Die Unterschiede

Um ein Werkzeug optimal nutzen zu können, müssen Sie zunächst verstehen, wie das Werkzeug funktioniert. Um zu verstehen, wie Bildtypen besser verwendet werden, müssen wir uns ansehen, wie ihr Komprimierungsalgorithmus funktioniert. Ich weiß, ich weiß, Sie sind kein Zahlenfan und wen interessiert das wirklich? Es ist jedoch so, als würde man ein Auto fahren. Sie können es besser fahren, wenn Sie wissen, wie all die kleinen Teile interagieren. Wenn etwas schief geht, wissen Sie, wie Sie es beheben können!

Informationen zum JPG-Format

JPEG wurde von der Joint Photographic Experts Group entwickelt. Wie Sie vielleicht erraten haben, funktioniert es gut für natürliche Bildtypen (Fotografie). Natürliche Bildtypen wie die Fotografie weisen sanfte Farbvariationen auf, was bedeutet, dass das JPEG-Format auch für Bilder gut geeignet ist, die Farbverläufe und unterschiedliche Töne und Farben enthalten.

Ein wichtiger Punkt bei JPEGs ist, dass sie im Allgemeinen ein verlustbehaftetes Format sind, es sei denn, Sie verwenden eine andere verlustfreie Variante. Verlustbehaftete Komprimierung ist einfach eine Form der Codierung, bei der einige Daten verworfen (verloren) werden. Wenn Sie ein JPG 100-mal speichern, wird es mit der Zeit langsam schlechter. Es gibt "verlustfreie" Versionen von JPGs, aber diese Variationen sind 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: Der Prozess eines JPEG unterteilt das Bild in 8×8-Pixelblöcke und führt diese durch eine DCT-Berechnung (Discrete Cosine Transform), gefolgt von einer Quantisierung (JPEG 2000, eine neuere Version, verwendet eine Wavelet-Transformation anstelle von DCT ).

In Laienbegriffen: Es werden im Wesentlichen Bildblöcke betrachtet und die kleinen Farbabweichungen ermittelt. Anschließend werden einige dieser Abweichungen basierend auf der von Ihnen gewählten Komprimierungsstufe verworfen. Die verworfenen Daten werden vollständig aus der Datei entfernt, was zu einer kleinen Datei führt. Folglich verringert das auch die Bildqualität; Sie wissen wahrscheinlich, dass wenn Sie die Komprimierung sehr hoch einstellen, Sie ein verschlechtertes, pixeliges Bild erhalten ... während niedrigere Komprimierungseinstellungen zu einem Bild mit höherer Qualität führen.

Informationen zum .GIF-Format

GIF (Graphics Interchange Format) wurde von CompuServe entwickelt und verwendet die verlustfreie LZW-Komprimierungsmethode (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 unterschiedliche Farben.

Ein interessanter Hinweis zu dieser Komprimierungsmethode ist, dass die Pixeländerung horizontal betrachtet wird. Das bedeutet, dass Bilder, bei denen Pixelfarbänderungen, die horizontal häufiger auftreten, größer sind als Bilder, bei denen Pixelfarbänderungen vertikal häufiger auftreten. Das Format unterstützt bis zu 8 Bit pro Pixel. Dadurch kann ein einzelnes Bild auf eine Palette mit bis zu 256 verschiedenen Farben verweisen. Sie können weniger Farben verwenden (möglicherweise haben Sie GIF-Bilder nur mit einer Handvoll Farben gesehen), was zu interessanten, sogar künstlerischen Ergebnissen führen kann.

GIFs können zwei zusätzliche Dinge tun, die JPEGs nicht können. Erstens kann ein GIF Transparenz verwenden. In einem GIF sind Pixel entweder 100% transparent oder 100% undurchsichtig. GIF ist auch ein Mehrbildformat, sodass Sie Animationen verwenden können (zum Guten oder Schlechten).

Informationen zum PNG-Format

PNG (Portable Network Graphics) wurde erstellt, um das GIF-Format im Wesentlichen zu ersetzen oder zumindest zu verbessern. PNG verwendet die DEFLATE-Komprimierungsmethode - denselben Algorithmus, der auch in zip und gzip verwendet wird. Ich werde nicht darauf eingehen, wie diese Komprimierungsmethode funktioniert, da sie für diesen Artikel etwas zu kompliziert ist, aber es handelt sich um eine verlustfreie Komprimierung. Aus diesem Grund führt das PNG-Format bei Verwendung für fotografische Bilder tendenziell zu größeren Bildgrößen als JPEG. Bei Verwendung für Bilder vom Typ Strichgrafik führt PNG zu viel kleineren Dateigrößen als JPEG und fast immer zu kleineren Größen als GIF.

Im Gegensatz zu GIF ist PNG in Bezug auf ein einzelnes Bildformat dasselbe wie JPEG. Das bedeutet, dass PNG keine Animation unterstützt. Es unterstützt jedoch einen großen Vorteil, den weder JPEG noch GIF unterstützen: Alpha-Transparenz. Pixel in einem PNG-Bild könnten 50% transparent sein, im Gegensatz zum GIF-Format, bei dem diese Pixel entweder 100% transparent oder 100% undurchsichtig sein müssten. Wie Sie sich vorstellen können, würde das eine bessere Überblendung und flüssigere Grafik als GIF ermöglichen. PNG implementiert auch einige andere Verbesserungen gegenüber dem GIF-Format, 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 sehr kleiner Dateien (wie diese in Hintergrundmustern). Das PNG-Format wurde von Webdesignern frühzeitig als nicht kompatibel mit einigen älteren Webbrowsern eingestuft, aber dieses Problem kann heutzutage größtenteils durch einige großartige Skripte wie das DD_Belated-Skript behoben werden.

Wie Sie wahrscheinlich wissen, gibt es zwei Haupttypen von PNG.

• PNG8 (8-Bit) - im Wesentlichen dasselbe wie ein GIF in Bezug auf Farbbeschränkungen (maximal 256 Farben), ermöglicht jedoch Alpha-Transparenz
• PNG24 (24-Bit) - ermöglicht eine viel breitere Farbpalette.

Verwenden von JPEG, GIF und PNG

Im Folgenden sind zwei Beispielbilder aufgeführt, anhand derer ich zeigen werde, wie und wann jedes Bildformat verwendet werden soll. Sie sind vielleicht bereits mit diesen Methoden vertraut, aber wenn Sie sie nicht wirklich studiert haben, ist das eine Überprüfung wert.

Verwenden von JPG

Wie Sie sehen können, ist das Bild unten fotografischer Natur mit stark variierenden Farben und Tönen. Natürlich werden nicht alle Bilder so viele Farben verwenden - aber dieses Bild eignet sich hervorragend als Beispiel für die Verwendung des JPEG-Formats.

Ein einfaches JPG

Das Bild unten zeigt die JPEG-Komprimierung von einer Qualitätseinstellung von 100% bis 0%. Bei 100% Qualität scheint das Bild verlustfrei zu sein, aber Daten werden immer noch aus dem Originalbild verworfen. Das menschliche Auge kann den Datenverlust nicht sehen, da er 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 großer Unterschied bei einem minimalen sichtbaren Qualitätsverlust. Bei 25% sieht das Bild wirklich schlecht aus und hat nicht viel zusätzliche Dateigröße gespart. Bei 0% sieht das Bild schrecklich aus, und obwohl das Bild eine viel kleinere Dateigröße als die 100% -Einstellung hat, lohnt sich der Kompromiss nicht.

JPG-Komprimierungsbeispiele

Dieses Bild würde bei einer Qualität von ~ 65% wahrscheinlich am besten aussehen, was die Bildgröße um fast 100K reduzieren würde. Um die besten Einstellungen für ein JPEG zu ermitteln, reduzieren Sie den Schieberegler langsam, bis Sie feststellen, dass sich die Bildqualität wirklich verschlechtert. Verschieben Sie dann die Qualität wieder um etwa 5-10%.

65% JPG-Komprimierung

Wir wissen, dass dieses JPG für das Web anständig aussieht. Schauen wir uns einige Vergleiche zwischen Dateigröße und Qualität für die anderen Formate an:

GIF führt zu einer Dateigröße von 63,77 KB und einem schrecklich aussehenden Bild.

PNG8 führt aufgrund der erweiterten Komprimierungsmethoden zu einer Dateigröße von 53,52 KB, sieht jedoch genauso aus wie das GIF.

PNG24 führt zu einer Dateigröße von 253,9 KB und ähnelt dem Original, ist aber die große Dateigröße nicht wert.

Die bestmögliche Option für diesen Bildtyp ist JPEG mit einer Qualität von ~ 65%. kleine Dateigröße (39,77 KB) mit sehr geringem Verlust an visueller Qualität.

Verwenden von GIF und PNG8

Wie Sie unten sehen können, verwendet das Bild keine unterschiedlichen Farben oder Töne, sondern Volltonfarben. Dieses Bild ist 5,72 KB (GIF) groß und verwendet insgesamt 8 Farben. Das macht GIF und PNG8 zu großartigen Formaten für Strichzeichnungen, einfache Farblogos usw. PNG8 wäre hier die bessere Wahl, da es zu einer kleineren Dateigröße (3,54 KB) führt. aufgrund der besseren Komprimierungsmethode.

GIF-Komprimierung (Beachten Sie die eingeschränkte Farbpalette)

Wenn Sie versuchen, ein GIF wie das obige Bild als JPEG zu speichern, kann es zu Pixelbildung oder Bildverzerrung führen. Es wird immer auch zu viel größeren Dateien führen, wenn Sie sich mit Fotografie und anderen reichen Bildern beschäftigen. Das folgende Bild 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.

GIF-Komprimierung...

Im Vergleich zur JPG-Komprimierung mit geringer Qualität

Im Gegensatz zu JPEG und PNG24 können Sie mit 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 kleinere Dateigröße erzielen, indem Sie weniger Farben auswählen. Achten Sie jedoch darauf, dass Sie nicht zu wenige Farben auswählen, da das das Bild erheblich verschlechtern kann.

Beispiel für eine GIF-Farbauswahl

Das Bild unten ist ein PNG8 mit Transparenz (GIF sieht genauso aus) wie in Photoshop. Wenn Sie Transparenz mit GIF oder PNG8 verwenden, möchten Sie die Mattierung des Bilds auf die Farbe des Hintergrunds einstellen - für eine bessere Überblendung und ein saubereres Bild. Wie bereits erwähnt, liegt dies daran, dass GIF keine Alpha-Transparenz unterstützt und Photoshop keine Alpha-Transparenz mit dem PNG8-Format unterstützt, obwohl es das unterstützt (Bearbeiten - das wurde seitdem in neuen Versionen von Photoshop behoben).

PNG8 Beispiel

Dank Fireworks können wir Alpha Transparency im PNG8-Format verwenden (C'mon Photoshop!). Wie Sie im Bild unten sehen können, ist der schwarze Farbverlauf in der Variation des Tons immer noch begrenzt, wodurch der Farbverlauf etwas abgehackt wirkt. Das Tolle an der Verwendung von Alpha-Transparenz mit PNG8 ist, dass Sie immer noch die kleine Dateigröße erhalten, die Kanten jedoch reibungslos verschmelzen und selbst kleine Verläufe gut aussehen.

Ein weiterer großer Vorteil des PNG8-Formats ist, dass IE6 die Verwendung von Alpha-Transparenz nativ unterstützt! Das bedeutet, dass Sie für einfache Bilder, die Alpha-Transparenz benötigen (Schatten, Logos usw.), IE6 nicht hacken müssen, wenn Sie PNG8 und Alpha-Transparenz verwenden!

Beispiel für eine PNG8-Alpha-Transparenz

Leider können Sie in Photoshop kein Bild als PNG8 mit Alpha-Transparenz speichern. Dazu müssen Sie in Fireworks springen.

Wählen Sie in der Palette "Optimieren" das PNG8-Format mit ausgewählter Alpha-Transparenz aus und klicken Sie dann in der unteren rechten Ecke auf "Neu erstellen".

Sie müssen keine matte Farbe auswählen und 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, damit ich nicht jedes Mal jede Option neu auswählen muss, wenn ich ein PNG8-Bild mit Alpha-Transparenz speichern möchte.

Das ist ungefähr alles!

Verwendung von PNG24

Die Verwendung von PNG24 ist im Grunde die gleiche Idee wie die Verwendung von GIF oder PNG8, außer dass das zu einer größeren Dateigröße führt, da es einen viel breiteren Bereich von Farbvariationen unterstützt. Wenn Sie Bilder mit komplexeren Verläufen haben, die Transparenz oder größere Farbtiefe benötigen, ist PNG24 die beste Wahl. Leider unterstützt IE6 PNG24 nicht nativ. Sie müssen es also „hacken“, um richtig zu funktionieren.

PNG24 sind in den meisten Fällen großartig, in denen Sie Transparenz benötigen - sie haben eine viel höhere Dateigröße, funktionieren aber gut in Fällen wie Markenlogos, in denen Qualität wichtig ist und Sie kein verlustbehaftetes Format verwenden möchten.

Andere Formate

WebP (Das Google Web Image Format):

Das ist ein relativ brandneues Format, das erst vor einigen Wochen von Google selbst angekündigt wurde. 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 als Open-Source-Version bereitgestellt hat. Wir haben die Techniken der VP8-Video-Intra-Frame-Codierung angewendet, um die Hüllkurve in die Standbildcodierung zu verschieben. Wir haben auch einen sehr leichten Container basierend auf RIFF angepasst. Während dieses Containerformat einen minimalen Overhead von nur 20 Bytes pro Bild verursacht, ist es erweiterbar, Autoren das Speichern von Metadaten zu ermöglichen, die sie speichern möchten.

Während die Vorteile eines VP8-basierten 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 etwa 1.000.000 Bilder aus dem Web ausgewählt (hauptsächlich JPEGs und einige PNGs und GIFs) und sie in WebP neu codiert, ohne die visuelle Qualität merklich zu beeinträchtigen. Das führte zu einer durchschnittlichen Reduzierung der Dateigröße um 39%. Wir erwarten, dass Entwickler mit WebP in der Praxis eine noch bessere Reduzierung der Dateigröße erzielen, wenn sie von einem unkomprimierten Image ausgehen."

Das Ziel hier ist einfach: Bilder im Web mit moderneren Algorithmen zu beschleunigen. Die Frage ist: Wird angenommen? Google ist ein riesiges Unternehmen mit einer echten Macht, dieses Format in die breite Masse zu bringen, aber wie wir bei einigen seiner Produkte gesehen haben (ich sehe Sie Wave!), Können selbst großartige Ideen ins Wanken geraten.

SVG-Format

"Scalable Vector Graphics" ist ein Format, das sich als weit verbreiteter Bildtyp nie ganz durchgesetzt hat. Die Idee hinter diesem Format ist es, "Vektorgrafiken" im Web zu ermöglichen. Das Format verwendet XML als Grundlage für die Beschreibung eines 2D-Bildes im Web. Die Browserunterstützung für SVG ist inkonsistent. Wenn Sie jedoch wirklich skalierbare Grafiken einbinden möchten, sollten Sie sich über dieses Format informieren.

Abschluss

In Ihrer Freizeit ermutige ich Sie, sich etwas eingehender mit diesen Bildformaten und allem, was sie zu bieten haben, zu beschäftigen. Sie werden viel lernen und genau wissen, was Sie mit diesen Bildformaten tun können oder welches Sie für jede Situation verwenden müssen. Der Wert von superkleinen Dateigrößen für Bilder scheint zu vergehen, wenn das Breitband über das Internet erweitert wird. 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 Web.

Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne unten posten!