Optimierungsvorschläge für CSS-Bilder

Dieser Artikel stellt hauptsächlich einige relevante Vorschläge zur CSS-Bildoptimierung vor. Er bietet hauptsächlich eine kurze Einführung in die Sprites-Bildintegrationstechnologie.

Bei der CSS-Bildoptimierung geht es um die Komprimierung der Bildgröße Bild so weit wie möglich zu beschleunigen, was für große Websites nützlich ist. Unterschätzen Sie es nicht, es kann die Ladegeschwindigkeit von Webseiten erheblich verbessern. Die Methode, die normalerweise jeder verwendet, sind CSS-Sprites.

Der Zweck von CSS Sprites (Bildintegrationstechnologie) besteht darin, durch die Integration von Bildern die Anzahl der Anfragen an den Server zu reduzieren und dadurch das Laden der Seite zu beschleunigen. Ich denke, dass viele Leute diese Technologie bereits nutzen. Lassen Sie mich eine kurze Einführung geben und einige meiner Techniken bei der Verwendung von CSS-Sprites zusammenfassen.
　 CSS-Sprites-Implementierungsmethode:

Integrieren Sie zunächst die kleinen Bilder in ein großes Bild und positionieren Sie dann den Hintergrund entsprechend der Position des jeweiligen Symbols auf dem großen Bild.
　 Zusammenfassung der technischen Punkte von CSS Sprites:

　1. Befolgen Sie beim Integrieren kleiner Bilder die Reihenfolge von oben nach unten, anstatt ein Bild von links nach rechts neben einem anderen anzuordnen. Die Anordnung des Werts der Hintergrundposition auf diese Weise ist auf einen Blick klar, was beim Schreiben von CSS viel praktischer ist. Dies dient auch der späteren Wartung. Stellen Sie sich vor, dass sich die Hintergrundposition aller umgebenden Elemente entsprechend ändert, wenn die Größe eines der Bilder während der späteren Wartung geändert wird, was Kopfschmerzen bereiten wird.

2. Versuchen Sie beim Einbinden kleiner Bilder möglichst weit links oder rechts zu stehen. Diese beiden Positionen sind sehr flexibel und eignen sich sehr gut zum Platzieren von Symbolen vor Text. Beim Schreiben von Stilen werden sie nicht durch andere CSS-Sprites-Bilder beeinträchtigt. Basierend auf Punkt 1 können wir beginnen, die Bilder von oben nach unten entlang der äußersten linken und rechten Seite zu integrieren.

　3. Es wird nicht empfohlen, Lücken über und unter verschiedenen kleinen Bildern zu lassen. Denn dadurch vergrößert sich die Bildgröße und damit auch die Dateigröße. Diese Lücken sind nicht notwendig.

4. Das Kombinieren von Bildern mit ähnlichen oder identischen Farben kann die Anzahl der Farben reduzieren, da die Dateigröße von Bildern mit einer geringen Anzahl von Farben relativ klein ist.
Bildoptimierung:

Wenn wir alle kleinen Bilder zu einem großen Bild integrieren, müssen wir beginnen, über die Frage der Bildoptimierung nachzudenken. Sie können einen Blick auf die aktuelle Dateigröße des Bildes werfen. Gibt es etwas, das nicht zufriedenstellend ist? Die folgenden Schritte können es lösen.

Da der Hintergrund des eingebundenen Großbildes grundsätzlich komplett transparent ist, werden wir es im PNG-Format speichern. Man könnte sagen, dass die Dateigröße von GIF kleiner ist als die von PNG. Warum nicht GIF? Weil GIF-Bilder bei der Verarbeitung von Kurven wie abgerundeten Ecken oder diagonalen Linien viele Aliase aufweisen, die wir nicht sehen möchten. Und einige kleine Bildpixel, die fast weiß sind, gehen möglicherweise verloren. Darüber hinaus können wir auch ein Format finden, das kleiner als GIF ist, nämlich das PNG8-Format, das ich heute vorstellen werde.

Für nicht animierte GIFs wird die Verwendung von PNG8 empfohlen, da es den gleichen Effekt wie das ursprüngliche PNG-Bild erzielen kann und Sie 10–30 % der Dateigröße einsparen können, sogar mehr als GIF-Bilder .
　So konvertieren Sie Bilder in das PNG8-Format

　1. Bildvorbereitung: Egal mit welcher Zeichensoftware Sie das Bild zeichnen, speichern Sie es einfach wie gewohnt im PNG-Format. In Photoshop gibt es keinen Konvertierungsvorgang in PNG8, daher müssen wir uns an Feuerwerk wenden.

　2. Öffnen Sie das integrierte große Bild im Feuerwerk.

　3. Wählen Sie Datei – Bildvorschau.

4. Wählen Sie PNG8 im Dropdown-Feld „Format“ aus. Sie müssen nichts anderes auswählen. Klicken Sie einfach auf die Schaltfläche „Exportieren“, um den Pfad auszuwählen.

Es ist ganz einfach: Schauen Sie sich die Größe Ihres PNG8-Bildes an und vergleichen Sie es mit dem vorherigen Bild. Sie werden angenehm überrascht sein! ~~Wenn man sich die Bildqualität ansieht, ist es einfach perfekt~~

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Verwenden Sie CSS3-Klickschaltflächen, um den Effekt einer Hintergrundverlaufsanimation zu erzielen

Das obige ist der detaillierte Inhalt vonOptimierungsvorschläge für CSS-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!