CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

Die Bildintegrationstechnologie, die von YAHOO in den USA bei der Seitenerstellung verwendet wird. Obwohl es eine gewisse Zeit in Anspruch nimmt, diese Symbole, Spaltenhintergründe und Bildschaltflächen regelmäßig zusammenzuführen, um CSS-Aufrufe zu ermöglichen, ist es definitiv kostengünstig und notwendig. YSlow wird ebenfalls dringend empfohlen.

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. Hintergrundposition: -8px -95px;
Eine kurze Diskussion über die CSS-Sprites-Technologie und Bildoptimierung (Integration von Hintergrundbildern)
Wie viel können wir tun, um die CSS-Sprites-Technologie zu optimieren und wie sehr können wir die Anzahl der Anfragen reduzieren? Dies kann nicht einseitig erfolgen; alles hängt von der Koordination zwischen XHTML-, CSS- und CSS-Sprites-Bildern ab. Bisher gibt es keine absolut optimierte Methode. Aus diesem Grund wäge ich in meinen Projekten häufig die Beziehung zwischen CSS-Sprites-Bildern und XHTML ab, z. B.: „Ein Hintergrund, um ein adaptives Neun-Quadrate-Raster zu erreichen“. Im Folgenden sind einige Methoden zum Bildschneiden und zur Bildoptimierung zusammengefasst.

Bildoptimierung <br />1. Für nicht animierte GIFs wird die Verwendung von PNG8 empfohlen, da Sie damit den gleichen Effekt erzielen und 10–30 % der Dateigröße einsparen können.
2. Im Vergleich zu Fireworks sind PNG-Bilder gleicher Qualität, die aus Photoshop exportiert werden, etwas größer. Obwohl Fireworks entsprechende Komprimierungsoptimierungen vorgenommen hat, wurde nicht die beste Komprimierung erreicht.
3. Soweit mir bekannt ist, erreicht die Designsoftware, die PNG-Bilder verarbeitet, nicht die beste Komprimierung, und es besteht noch Raum für eine Komprimierung der Bildgröße. Sie können versuchen, mit dem unten vorgestellten „Bildoptimierungstool“ eine verlustfreie Komprimierungsoptimierung durchzuführen.
4. Bezüglich der Bildgröße und -abmessungen wird empfohlen, dass die Größe unter 100 KB bleibt (was eher der in China am häufigsten nachgefragten GRÖSSE entspricht) und die Größe 800 Pixel beträgt (die optimale Größe). (Aus einer maßgeblichen Quelle erfahren, die Details können jedoch nicht überprüft werden)

Technik zum Zuschneiden von CSS-Sprites-Bildern <br />1. Die Bildreihenfolge von CSS-Sprites und die Bilder werden von oben nach unten und von links nach rechts hinzugefügt. Die Hintergrundposition wird im Allgemeinen in Form einer digitalen Kombination positioniert, wodurch unnötiger Wartungsaufwand reduziert werden kann.
2. Es wird nicht empfohlen, in CSS-Sprites-Bildern einen bestimmten Abstand beizubehalten, da dadurch die Dateigröße zunimmt.
3. Das Kombinieren von Bildern mit ähnlichen oder identischen Farben in CSS-Sprites kann die Anzahl der Farben reduzieren, da die Dateigröße von Bildern mit weniger Farben relativ klein ist.
4. Wenn Sie in CSS-Sprites-Bildern gleicher Größe große Lücken lassen, wird das Volumen in den meisten Fällen bis zu einem gewissen Grad erhöht. Daher sollten in CSS-Sprites-Bildern keine Lücken vorhanden sein.
5. Bei CSS-Sprites-Bildern gleicher Größe sind vertikal angeordnete Bilder größer als horizontal angeordnete.
6. Bei CSS-Sprites-Bildern haben horizontal angeordnete Bilder größere Dateien als vertikal angeordnete Bilder.
7. Gleichwertige Bilder zusammenführen: Wenn Sie CSS-Sprites-Bilder verwenden, führen Sie gleichwertige Bilder entsprechend zusammen, um Platz zu sparen und das Volumen zu reduzieren.
8. Unterscheiden Sie Bilder, die nicht zusammengeführt werden müssen: Wenn der aktuelle Benutzer festlegt, nur einen Status oder eine Ebene anzuzeigen, müssen Bilder anderer Ebenen oder Status nicht zusammengeführt werden.
9. Goldene Schnittposition: Die Position ganz rechts oder ganz links des CSS-Sprites-Bildes ist die flexibelste Position und eignet sich am besten, um das Symbol vor dem Text zu platzieren. Daher wird es nicht von anderen CSS-Sprites-Bildern gestört und es ist nicht erforderlich, eine bestimmte Linienbreite zu reservieren.

Im Internet kursieren zahlreiche entsprechende Bildoptimierungstools, beispielsweise:
ImageMagick, PNGGauntlet, pngcrush, pngrewrite, Optipng, PNGOut usw.
Wie wir alle wissen, besteht eine der effektivsten Möglichkeiten zur Verkürzung der Ladezeit einer Website darin, die Anzahl der von der Website gestellten HTTP-Anfragen zu verringern. Dieses Ziel lässt sich effektiv durch CSS-Sprites erreichen – das Kombinieren mehrerer Bilder zu einem Bild und deren anschließende Positionierung mithilfe von CSS.
Der Zweck von CSS-Sprites besteht darin, das Laden von Seiten durch die Konsolidierung von Bildern und die Reduzierung der Anzahl der Anfragen an den Server zu beschleunigen.

Implementierungsmethode :
Integrieren Sie zunächst die kleinen Bilder zu einem großen Bild. Der Einfachheit halber können Sie mehrere Bilder in die gleiche Spalte setzen, sodass die x-Achse als 0 definiert werden kann.
Positionieren Sie dann den Hintergrund entsprechend der Position des jeweiligen Symbols auf dem Gesamtbild. Hintergrundposition: -8px -95px;
Beispiel:
Wenn wir auther.gif im obigen Bild als Hintergrund verwenden, lautet der Code wie folgt: