Meine Meinung zur Auswahl von Bildformaten in HTML-Seiten_Erfahrungsaustausch

Ein Student hat mich heute gefragt: Das GIF-Format wird auf der Seite verwendet und die Verzerrung ist zu groß. Was soll ich tun? Dieses Problem ist relativ einfach, verwenden Sie einfach JPG. Es gibt drei Bildformate, die wir üblicherweise auf Seiten verwenden: GIF, JPG und PNG. Wie entscheiden wir uns also für die Verwendung dieser drei Formate? Lassen Sie uns über einige meiner Meinungen zur Verwendung dieser drei Formate sprechen, die auf meinen Erfahrungen basieren.

Werfen wir zunächst einen Blick auf die formelleren Erklärungen verschiedener Formate (Hinweis: Der folgende Inhalt stammt von Baidu):

GIF bedeutet Graphics Interchange Format, die Erweiterung von GIF-Bildern. Es ist ein GIF. Alle Grafikbrowser unterstützen mittlerweile das GIF-Format und einige Grafikbrowser erkennen nur das GIF-Format. GIF ist ein indiziertes Farbformat. Wenn die Anzahl der Farben gering ist, ist die generierte Datei extrem klein. Die Hauptvorteile sind:

Das GIF-Format unterstützt transparente Hintergründe. Wenn die Hintergrundfarbe eines GIF-Bildes auf transparent eingestellt ist, wird sie mit dem Browserhintergrund kombiniert, um ein nicht rechteckiges Bild zu erzeugen.
Das GIF-Format unterstützt Animationen. Vor dem Aufkommen der Flash-Animation war die GIF-Animation die einzige Form der Animation auf Webseiten. Das GIF-Format kann Einzelbilder kombinieren und dann jedes Bild nacheinander abspielen, um eine Animation zu erstellen. Obwohl nicht alle Grafikbrowser GIF-Animationen unterstützen, unterstützen die neuesten Grafikbrowser bereits GIF-Animationen.
Das GIF-Format unterstützt den Grafikverlauf. Progressiv bedeutet, dass das Bild schrittweise auf dem Bildschirm angezeigt wird. Progressive Bilder werden schneller auf dem Bildschirm angezeigt als nicht-progressive Bilder, sodass Besucher die Umrisse des Bildes schneller erkennen können.
Das GIF-Format unterstützt verlustfreie Komprimierung. Die verlustfreie Komprimierung ist eine effektive Methode zum Komprimieren von Bildern, ohne dass Bilddetails verloren gehen. Da das GIF-Format eine verlustfreie Komprimierung verwendet, eignet es sich besser für Linien, Symbole und Zeichnungen.
Die Mängel des GIF-Formats liegen ebenfalls auf der Hand. Indizierte Farben sind ein Relikt der Geschichte. Alte Spiele unter DOS verwenden fast ausnahmslos indizierte Farben. Dieses Format hätte längst abgeschafft werden sollen. Aufgrund von Bandbreitenbeschränkungen wurde GIF jedoch von der DOS-Ära bis zur Internet-Ära populär. Der größte Nachteil des indizierten Farbformats GIF besteht darin, dass es nur über 256 Farben verfügt, was für Bilder in Fotoqualität offensichtlich nicht ausreicht.

JPEG steht für Joint Photographic Experts Group (Joint Photographic Experts Group). Dieses Format wird oft als JPG geschrieben, und die Erweiterung von JPG-Bildern ist jpg.

Der Hauptvorteil von JPG besteht darin, dass es Millionen von Farben unterstützen kann, sodass es zum Ausdrucken von Fotos verwendet werden kann. Da JPG-Bilder außerdem einen effizienteren verlustbehafteten Komprimierungsalgorithmus verwenden, ist die Dateilänge kleiner und die Downloadzeit kürzer. Bei der verlustbehafteten Komprimierung gehen einige Details in einem Bild verloren, um die Dateilänge zu reduzieren. Das Komprimierungsverhältnis ist recht hoch. Mit einem speziellen JPG-Komprimierungstool kann das Komprimierungsverhältnis 180:1 erreichen, und die Bildqualität wird aus Sicht des Surfens nicht zu stark beeinträchtigt, was die Netzwerkübertragung und den Datenträgeraustausch erheblich erleichtert. JPG eignet sich besser für Fotos als GIF, da der Verlust einiger Details im Foto nicht so offensichtlich ist wie bei Strichzeichnungen. Darüber hinaus weist JPG eine höhere Komprimierungsrate für Fotos auf und die Endqualität ist besser.

Langfristig dürfte aber mit der kontinuierlichen Verbesserung der Bandbreite und der Entwicklung von Speichermedien auch JPG ein Ausscheiden aus dem Bildformat sein, da verlustbehaftete Komprimierung zu unwiederbringlichen Bildverlusten führen wird. Daher sind komprimierte JPG-Bilder im Allgemeinen nicht zum Drucken geeignet und es ist am besten, JPG nicht zum Sichern wichtiger Bilder zu verwenden. Außerdem ist JPG nicht so flexibel wie GIF-Bilder. Es unterstützt weder grafische Verläufe noch Hintergrundtransparenz noch Animationen.

PNG ist ein Bilddateispeicherformat, das Mitte der 1990er Jahre entwickelt wurde. Sein Zweck besteht darin, die GIF- und TIFF-Dateiformate zu ersetzen und gleichzeitig einige Funktionen hinzuzufügen, die das GIF-Dateiformat nicht bietet. Der Name Portable Network Graphic Format (PNG) kommt vom inoffiziellen „PNG's Not GIF“. Es handelt sich um ein Bitmap-Dateispeicherformat, ausgesprochen „ping“. Wenn PNG zum Speichern von Graustufenbildern verwendet wird, kann die Tiefe des Graustufenbilds bis zu 16 Bit betragen. Beim Speichern von Farbbildern kann die Tiefe des Farbbilds bis zu 48 Bit betragen und es können auch bis zu 16 Bit gespeichert werden Alphakanaldaten. PNG verwendet einen von LZ77 abgeleiteten verlustfreien Datenkomprimierungsalgorithmus.

Das PNG-Dateiformat behält die folgenden Funktionen des GIF-Dateiformats bei:

Kann Farbbilder mit 256 Farben mithilfe einer Farbnachschlagetabelle oder -palette unterstützen.
Streaming-Lese-/Schreibleistung (Streambarkeit): Das Bilddateiformat ermöglicht das kontinuierliche Lesen und Schreiben von Bilddaten.
Diese Funktion eignet sich sehr gut zum Generieren und Anzeigen von Bildern während der Kommunikation.
Progressive Anzeige: Diese Funktion ermöglicht die Anzeige der Bilddatei auf dem Terminal, während die Bilddatei über die Kommunikationsverbindung übertragen wird. Der gesamte Umriss wird angezeigt und dann werden die Details des Bildes nach und nach angezeigt Auflösung zeigt das Bild an und erhöht dann schrittweise seine Auflösung.
Transparenz: Diese Funktion ermöglicht, dass bestimmte Teile des Bildes nicht angezeigt werden und wird verwendet, um einige markante Bilder zu erstellen.
Hilfsinformationen (Zusatzinformationen): Mit dieser Funktion können einige Textanmerkungsinformationen in der Bilddatei gespeichert werden.
Unabhängig von der Computersoftware- und Hardwareumgebung.
Verwenden Sie verlustfreie Komprimierung.
Die folgenden Funktionen, die im GIF-Dateiformat nicht verfügbar sind, werden zum PNG-Dateiformat hinzugefügt:

Ein Echtfarbenbild, bei dem jedes Pixel 48 Bit groß ist.
Jedes Pixel ist ein 16-Bit-Graustufenbild.
Alpha-Kanal kann zu Graustufenbildern und Echtfarbenbildern hinzugefügt werden.
Fügen Sie Gammainformationen des Bildes hinzu.
Verwenden Sie zyklischen Redundanzcode (CRC), um beschädigte Dateien zu erkennen.
Anzeigemethode mit sukzessiver Annäherung zur Beschleunigung der Bildanzeige.
Standard-Lese-/Schreib-Toolkit.
Kann mehrere Bilder in einer Datei speichern.
Dateistruktur

Diese drei Formate haben ihre eigenen Vor- und Nachteile, darunter PNG viele Vorteile. Obwohl seine Beliebtheit immer noch sehr allgemein ist, haben seine besonderen Vorteile unser großes Interesse daran geweckt. Zumindest gefällt mir dieses Format jetzt. Für diejenigen, die die Seite erstellen, ist natürlich die Gesamtgröße der Seite wettbewerbsfähig. Wir müssen also weiterhin auf die gemischte Nutzung dieser drei Formate achten. Wann also GIF, wann PNG und wann JPG? Lassen Sie uns sie unten einzeln analysieren.

Bei der tatsächlichen Arbeit habe ich festgestellt, dass allgemeine Volltongrafiken, wie z. B. einige kleine Symbole und gekachelte Hintergründe, relativ wenige Farben haben. Obwohl das GIF-Format nur 256 Farben hat, ist es für diese Art von Farben nicht geeignet Grafiken. Das Bild muss sehr passend sein. Natürlich schließen wir den Farbreichtum einiger spezieller kleiner Symbole nicht aus, aber ich glaube, dass bei kleinen Symbolen ein geringfügiger Farbverlust den gesamten visuellen Effekt nicht beeinträchtigt. Daher ist der anwendbare Anwendungsbereich von GIF: klein Symbole, gekachelte Hintergründe und andere Farben Relativ wenige kleine Bilder.

Wie wählt man ein so großes Bild aus? Lassen Sie uns zunächst etwas über JPG lernen. Unsere Freunde, die Photoshop verwenden, wissen alle, dass es beim Exportieren des Bildes einen Ort gibt, an dem wir die Bildqualität auswählen können Dieses JPG-Bild, 100 % Das bedeutet keine Komprimierung. Als wir dasselbe Bild exportierten und es mit Bildern unterschiedlicher Qualität verglichen, stellten wir fest, dass das Bild mit der geringeren Qualität offensichtlich viel schmutziger war als das mit der hohen Qualität, sodass das Foto sehr schlecht aussah . Natürlich haben wir diese Situation auch bei Bildern mit größeren Farbblöcken festgestellt. So wie der Himmel, das Porträt. Vor allem im Gesicht von Porträts treten unschöne dunkle Flecken auf. Wenn Sie keine strengen Anforderungen an die Fotoqualität stellen, können Sie natürlich auch JPG verwenden und die Qualität verringern. Dies gilt jedoch nicht für Hintergründe und kleine Symbole.

Ich persönlich denke, dass PNG irgendwo zwischen GIF und hochwertigem JPG liegt. Wählen Sie, wenn ja ist ein einfaches kleines Symbol. PNG ist etwas größer als GIF, aber die Qualität ist ähnlich. Wenn es sich um ein gewöhnliches Bild handelt, ist PNG immer noch etwas kleiner als hochwertiges JPG, aber PNG weist immer noch einen gewissen Farbverlust auf. Allerdings ist es grundsätzlich nicht sichtbar, wenn das Bild nicht vergrößert wird. Im Grunde erstellen wir keine Seiten, nur um sie zu verherrlichen und zu kritisieren. PNG ist also eine Option in der Mitte. Natürlich hat PNG auch einen großen Vorteil, nämlich die Transparenz, obwohl IE6 diese Funktion zuvor nicht unterstützte. GIF verfügt auch über Transparenz, GIF unterstützt jedoch nur absolute Transparenz und keine Transluzenz, sodass sich am Rand des GIF-Bildes häufig ein Kreis aus weißen Punkten befindet. PNG hat diese Probleme nicht mehr. Mit der Entwicklung der Zeit, wenn IE6 Geschichte wird, werden wir meiner Meinung nach die wahre Leistungsfähigkeit von PNG erkennen können.

Natürlich gibt es eine besondere Situation, die sehr speziell sein kann, und zwar dort, wo das Hintergrundbild und das Vordergrundbild aufeinandertreffen. Diese Art von Ort erfordert eine konsistente Farbstruktur, um gute visuelle Effekte zu erzielen. Achten Sie daher zu diesem Zeitpunkt darauf, verschiedene Formate möglichst nicht zu vermischen.