Detaillierte Erklärung verschiedener Bildformate wie JPG, GIF und PNG
|
Jeder weiß, dass Bilder auf Webseiten im Allgemeinen in den Formaten JPG, GIF und PNG vorliegen. Was sind die Unterschiede zwischen ihnen? Nach dem Lesen des folgenden Inhalts haben Sie möglicherweise Ihre eigene Schlussfolgerung gezogen. -------------------------------------------------------------------------------- Funktionen des GIF-Formats : Transparenz Gif ist ein Boolescher Transparenztyp, was bedeutet, dass es vollständig transparent oder vollständig undurchsichtig sein kann, aber nicht durchscheinend ist (Alpha-Transparenz). Animation Das GIF-Format unterstützt Animationen. Verlustfrei GIF ist ein verlustfreies Bildformat, was bedeutet, dass Sie mit dem GIF-Bild alles machen können, ohne dass die Bildqualität darunter leidet. Horizontaler Scan Gif wird mit einem Algorithmus namens LZW komprimiert. Beim Komprimieren von Gif werden Pixel horizontal von oben nach unten komprimiert. Dies bedeutet, dass horizontale Gif-Bilder unter denselben Bedingungen kleiner sind als vertikale Gif-Bilder. Beispielsweise wird ein 500*10-Bild progressiv mit kleineren Intervallen angezeigt als ein 10*500-Bild. Gif unterstützt die selektive Intervall-Progressivanzeige. Aus den obigen Eigenschaften ist ersichtlich, dass Gif-Bilder mit nur 256 Farben nicht als Fotos geeignet sind. Sie eignen sich für Grafiken, die keine hohen Farben erfordern. -------------------------------------------------------------------------------- Funktionen des JPEG-Formats : Transparenz: Transparenz wird nicht unterstützt. Animation Es unterstützt auch keine Animation. Verlustfrei Mit Ausnahme einiger Vorgänge wie Drehen (nur 90, 180, 270 Grad), Zuschneiden, Ändern vom Standardtyp zum erweiterten Typ und Bearbeiten der Originaldaten des Bildes führen alle anderen Vorgänge am JPEG-Bild zu einem Qualitätsverlust. Daher verwenden wir im Bearbeitungsprozess grundsätzlich PNG als Übergangsformat. Interlaced Progressive Display: Es unterstützt die Interlaced Progressive Display (der IE-Browser unterstützt dieses Attribut jedoch nicht, der IE zeigt es jedoch erst an, wenn alle Bildinformationen vorliegen). Aus dem Obigen ist ersichtlich, dass sich JPEG am besten für fotografische Bilder im Internet und in Digitalkameras eignet. -------------------------------------------------------------------------------- Funktionen des PNG-Formats : Transparenz Png bietet vollständige Unterstützung für Alpha-Transparenz (transparent, halbtransparent, undurchsichtig), allerdings gibt es in IE6 zwei Eigenheiten (die weiter unten ausführlich erläutert werden): Animation Es unterstützt keine verlustfreie Animation PNG ist ein verlustfreies Bildformat, was bedeutet, dass Sie mit dem PNG-Bild alles machen können, ohne dass die Bildqualität darunter leidet. Dies macht PNG auch zu einem Übergangsformat für die JPEG-Bearbeitung. Horizontale Abtastung. Wie GIF wird auch PNG horizontal abgetastet, was bedeutet, dass horizontal wiederholte Farben kleiner sind als vertikal wiederholte Farben. Intervallprogressive Anzeige. Es unterstützt die intervallprogressive Anzeige, führt jedoch dazu, dass die Bildgröße größer wird. Der erste PNG-Typ wird PNG8 (Boolesche Transparenz) genannt und kann einfach als statisches GIF verstanden werden. Beide haben nur 256 Farben und unterstützen indizierte Transparenz, d. h., sie geben an, ob ein Pixel transparent ist oder nicht. Der zweite PNG-Typ wird auch PNG8 (Alpha-Transparenz) genannt. Sie können die Transparenz eines Pixels angeben, z. B. 50 % Transparenz. Der Vorteil ist, dass es kleiner als PNG24/32 ist, aber der Effekt ist der gleiche. Der Nachteil ist, dass IE6 es nicht gut unterstützt und halbtransparente Pixel als vollständig transparent anzeigt. Der dritte PNG-Typ wird PNG24 genannt. PNG24 ist nicht transparent, hat aber viele Farben, mehr als 256 Farben. Das in Photoshop exportierte PNG24 ist eigentlich PNG32. Der vierte PNG-Typ heißt PNG32 Wie Photoshops PSD ist es das Standardquelldateiformat für Fireworks und enthält Ebenen- und Kanalinformationen. Der Unterschied zu PNG24 besteht darin, dass es mehr Transparenzinformationen enthält. Der Nachteil besteht darin, dass IE6 es nicht gut unterstützt und transparente Bereiche als blaugrauen Hintergrund anzeigt: Dies kann nur über die AlphaImageLoader-Methode erfolgen, die die Leistung beeinträchtigt und spezielle Tags (VML) erfordert. Notiz : Boolean transparentes PNG8 kann in jedem Browser normal angezeigt werden (genau wie GIF). Alphatransparentes PNG8 wird in anderen Browsern als IE6 und darunter fälschlicherweise als vollständig transparent angezeigt, aber alle anderen Browser können es normal anzeigen. Photoshop kann PNG8 nur mit Boolescher Transparenz exportieren. (Einige PNG8-Dateien können unter IE6 raue Kanten aufweisen, da Text, abgerundete Ecken usw. normalerweise dazu führen, dass die Kanten geschwächt werden. Sie können sie vor dem Exportieren zuschneiden.) Fireworks kann sowohl boolean-transparentes PNG8 als auch alpha-transparentes PNG8 exportieren. -------------------------------------------------------------------------------- Vergleich anderer Bildformate mit PNG : Es ist bekannt, dass GIF für Grafiken, JPEG für Fotos und die PNG-Reihe für beides geeignet ist. Im Vergleich zu GIF Bei gleichem Farbwert sind Bilder im GIF-Format kleiner als Bilder im PNG32-Format. Aber png8 ist die beste Wahl. PNG8 hat alle Funktionen von GIF, unterstützt jedoch keine Animation. Der Vorteil gegenüber GIF besteht jedoch darin, dass es Alphatransparenz und eine bessere Komprimierung unterstützt. Daher sollten Sie in den meisten Fällen PNG8 statt GIF verwenden (außer bei sehr kleinen Bildern, bei denen sich GIF besser komprimieren lässt). Im Vergleich zu JPEG JPEG verfügt über eine bessere Komprimierung als Vollfarb-PNG, wodurch JPEG für Fotos geeignet ist. Beim Bearbeiten von JPEG kann es jedoch leicht zu Qualitätsverlusten kommen. Vollfarb-PNG eignet sich daher als Übergangsformat für die Bearbeitung von JPEG. |
<<: Implementierung von Diensten im Docker für den Zugriff auf Hostdienste
>>: Detaillierte Erläuterung der Persistenz des Vue-Seitenstatus
Artikel empfehlen
So vermeiden Sie die URL-Zeitzonenfalle in MySQL
Vorwort Wenn Sie MySQL 6.0.x oder höher (JAR) ver...
Tic-Tac-Toe-Spiel in reinem CSS3 implementiert
Wirkung der Operation: html <div Klasse="...
Warum wird in React nicht empfohlen, einen Index als Schlüssel zu verwenden?
1. Vergleichen Sie den alten virtuellen DOM mit d...
Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository
Bisher wurden die von uns verwendeten Images alle...
5 grundlegende Fähigkeiten zum Design von Themenseiten (Alibaba UED Shanmu)
Bei diesem Thema handelt es sich um einen interne...
Detaillierte Erklärung der MySQL-Injektion ohne Kenntnis des Spaltennamens
Vorwort Ich habe in letzter Zeit das Gefühl, dass...
4 praktische Tipps für die Webseitengestaltung
Verwandte Artikel: 9 praktische Tipps zum Erstelle...
Detaillierte Erläuterung der gespeicherten Prozeduren, Cursor und Transaktionsbeispiele von MySQL
Detaillierte Erläuterung der gespeicherten Prozed...
Beispiel-Tutorial zur JavaScript-Typerkennungsmethode
Vorwort JavaScript ist eine der am häufigsten ver...
So kapseln Sie Axios in ein Vue-Projekt (einheitliche Verwaltung von HTTP-Anfragen)
1. Voraussetzungen Bei der Entwicklung von Front-...
Führen Sie die Schritte zum Konfigurieren der IP-Adresse in Ubuntu 18.04 LTS aus
Vorwort Die Methode zum Konfigurieren von IP-Adre...
Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage ang...
Zur grundlegenden Verwendung von HTML gehören Links, Stylesheets, Span und Div usw.
1. Links Hypertext-Links sind in HTML sehr wichtig...
Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems
Unabhängig davon, ob Sie ein Windows- oder Linux-...
Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder
Problem 1: Baidu Map verwendet gekachelte Bilder ...