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
Lösen Sie das Spleißproblem beim Löschen von Bedingungen in myBatis
Ich habe heute gerade Mybatis gelernt und einige ...
Programme zum Abfragen und Löschen der Portnutzung im Windows-Betriebssystem
Im Windows-Betriebssystem das Programm zum Abfrag...
Detailliertes Tutorial zum Herstellen einer Verbindung zu einem Remote-Server-Docker zum Bereitstellen eines Spring Boot-Projekts in IDEA
Vorbereitende Schritte Habe einen Cloud-Server, m...
Über Vue, um wiederholte Eingabeaufforderungen beim Aktualisieren der Seite nach Ablauf des Tokens zu vermeiden
Wenn das Token abläuft, aktualisieren Sie die Sei...
Beispielcode zur Implementierung von Follow Ads mit JavaScript
Floating Ads sind eine sehr verbreitete Form der ...
CSS- und HTML- und Front-End-Technologie-Schichtendiagramm
Front-End-Technologieschicht (Das Bild ist etwas e...
vite2.x implementiert das On-Demand-Laden von Ant-Design-Vue@next-Komponenten
1. Version verwenden vite:2.0 Ant-Design-Vue: 2.0...
Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“
Erkennen Sie die Unterschiede zwischen den Method...
Ein genauerer Blick auf SQL-Injection
1. Was ist SQL-Injection? SQL-Injection ist eine ...
Detaillierte Erläuterung der Platzhalter für die Webentwicklung in JS-Zeichenfolgenverkettung und der Conlose-Objekt-API
Inhaltsverzeichnis Platzhalter-Ersetzung Konsolen...
Beispiele für die Erstellung und Verwendung von MySQL-Triggern
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Bevor wir eine Webseite erstellen, werfen wir einen Blick auf diese sogenannten Spezifikationen
In diesem Artikel sind einige sogenannte Spezifik...
Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL
1 Ursache Nachdem das Projekt die Datenbank migri...
Codebeispiele für MySQL-Batchoperationsanweisungen „Select“, „Insert“ und „Update“
In Projekten werden häufig Batch-Operationsanweis...
HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute
Bild-Tag : <img> Um ein Bild in eine Seite e...