Was können wir in Bezug auf die Optimierung der CSS-Sprites-Technologie tun und wie stark können wir die Anzahl der Anfragen reduzieren? Dies kann nicht einseitig erfolgen, alles hängt von der Zusammenarbeit zwischen XHTML-, CSS- und CSS-Sprites-Bildern ab. Bisher gibt es keine absolute Optimierungsmethode. Deshalb messe ich häufig die Beziehung zwischen CSS-Sprites-Bildern und XHTML in Projekten, wie zum Beispiel: „Ein Hintergrund implementiert ein adaptives Neun-Gitter-Raster“. Bildoptimierung.
Bildoptimierung
Für nicht animierte GIFs wird die Verwendung von PNG8 empfohlen, da es den gleichen Effekt erzielen und 10–30 % der Dateigröße einsparen kann.
Im Vergleich zu Fireworks exportiert Photoshop PNG-Bilder in derselben Qualität, die Größe ist jedoch etwas größer. Obwohl Fireworks entsprechende Komprimierungsoptimierungen vorgenommen hat, wurde nicht die beste Komprimierung erreicht.
Die mir bekannte Designsoftware erreicht nicht die beste Komprimierung für die Verarbeitung von PNG-Bildern und die Bildgröße verfügt immer noch über einen gewissen Komprimierungsraum. Sie können versuchen, das unten vorgestellte „Bildoptimierungstool“ zu verwenden, um eine verzerrungsfreie Komprimierungsoptimierung zu erreichen.
In Bezug auf Bildvolumen und -größe wird empfohlen, die Größe innerhalb von 100 KB zu halten (was eher den besten Größenanforderungen der nationalen Bedingungen entspricht) und die Größe 800 Pixel (die beste Größe) zu betragen. (Von einer seriösen Personalquelle erfahren, keine Möglichkeit, die Details zu überprüfen)
CSS-Sprites-Bildschneidetechnik.
Die Reihenfolge der CSS-Sprites-Bilder und die kombinierten Bilder werden von oben nach unten und von links nach rechts hinzugefügt. Die Hintergrundposition wird im Allgemeinen mithilfe einer Zahlenkombination positioniert, wodurch unnötige Wartungsprobleme vermieden werden können.
Es wird nicht empfohlen, in CSS-Sprites-Bildern einen bestimmten Abstand einzuhalten, da die Dateigröße zunimmt und die Dateigröße zunimmt.
In CSS-Sprites kann die Kombination von Farben, die nahe beieinander liegen oder gleich sind, die Anzahl der Farben reduzieren, da die Dateigröße von Bildern mit einer geringen Anzahl von Farben relativ klein ist.
Bei CSS-Sprites-Bildern gleicher Größe gibt es eine große Lücke, die in den meisten Fällen die Größe etwas erhöht, sodass CSS-Sprites-Bilder keine Lücken aufweisen sollten.
Unter CSS-Sprites-Bildern gleicher Größe haben vertikal angeordnete Bilder größere Dateigrößen als horizontal angeordnete Bilder. Demo
In CSS-Sprites-Bildern haben horizontal angeordnete Bilder größere Dateigrößen als vertikal angeordnete Bilder. Demo
Gleichmäßiges Zusammenführen von Bildern: Wenn Sie CSS-Sprites-Bilder anwenden, führen Sie identische Bilder entsprechend zusammen, um Platz zu sparen und das Volumen zu reduzieren. Demo
Unterscheiden Sie Bilder, die nicht zusammengeführt werden müssen: Wenn der aktuelle Benutzer festlegt, dass nur ein Zustand oder eine Ebene angezeigt wird, besteht keine Notwendigkeit, Bilder anderer Ebenen oder Zustände zusammenzuführen. Demo
Goldene Schnittposition: Die flexibelste Position auf der rechten oder linken Seite des CSS-Sprites-Bildes ist die am besten geeignete Position zum Platzieren des Symbols vor dem Text. Daher wird es nicht durch andere CSS-Sprites-Bilder beeinträchtigt, und das ist auch der Fall Es ist nicht erforderlich, eine bestimmte Linienbreite zu reservieren.