Detaillierte Erklärung der Zusammenhänge zwischen Bildformat und Design im Webdesign
|
Warum möchte ich den Inhalt in diesem Bereich organisieren? Ich denke, genau wie ein Ölmaler seine Farbe und Leinwand verstehen muss und ein Bildhauer seinen Stein verstehen muss, sollten Sie als Webdesigner auch ein gewisses Verständnis für die Eigenschaften von Bildformaten haben, damit Sie Ihre Kreativität und Ideen besser zum Ausdruck bringen können. Darüber hinaus stoßen wir in unserer täglichen Arbeit auch auf viele Probleme im Zusammenhang mit Bildformaten. Beispielsweise fragen sich Designer vielleicht, warum die Ausgabe mancher Seiten nie die Qualität und Wirkung des Design-Entwurfs erreichen kann und welche Art von Design besser für Webseiten geeignet ist; Seitenrekonstrukteure und Front-End-Ingenieure möchten wissen, welches Bildformat beim Zuschneiden von Bildern verwendet werden sollte und wie Parameter eingestellt werden müssen, um optimale Qualität und Leistung zu erzielen. Manchmal kann es aufgrund eines falsch formatierten Bildes zu einer Verschlechterung der Designqualität und einer verringerten Seitenleistung kommen. Um diese Fragen zu beantworten, müssen wir die Eigenschaften der Bildformate verstehen, damit wir bessere und schnellere Produkte entwickeln können. Dieser Artikel behandelt im Wesentlichen folgende Aspekte: 1. Grundlegende Konzepte Vektorkarte und Bitmap verlustbehaftete Komprimierung und verlustfreie Komprimierung 2. Praktische Anwendung <br />Wann sollte PNG verwendet werden Wann sollten Sie JPG verwenden? Zusammenfassung 3. Denken und Praxis Welches Design eignet sich besser für Webseiten? Was können wir sonst noch tun? 4. Anhang - Bedeutung und Einstelltechniken verschiedener Parameter in Photoshop 1. Grundlegende Konzepte Um die Eigenschaften von Bildformaten zu verstehen, müssen wir zunächst mit einigen grundlegenden Konzepten beginnen. Die Lektüre dieses Teils ist möglicherweise langweilig, aber wenn Sie ihn geduldig lesen, werden Sie viel davon haben. Vektorgrafiken und Bitmap-Vektorgrafiken – perfekte geometrische Grafiken Vektorgrafiken werden durch die Berechnung einiger Grundelemente dargestellt, aus denen sich die Grafik zusammensetzt, wie etwa Punkte, Linien, Flächen, Ränder, Füllfarben und weitere Informationen. Genau wie in der Geometrie können wir einen Kreis durch seinen Mittelpunkt und seinen Radius beschreiben, und natürlich können wir auch seinen Stil durch Daten wie die Dicke des Rahmens, die Farbe und die Füllfarbe beschreiben. Wenn der Computer das Bild anzeigt, verwendet er diese Daten, um das von uns definierte Bild zu zeichnen. Der Vorteil von Vektorgrafiken liegt darin, dass die Dateigröße relativ gering ist und beim Vergrößern oder Verkleinern keine Verzerrungen auftreten. Der Nachteil besteht darin, dass diese perfekten geometrischen Formen es schwierig machen, realistische Bilder mit hoher Natürlichkeit auszudrücken. Es sollte betont werden, dass die Bilder, die wir auf Webseiten verwenden, alle Bitmaps sind. Sogar einige sogenannte Vektorgrafiken (wie Vektorsymbole usw.) beziehen sich auf solche, die mit Vektorwerkzeugen gezeichnet und dann für die Verwendung im Web in das Bitmap-Format konvertiert wurden (im Gegensatz zu mit Pixeln gezeichneten Grafiken). Bitmap – Magisches Puzzle Bitmap, auch bekannt als Pixelmap oder Rastermap, speichert und zeigt Bilder an, indem es die Farbe, Tiefe, Transparenz und andere Informationen jedes Punkts im Bild aufzeichnet. Eine Bitmap ist wie ein großes Puzzle, nur dass jedes Puzzleteil ein Pixel einer reinen Farbe ist. Wenn wir diese Pixel unterschiedlicher Farben nach einem bestimmten Muster anordnen, entsteht das Bild, das wir sehen. Wenn wir also in ein Pixelbild hineinzoomen, können wir diese mosaikartigen Pixel sehen (wie unten gezeigt). Der Vorteil von Bitmaps besteht darin, dass sie sich für die Anzeige realistischer Bilder mit satten Farbstufen eignen. Der Nachteil besteht darin, dass die Dateigröße größer ist und das Bild beim Vergrößern oder Verkleinern verzerrt wird.  Verlustbehaftete und verlustfreie Komprimierung <br />Verlustbehaftete Komprimierung – was Sie sehen, entspricht nicht unbedingt der Realität. So wie ich es verstehe, bedeutet verlustbehaftete Komprimierung, dass beim Speichern von Bildern die Dateninformationen jedes Pixels im Bild nicht vollständig und wahrheitsgetreu aufgezeichnet werden. Die Bilddaten werden entsprechend den Eigenschaften des menschlichen Auges verarbeitet, das die reale Welt beobachtet (das menschliche Auge reagiert empfindlicher auf Licht als auf Farbe und biologische Experimente haben gezeigt, dass das menschliche Gehirn bei einer fehlenden Farbe die fehlende Farbe automatisch durch die nächstgelegene Farbe ersetzt), um Details im Bild zu entfernen, die vom menschlichen Auge ignoriert werden, und dann werden benachbarte Farben zum Auffüllen durch Farbverläufe oder andere Formen verwendet. Dadurch kann die Menge der Bildinformationsdaten erheblich reduziert werden, ohne den Bildwiederherstellungseffekt zu beeinträchtigen.  Verlustfreie Komprimierung – das genaueste Puzzle <br />Im Vergleich zur verlustbehafteten Komprimierung werden bei der verlustfreien Komprimierung die Dateninformationen jedes Pixels im Bild tatsächlich aufgezeichnet, es werden jedoch einige spezielle Algorithmen verwendet, um die Größe der Bilddatei zu komprimieren. Das Komprimierungsprinzip der verlustfreien Komprimierung besteht darin, zunächst zu bestimmen, welche Bereiche des Bildes die gleiche Farbe haben und welche sich unterscheiden, und dann dieselben Dateninformationen zu komprimieren und aufzuzeichnen (beispielsweise müssen für einen blauen Himmel nur die Positionen des Start- und des Endpunkts aufgezeichnet werden) und die unterschiedlichen Daten separat zu speichern (wie etwa die weißen Wolken und die Farbverlaufsdaten am Himmel).  Hier fragen Sie sich vielleicht, warum die von uns gespeicherten Bilder im PNG-Format verzerrt sind, wenn PNG doch verlustfreie Komprimierung verwendet? Dies liegt daran, dass verlustfreie Komprimierung nur bedeutet, dass die Komprimierungsmethode das Bild so realistisch wie möglich wiederherstellt. Aus dem Komprimierungsprinzip können wir jedoch erkennen, dass die Komprimierung und Wiederherstellung durch Indizierung der Farben desselben Bereichs im Bild erfolgt. Dies bedeutet, dass wir das Bild nur dann wirklich aufzeichnen und wiederherstellen können, wenn die Anzahl der im Bild erscheinenden Farben geringer ist als die Anzahl der Farben, die wir speichern können. Andernfalls gehen einige Bildinformationen verloren (PNG8 kann nur bis zu 256 Farben indizieren und kann daher Bilder mit mehr Farben nicht wirklich wiederherstellen. PNG24 kann mehr als 16 Millionen Farben speichern und damit im Grunde alle Farben wiederherstellen, die unser menschliches Auge unterscheiden kann. Das PNG-Format kann bis zu 48-Bit-Farbkanäle speichern). Bei der verlustbehafteten Komprimierung gehen Bildinformationen verloren, unabhängig davon, wie viele Farben im Bild vorhanden sind. JPG und PNG Ich werde hier nicht auf die grundlegenden Informationen zu JPG und PNG eingehen. Studenten, die mehr darüber erfahren möchten, können hier nachlesen: Was ist JPG und was ist PNG. Darüber hinaus werden wir GIF hier nicht diskutieren, da PNG als Ersatz für GIF entwickelt wurde und der Komprimierungsalgorithmus von PNG besser ist als der von GIF. Daher wird dringend empfohlen, Bilder im PNG-Format zu verwenden, sofern keine Animationseffekte erforderlich sind. Hier können wir auch einen einfachen Vergleich einiger Eigenschaften von JPG und PNG anstellen: Format Komprimierungsmodus Interlaced-Unterstützung Transparenz-Unterstützung Animation-Unterstützung Verlustbehaftete JPG-Komprimierung Unterstützung Nicht unterstützt Nicht unterstützt Verlustfreie PNG-Komprimierung Unterstützung Unterstützung Nicht unterstützt Funktionen von JPG 1. Unterstützt erweiterte Komprimierung von fotografischen Bildern oder realistischen Bildern und die Bilddateigröße kann über die Komprimierungsrate gesteuert werden. 2. Verlustbehaftete Komprimierung verschlechtert die Qualität der Bilddaten und diese Verschlechterung kumuliert sich beim Bearbeiten und erneuten Speichern von Bildern im JPG-Format. 3. JPG eignet sich nicht für einfachere Bilder, die wenige Farben enthalten, große Bereiche mit ähnlichen Farben aufweisen oder deutliche Helligkeitsunterschiede aufweisen. Eigenschaften von PNG: 1. Es kann die Größe von Bilddateien maximal komprimieren und gleichzeitig für möglichst geringe Verzerrungen sorgen. 2. Wenn PNG zum Speichern von Graustufenbildern verwendet wird, kann die Tiefe der Graustufenbilder bis zu 16 Bit betragen. Beim Speichern von Farbbildern kann die Tiefe der Farbbilder bis zu 48 Bit betragen und es können auch bis zu 16 Bit Alphakanaldaten gespeichert werden. 3. Bei komplexeren Bildern, die eine hohe Wiedergabetreue erfordern, ist PNG zwar verlustfrei komprimierbar, die Bilddateien sind jedoch groß und nicht für die Verwendung auf Webseiten geeignet. PNG8 vs. PNG24 Wenn wir über das PNG-Format sprechen, müssen wir PNG8 und PNG24 erwähnen. Dieser Name ist keine offizielle Definition, wurde jedoch aufgrund seiner weit verbreiteten Verwendung allgemein akzeptiert. Aus der vorherigen Einführung wissen wir, dass PNG verlustfreie Komprimierung verwendet, um Bilder durch indizierte Farben zu speichern und wiederherzustellen. Die Zahlen nach PNG8 und PNG24 stellen die maximalen Farbwerte dar, die in diesem PNG-Format indiziert und gespeichert werden können. „8“ steht für 2 hoch 8, also 256 Farben, und 24 steht für 2 hoch 24, also etwa 16 Millionen Farben. Darüber hinaus unterstützt PNG8 auch einen 1-Bit-Booleschen Transparenzkanal. Die sogenannte Boolesche Transparenz bedeutet entweder vollständig transparent oder vollständig undurchsichtig. PNG24 unterstützt 8-Bit (256 Stufen) Alphakanal-Transparenz, was bedeutet, dass es 256 Transparenzstufen (sogenannte Transluzenz) von vollständig transparent bis vollständig undurchsichtig speichern kann. Das Format unterstützt die Farbbearbeitung mit dem höchsten Farbkanalindex, unterstützt Transparenz, unterstützt PNG8256-Farben, unterstützt boolesche Transparenz, PNG24 etwa 16 Millionen Farben, unterstützt keine 8-Bit-Alphatransparenz (256 Stufen). Durch den Vergleich der oben genannten Funktionen können Sie möglicherweise nicht intuitiv verstehen, welches Bilddateiformat in tatsächlichen Anwendungen ausgewählt werden sollte. Wir können die oben genannten Grundkonzepte auch kombinieren, um sie Ihnen anhand mehrerer Beispiele zu erklären. 2. Praktische Anwendung<br /> Wann sollte PNG verwendet werden? Beispiel 1 Das folgende Bild ist das am häufigsten auf Taobao angezeigte Bild, nämlich die Schaltfläche „Jetzt kaufen“. Hier versuche ich, es im JPG- bzw. PNG8-Format zu speichern. Sie können sehen, dass es in den gespeicherten Ergebnissen zwei bemerkenswerte Punkte gibt: 1. Die von JPG gespeicherte Dateigröße ist doppelt so groß wie die von PNG. 2. JPG ist nicht nur größer, sondern weist auch Rauschen auf (wie in der Abbildung durch das rote Kästchen markiert).  Zunächst einmal können wir sehen, dass die Schaltfläche „Jetzt kaufen“ in Photoshop mit Vektorwerkzeugen gezeichnet wurde. Die Verlaufsfüllung ist ein sehr regelmäßiger linearer Verlauf, und die Textfarbe und der Strich sind alle Volltonfarben, sodass die in diesem Bild enthaltenen Farbinformationen sehr begrenzt sind. Gemäß den zuvor eingeführten verlustfreien Komprimierungseigenschaften muss beim Speichern dieses Bildes im PNG-Format nur eine kleine Menge an Farbinformationen gespeichert werden, um das Bild wirklich wiederherzustellen. Beim JPG-Format wird die Größe hauptsächlich durch die Farbstufen des Bildes bestimmt, sodass bei weniger Farben, aber starkem Kontrast die Dateigröße nicht gut komprimiert werden kann. Darüber hinaus komprimiert JPG das Bild gemäß dem verlustbehafteten Komprimierungsalgorithmus, indem einige gelöschte Dateninformationen mithilfe von Farbverläufen oder anderen Methoden im Bild ergänzt werden. Da die roten und weißen Bereiche im Bild große Farbunterschiede aufweisen, fügt JPG während des Komprimierungsprozesses zusätzliches Rauschen hinzu, was sich auf die Bildqualität auswirkt. Aus diesem Grund ist JPG nicht zum Speichern großer Bereiche ähnlicher Farben oder von Bildern mit deutlichen Helligkeitsunterschieden geeignet. Beispiel 2 Schauen wir uns ein anderes Anwendungsszenario an. Die folgende Abbildung zeigt ein Bannerbild, das auf der Taobao-Lotterieseite verwendet wird. Das Bild wurde auf die gleiche Weise in PNG8 und JPG gespeichert. Es zeigt sich, dass beim Speichern in PNG8 nicht nur die Bildqualität gewährleistet ist, sondern dass die Bilddateigröße nur 8,3 KB beträgt. Beim Speichern in 100 % JPG erhöht sich die Dateigröße auf 44,2 KB. Wenn Sie nicht hineinzoomen, können Sie den spezifischen Unterschied möglicherweise nicht erkennen, aber tatsächlich wird wie zuvor unnötiges Rauschen auftreten. Wenn wir die Komprimierungsrate von PNG8 erreichen und es mit 45 % JPG speichern möchten, wird das Bild stark verzerrt.  1. Das Bild enthält weniger Farben und besteht hauptsächlich aus Vollfarben oder sanften Farbverläufen. 2. Einfache Bilder mit großen Helligkeitsunterschieden und starkem Kontrast (wie etwa der Hintergrund und der Text im „Jetzt kaufen“-Button). Erfahrungsgemäß werden Bilder, die die oben genannten Bedingungen erfüllen, normalerweise mit Vektorwerkzeugen in Photoshop oder einer anderen Software gezeichnet und dann als Bitmap-Bilder gespeichert. Wann sollten Sie JPG verwenden? Beispiel 1 Aus der Einführung der JPG-Funktionen wissen wir, dass JPG besser zum Speichern von fotografischen oder realistischen Bildern geeignet ist. Deshalb können wir es auch mit einem Foto versuchen. Das Bild unten ist ein Foto eines Busses. Wir haben versucht, es in JPG 60 % (oben links), PNG8 256 Farben ohne Dithering (oben rechts), PNG8 256 Farben mit diffusem Dithering (unten links) und PNG32 (unten rechts) zu speichern. Es ist ersichtlich, dass bei der Verwendung von JPG zum Speichern von Bildern nicht nur die maximale Komprimierungsrate erreicht werden kann, sondern auch der Wiederherstellungseffekt des Originalbildes so weit wie möglich gewährleistet werden kann. Beim Speichern im PNG8-Format ist die Bilddateigröße größer und die Verzerrung stärker. Die Qualität kann nur im PNG24-Format garantiert werden, die Dateigröße ist jedoch wesentlich größer als bei JPG. Der Grund für dieses Ergebnis hängt auch mit den Komprimierungsalgorithmen von JPG bzw. PNG zusammen. Bei der Fotografie oder realistischen Arbeiten sind die Farbstufen im Bild aufgrund des Einflusses des Umgebungslichts sehr kräftig. Beispielsweise bildet der rote Bereich eines Busses Bereiche mit unterschiedlicher Helligkeit und Dunkelheit sowie Tiefe aufgrund von Reflexion, Schatten und perspektivischen Effekten. Beim Speichern im PNG-Format sind verschiedene Rottöne erforderlich, um diesen Bereich zu speichern. Für das gesamte Bild können die 256 Farben von PNG8 nicht alle im Bild vorkommenden Farben vollständig indizieren, sodass während der Speicherung viele Farben verloren gehen und es zu Verzerrungen kommt. Wenn Sie den Bildeffekt sicherstellen möchten, müssen Sie ihn in PNG24 mit einem größeren Farbbereich speichern. Dadurch erhöht sich auch die entsprechende Dateigröße. Der JPG-Komprimierungsalgorithmus eignet sich besser zum Komprimieren dieser komplexen Farbänderungen in der realen Welt, wodurch der visuelle Effekt des Bildes besser wiederhergestellt und gleichzeitig die Dateigröße so weit wie möglich komprimiert wird.    Wird JPG also nur zum Speichern von Fotos benötigt? Schauen wir uns ein weiteres Beispiel an. Das Bild unten ist eine Weibo-Seite, die in letzter Zeit sehr beliebt war. Hier können wir verschiedene Stile auswählen und jeder Stil hat ein sehr charakteristisches Hintergrundbild. Beim Versuch, den Hintergrund in verschiedenen Bildformaten zu speichern, stellen wir Folgendes fest: Beim Speichern in JPG (direktes Speichern des Hintergrunds als) beträgt die Dateigröße nur 36,3 KB. Beim Speichern in PNG8 mit 256 Farben ohne Dithering erhöht sich die Größe auf 57,7 KB. Darüber hinaus erscheinen aufgrund des Farbmangels einige gezackte Farbblöcke auf dem Bild. Um die Auswirkungen dieser Farbblöcke auf die Bildqualität zu verringern, fügen wir PNG8 den Effekt des Diffusions-Ditherings hinzu, wodurch die Dateigröße zu diesem Zeitpunkt 156,3 KB erreicht. Beim Speichern in PNG24 ohne Verzerrung beträgt die Dateigröße 231,9 KB. Obwohl dieses Hintergrundbild auch mit Photoshop erstellt wurde, können wir feststellen, dass es sich aufgrund der Verwendung vieler realer Materialien im Bild (z. B. weiße Wolken, Ameisen, grüne Blätter usw.) und dieser realen Materialien, genau wie bei fotografischen Bildern, auch um sehr kräftige Farbstufen handelt, sodass sie sich nicht zum Speichern im PNG-Format eignen. Derzeit sollten wir das JPG-Format verwenden.    Die von uns auf der Seite verwendeten Produktbilder, mit Portraits oder echten Materialien erstellte Werbebanner und sonstige Bilder lassen sich erfahrungsgemäß besser im JPG-Bildformat speichern. Zusammenfassung <br />Es lässt sich erkennen, dass die Entscheidung, ob beim Speichern von Bildern JPG oder PNG verwendet wird, hauptsächlich von den Farbstufen und der Anzahl der Farben im Bild abhängt. Im Allgemeinen werden Bilder mit vielen Ebenen und Farben im JPG-Format gespeichert, während Bilder mit einfachen Farben und starkem Kontrast PNG erfordern. Es gibt jedoch einige Sonderfälle. Beispielsweise haben einige Bilder satte Farbstufen, aber aufgrund der geringen Größe des Bildes ist die Anzahl der darin enthaltenen Farben begrenzt. In diesem Fall können Sie versuchen, sie im PNG-Format zu speichern. Einige mit Vektorwerkzeugen gezeichnete Bilder bilden aufgrund der Verwendung weiterer Filtereffekte auch sattere Farbstufen. Derzeit wird JPG zum Speichern benötigt. Ein weiterer Grundsatz besteht darin, dass grundlegende visuelle Elemente, die für die Seitenstruktur verwendet werden, wie Container-Hintergründe, Schaltflächen, Navigationshintergründe usw., möglichst im PNG-Format gespeichert werden sollten, um die Designqualität besser zu gewährleisten. Andere Inhaltselemente, wie etwa Werbebanner oder Produktbilder, an die keine besonders hohen Anforderungen an die Qualität gestellt werden, können Sie zur Reduzierung der Dateigröße im JPG-Format abspeichern. 3. Denken und Handeln <br /> Welches Design eignet sich besser für Webseiten? Seien Sie vorsichtig, wenn Sie schwerere visuelle Designelemente verwenden. Ein Haupttrend im Webdesign im Zeitalter von Web 2.0 besteht darin, dass es immer leichter wird. Zusätzlich zur ästhetischen Ermüdung durch diese Highlights und abgerundeten Ecken haben Designer auch begonnen zu erkennen, dass gutes Design eine perfekte Kombination aus Inhalt und Form sein sollte und nicht nur eine Ansammlung von Formen. Wenn Designer diese „schwereren“ visuellen Effekte anwenden, müssen sie sich daher genau überlegen, welchen Zweck und welche Bedeutung dies hat und ob dies mit den Eigenschaften des Produkts und der Stimmung des Publikums vereinbar ist. Ein typisches Beispiel für „leichtes“ Design ist eine bekannte inländische Website, die kaum visuelle Elemente verwendet, die Bilder erfordern, sondern diese durch einfache CSS-Stile implementiert. Dies hebt nicht nur den Inhalt hervor, sondern verbessert auch die Zugriffsgeschwindigkeit der Seite. Daher empfehle ich dringend, dass visuelle Designer auch gewisse Kenntnisse in HTML und CSS besitzen (insbesondere in CSS3, das viele Effekte implementiert, für die früher Bilder erforderlich waren, wie z. B. abgerundete Ecken und Farbverläufe), damit sie die Produkteffekte beim Design umfassend berücksichtigen können.   Im folgenden Beispiel verwendet das erste Banner beispielsweise einen Designstil, der besser zum PNG-Format passt (mehr Volltonfarben und einfache Farbverläufe). Dadurch wird nicht nur ein warmer und markanter visueller Effekt erzielt, sondern auch die Dateigröße wird besser komprimiert, während die Bildqualität gewährleistet bleibt. Das zweite Banner verwendet übermäßig komplexe Farbverläufe und starke Kontraste sowie zu viele Glanzlichter und Schatten in lokalen Bereichen, was zu zu vielen Farbstufen im Bild führt. Unabhängig davon, ob es im PNG- oder JPG-Format gespeichert wird, ist es unmöglich, die Bildqualität und die Dateigröße zu optimieren.  Trennung von Inhalt und Form <br />Für einige spezielle Produkte, bei denen visuelle Effekte im Vordergrund stehen, wie z. B. Event-Promotion-Seiten oder Mini-Sites. Wir können auch Bildformate und einige Front-End-Kenntnisse nutzen, um das Design zu optimieren. Eine häufig verwendete Designmethode besteht darin, Inhalt und Form zu trennen. Beispielsweise verwenden einige der im Ausland beliebteren Design-Stile sowie die oben erwähnte Weibo-Website große Hintergrundbilder, um künstlerische Konzepte zu vermitteln und Atmosphäre zu schaffen. Ein Vorteil dieser Vorgehensweise besteht darin, dass die visuellen Elemente, die Bilder verwenden müssen, zentral komprimiert und optimiert werden können, ohne dass die Zugriffsgeschwindigkeit des Benutzers durch langsames Laden beeinträchtigt wird (bei der Implementierung auf der Front-End-Seite wird es im Allgemeinen zuerst mit einer ähnlichen Hintergrundfarbe gefüllt und dann das Hintergrundbild schrittweise angezeigt).    Kleine optische Einbußen für große Leistungssteigerungen Manchmal muss das Design optimiert werden, um die Ladegeschwindigkeit der Seite zu erhöhen und ein besseres Benutzererlebnis zu erreichen. Jetzt können wir unser Wissen über Bildformate nutzen, um gezielter zu optimieren. Das folgende Bild stellt beispielsweise ein Header-Design für die „Double Eleven“-Werbung von Taobao dar. Aufgrund der großen Anzahl von Seitenbesuchen und der Verwendung vieler Produktbilder musste das Header-Design optimiert werden, um die Leistung zu verbessern. Zu diesem Zeitpunkt können wir einige weniger wichtige Glanzlichter, Farbverläufe und Schatteneffekte entfernen und so die Dateigröße erheblich reduzieren.  Sekundäroptimierung von Sprite-Bildern. Da es derzeit in vielen inländischen Internetunternehmen keine Position für Seiten-Refactoring gibt, werden das Zuschneiden von Seiten und die Implementierung des statischen Codes grundsätzlich von Front-End-Ingenieuren durchgeführt. Um die Seitenleistung zu verbessern, besteht die häufig verwendete Implementierungsmethode darin, die visuellen Elemente, die mit der Seitenstruktur zusammenhängen und Bilder verwenden müssen, auf einem PNG-Bild zu konzentrieren und es dann über CSS-Stil auf die Seite anzuwenden. Wir nennen dieses Bild ein Sprite-Bild. Da dieses Bild oft mehrere visuelle Elemente enthält, sind bei der Speicherung im PNG-Format Verzerrungen unvermeidlich, die die Bildqualität beeinträchtigen. Derzeit werden visuelle Designer benötigt, um Front-End-Entwicklungsingenieuren bei der Optimierung von Sprite-Bildern zu helfen. Der Vorteil dabei besteht darin, dass dadurch nicht nur die Bildqualität verbessert, sondern auch die Dateigröße verringert werden kann. So lassen sich zwei Fliegen mit einer Klappe schlagen. Die folgende Abbildung zeigt ein Sprite-Bild vor der Optimierung. Da es zu viele visuelle Elemente gibt, kann PNG8 nicht alle Farbinformationen speichern, was zu Farbverlust und Rauschen führt (siehe die teilweise vergrößerte Abbildung).   Die oben genannten Entwurfs- und Optimierungsmethoden sind lediglich eine Ansammlung und Zusammenfassung einiger meiner Berufserfahrungen. Ich persönlich bin der Meinung, dass es viele Dinge gibt, die es wert sind, untersucht und diskutiert zu werden, wenn jeder Punkt näher erläutert wird, aber aufgrund des begrenzten Platzes kann ich nicht näher darauf eingehen. Zu fortgeschrittenen Techniken zur Bildoptimierung können wir Ihnen zwei klassische Artikel empfehlen: „Clevere PNG-Optimierungstechniken“ und „Clevere JPEG-Optimierungstechniken“. 4. Anhang - Bedeutung und Einstelltechniken verschiedener Parameter in Photoshop PNG8-Parametereinstellungen  Geben Sie die Methode zum Generieren der Farbnachschlagetabelle und die Anzahl der Farben an, die Sie in der Farbnachschlagetabelle verwenden möchten. Sie können einen der folgenden Farbreduzierungsalgorithmen auswählen: 1. Perzeptiv: Erstellen Sie eine benutzerdefinierte Farbtabelle, indem Sie den Farben Priorität einräumen, für die das menschliche Auge empfindlicher ist. 2. Optional: Erstellen Sie eine Farbtabelle, die der Perceptual-Farbtabelle ähnelt, aber große Farbbereiche bevorzugt und Webfarben beibehält. Diese Farbtabelle erzeugt im Allgemeinen Bilder mit der größten Farbintegrität. „Auswählbar“ ist die Standardoption. 3. Adaptiv: Erstellen Sie eine benutzerdefinierte Farbtabelle, indem Sie Farbmuster aus dem primären Farbspektrum des Bildes extrahieren. Beispielsweise ergibt sich aus einem Bild, das nur die Farben Grün und Blau enthält, eine Farbkarte, die hauptsächlich aus Grün und Blau besteht. Die Farben der meisten Bilder konzentrieren sich in einem bestimmten Bereich des Farbspektrums. 4. Begrenzt (Web): Verwendet die Standardfarbtabelle mit 216 Farben, die in den 8-Bit-Paletten (256 Farben) von Windows und Mac OS üblich ist. Diese Option stellt sicher, dass bei der Anzeige des Bildes mit 8-Bit-Farben kein Browser-Dithering auf die Farben angewendet wird. (Diese Palette wird auch als websichere Palette bezeichnet.) Durch die Verwendung der Webpalette können größere Dateien erstellt werden. Sie wird daher nur empfohlen, wenn die Vermeidung von Browser-Dithering Priorität hat. 5. Benutzerdefiniert: Verwenden Sie eine vom Benutzer erstellte oder geänderte Farbpalette. Wenn Sie eine vorhandene GIF- oder PNG-8-Datei öffnen, verfügt diese über eine benutzerdefinierte Palette. Verwenden Sie die Farbtabellenpalette im Dialogfeld „Für Web und Geräte speichern“, um die Farbnachschlagetabelle anzupassen. 6. Schwarzweiß, Graustufen, Mac OS und Windows verwenden eine Reihe von Farbpaletten. Empfehlung: Wählen Sie grundsätzlich die Standardoption „Optional“.  Bestimmt die Methode und den Umfang des Anwendungs-Ditherings. Dithering ist eine Methode zur Simulation von Farben, die im Farbanzeigesystem Ihres Computers nicht verfügbar sind. Höhere Dithering-Prozentsätze führen dazu, dass im Bild mehr Farben und Details erscheinen, erhöhen jedoch auch die Dateigröße. Um das beste Komprimierungsverhältnis zu erzielen, verwenden Sie den niedrigsten Dithering-Prozentsatz, der die erforderlichen Farbdetails liefert. Bilder, die überwiegend reine Farben enthalten, werden normalerweise auch ohne Dithering gut angezeigt. Bei Bildern mit Halbtonbildern, insbesondere Farbverläufen, ist möglicherweise Dithering erforderlich, um Farbstreifenbildung zu verhindern. Sie können eine der folgenden Dithering-Methoden auswählen: 1. Diffusion: Wendet ein zufälliges Muster an, das normalerweise weniger auffällt als Muster-Dithering. Der Dithering-Effekt breitet sich über benachbarte Pixel aus. 2. Muster: Verwenden Sie ein halbtonähnliches quadratisches Muster, um jede Farbe zu simulieren, die nicht in der Farbtabelle enthalten ist. 3. Rauschen: Wendet ein zufälliges Muster ähnlich der Diffusion-Dithering-Methode an, verteilt das Muster jedoch nicht zwischen benachbarten Pixeln. Bei Verwendung der Noise-Dithering-Methode treten keine Nähte auf. Empfehlung: Im Allgemeinen müssen Sie Dithering nur auswählen, wenn das Bild zu viele Farben hat und verzerrt ist. Es wird empfohlen, Diffusions-Dithering auszuwählen. Sie können den Dithering-Prozentsatz entsprechend anpassen, um den besten Effekt zu erzielen. Je höher das Dithering, desto größer die Dateigröße.  Bestimmt, wie transparente Pixel im Bild optimiert werden. 1. Um vollständig transparente Pixel transparent zu machen und teilweise transparente Pixel mit einer Farbe zu mischen, wählen Sie „Transparenz“ und dann eine Mattfarbe. 2. Um vollständig transparente Pixel mit einer Farbe zu füllen und teilweise transparente Pixel mit der gleichen Farbe zu mischen, wählen Sie eine matte Farbe aus und deaktivieren Sie „Transparenz“. 3. Um eine matte Farbe auszuwählen, klicken Sie auf das Matt-Farbfeld und wählen Sie im Farbwähler eine Farbe aus. Alternativ können Sie eine Option aus dem Menü „Matte“ auswählen: „Pipette“ (um die Farbe im Pipetten-Beispielfeld zu verwenden), „Vordergrundfarbe“, „Hintergrundfarbe“, „Weiß“, „Schwarz“ oder „Andere“ (um die Farbauswahl zu verwenden). Empfehlung: Es wird dringend empfohlen, dass visuelle Designer den Hintergrund transparenter Bilder vor dem Speichern entsprechend dem tatsächlichen Anwendungsszenario bearbeiten.  Empfehlung: Es wird empfohlen, diese Option für Bilder mit relativ großen Abmessungen und Dateigrößen zu aktivieren. JPG-Parametereinstellungen  Tipps zum Einstellen der Qualität 1. Speichern Sie Bilder im JPG-Format nicht mit 100 % Qualität. Da 100 % nicht unbedingt die höchste Qualität, sondern ein Grenzwert eines Optimierungsalgorithmus ist, wird die Dateigröße unnötig erhöht. Es wird empfohlen, Bilder mit 95 % Qualität zu speichern, um Verzerrungen zu minimieren. 2. Seien Sie vorsichtig, wenn Sie Komprimierungsraten mit einer Qualität unter 50 % verwenden. Bei einer Speicherung mit einer Qualität unter 50% werden zusätzliche Komprimierungsalgorithmen verwendet, was insbesondere bei Bildern mit hohem Kontrast zu stärkeren Bildverzerrungen führt. Optimiert: Wählen Sie „Optimiert“, um ein verbessertes JPEG mit einer etwas kleineren Dateigröße zu erstellen. Für eine maximale Dateikomprimierung wird das Format „Optimiertes JPEG“ empfohlen. Einige ältere Browser unterstützen diese Funktion jedoch nicht. Tipp: Es wird empfohlen, diese Option zu aktivieren. Derzeit gibt es grundsätzlich keinen Browser, der diese Funktion nicht unterstützt. Kontinuierlich. Wählen Sie „Kontinuierlich“, um Bilder zu erstellen, die kontinuierlich in Ihrem Webbrowser angezeigt werden. Das Bild wird als eine Reihe von Overlays angezeigt, sodass die Zuschauer eine niedrige Version des Bildes sehen können, bis das gesamte Bild heruntergeladen wurde. Progressive JPEG benötigt mehr Speicher für die Anzeige, und einige Browser unterstützen diese Option nicht. Empfehlung: Wenn Sie diese Option überprüfen, können Sie in einigen Fällen die Dateigröße komprimieren (wenn die Bildgröße größer als 10 K ist) und in einigen Fällen die Dateigröße erhöht. IE6 und frühere Versionen des IE -Browsers unterstützen jedoch keine kontinuierliche Anzeige von JPG. Blur gibt die Menge an Unschärfe an, die auf das Bild angewendet werden soll. Die Blur -Option wendet den gleichen Effekt wie der Gaußsche Blur -Filter an und ermöglicht die weitere Komprimierung der Datei für eine noch kleinere Dateigröße. Eine Einstellung zwischen 0,1 und 0,5 wird empfohlen. ICC -Profil Wählen Sie das ICC -Profil aus, um das ICC -Profil des Bildes mit der Datei zu halten. ICC -Profile werden von einigen Browsern zur Farbkorrektur verwendet. (Siehe Einrichten der Farbverwaltung in Photoshop.) Matte gibt die Füllfarbe für transparente Pixel im Originalbild an: Klicken Sie auf das matte Farbmuster und wählen Sie dann eine Farbe im Farbwähler aus. Wählen Sie eine Option aus dem matten Menü. Volltransparente Pixel im Originalbild werden mit der ausgewählten Farbe gefüllt, und teilweise transparente Pixel im Originalbild werden mit der ausgewählten Farbe gemischt. Quelle: Taobao ued |
<<: Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS
>>: SQL-Implementierung LeetCode (185. Top drei der höchsten Gehälter in der Abteilung)
Artikel empfehlen
Lösung für verstümmelte chinesische Schriftzeichen beim Bedienen einer MySQL-Datenbank in CMD
Ich habe auf Baidu gesucht. . Manche Leute sagen,...
Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene
MySQL-Transaktionsisolationsebene anzeigen mysql&...
Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst
Nachdem ich fast zwei Tage lang mit dem domänenüb...
Leerzeichenverarbeitung in HTML/CSS und wie Leerzeichen auf der Seite beibehalten werden
Leerzeichenregeln in HTML In HTML werden mehrere ...
So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz
einführen Ein Diagramm ist eine grafische Darstel...
Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung
Im vorherigen Artikel zu Docker wurde die Konstru...
Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats
1. Einleitung Wenn ein Webprojekt auf unserem Lin...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
Tutorial zur Installation von MYSQL8.0 auf Alibaba Cloud ESC
Öffnen Sie das Verbindungstool. Ich verwende Moba...
Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player
In einem aktuellen Projekt musste ich die Funktio...
So installieren Sie MySQL 8.0 in Docker
Umgebung: MacOS_Cetalina_10.15.1, Mysql8.0.18, Do...
Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“
Erkennen Sie die Unterschiede zwischen den Method...
Zusammenfassung von über 50 Hilfsfunktionen in JavaScript
JavaScript kann viele tolle Dinge. Dieser Artikel...
MYSQL8.0.13 kostenlose Installationsversion Konfiguration Tutorial Beispiel detaillierte Erklärung
1. Download, ich nehme 8.0 als Beispiel Download-...
Implementierung einer geplanten Sicherung in Mysql5.7
1. Suchen Sie mysqldump.exe im MySQL-Installation...