Originaltext: CSS Sprite: Tun oder nicht tun?
Übersetzt aus: Nach Sprite oder nicht nach Sprite
Haftungsausschluss: Bei den in diesem Artikel erwähnten CSS-Sprites handelt es sich um CSS-Sprites . Einige Leute haben begonnen, sie als CSS-Sprites zu bezeichnen. Wir werden dies auch in Zukunft tun. Wir werden weiterhin CSS Sprites heißen. Shenfei (Gesang)
CSS Sprite gibt es schon seit einiger Zeit und hat sich als Möglichkeit etabliert, Ihre Website schneller zu machen. Steve Souders hat gerade SpriteMe! auf der Velocity 09 vorgestellt (wobei er darüber sprach, warum man einen CSS-Sprite-Generator oder ein anderes serverbasiertes Tool verwenden sollte, wenn man Canvas und toDataURL verwenden und Sprites im Handumdrehen generieren kann?). Es gibt jedoch einige Missverständnisse über CSS-Sprites. Das wichtigste ist, dass sie keine Nachteile haben.
Das Grundprinzip von CSS Sprite besteht darin, einige auf Ihrer Website verwendete Bilder in ein einziges Bild zu integrieren und so die Anzahl der HTTP-Anfragen für Ihre Website zu reduzieren. Das Bild wird mithilfe der CSS-Eigenschaften „Hintergrund“ und „Hintergrundposition“ gerendert (erwähnenswert ist, dass dies auch bedeutet, dass Ihre Tags komplexer werden, da das Bild in CSS und nicht im <img>-Tag definiert wird).
Das größte Problem bei CSS Sprite ist die Speichernutzung. Wenn das Sprite-Bild nicht sehr sorgfältig organisiert ist, entsteht am Ende viel nutzloser Leerraum . Mein Lieblingsbeispiel stammt von der Website von WHIT TV, wo dieses Bild als Sprite verwendet wird. Beachten Sie, dass es sich um ein PNG-Bild mit 129915.000 Pixeln handelt. Es ist außerdem sehr gut komprimiert und die tatsächliche Downloadgröße beträgt nur etwa 26 KB – der Browser rendert die komprimierten Bilddaten jedoch nicht. Wenn dieses Bild heruntergeladen und dekomprimiert wird, belegt es etwa 75 MB Speicher (1299 * 15000 * 4). Wenn dieses Bild keine Alpha-Transparenz verwendet, wird es auf 1299 * 15000 * 3 optimiert, allerdings auf Kosten der Rendergeschwindigkeit. Selbst dann sprechen wir von 55 MB. Der größte Teil dieses Bildes ist tatsächlich leer , es gibt nichts, keinen nützlichen Inhalt. Allein das Laden der WHIT-Homepage führt allein aufgrund dieses einen Bildes dazu, dass der Speicherverbrauch Ihres Browsers auf mindestens 75+ MB ansteigt. ( PS: Leider wurde die Website kürzlich überarbeitet und die im Artikel erwähnten Bilder existieren nicht mehr )
Den richtigen Kompromiss zugunsten einer Website gibt es nicht.
Ein weiterer (wenn auch nicht so wichtiger) Nachteil besteht darin, dass der Browser bei der Skalierung einer Seite mit CSS Sprite mithilfe der von einigen Browsern bereitgestellten Ganzseiten-Zoomfunktion zusätzliche Arbeit leisten muss, um das Verhalten dieser Bildkanten zu korrigieren. um zu verhindern, dass benachbarte Bilder in Sprite freigelegt werden. Bei kleinen Bildern ist das kein Problem, bei großen Bildern ist dies jedoch ein Leistungseinbruch.
Es gibt sicherlich einige Beispiele, die die klaren Vorteile von CSS-Sprites zeigen. Das wichtigste davon ist das Zusammenführen mehrerer Bilder gleicher Größe in einer einzigen Datei. Zum Beispiel eine Reihe von 16×16-Symbolen, die zur Identifizierung vieler Dinge auf Ihrer Website verwendet werden, oder einige 32×32-Symbole, die als Kategorieüberschriften oder ähnliches verwendet werden. Es ist jedoch nie eine gute Idee, stark unterschiedliche Größen von Bildern zu kombinieren, insbesondere ein großes und dünnes Bild neben einem breiten und kurzen Bild.
Allerdings verbessert CSS Sprite die Seitenladezeiten (zumindest beim ersten Laden der Seite und bei nachfolgenden Seitenladevorgängen speichert der Browser das Bild im Cache). Gibt es etwas, das ersetzt werden kann? Leider gibt es noch keine Alternative. Viele Browser beginnen, Offline-Manifeste zu unterstützen, und es könnte möglich sein, dies zu erweitern, um das Herunterladen einer Datei (z. B. einer JAR-/ZIP-Datei) zu ermöglichen, die eine Liste von Ressourcen und entsprechenden URLs enthält. Aber ein solcher Ansatz wird noch einige Zeit lang nicht zu sehen sein ...
Wenn Sie sich also für die Verwendung von CSS Sprite entscheiden, sollten Sie sich darüber im Klaren sein, dass es viele Faktoren gibt, die über die anfängliche Leistung beim Laden der Seite hinausgehen. Als allgemeine Faustregel gilt: Wenn ein großer Teil Ihres CSS-Sprites keinen tatsächlichen Bildinhalt enthält, sollten Sie es vermeiden, es entsprechend zu verwenden. Behalten Sie außerdem mögliche zukünftige Probleme im Auge, während Sie gleichzeitig die Seitenladegeschwindigkeit beibehalten und gleichzeitig darauf achten, Speicherfehler und Auswirkungen auf die Sprite-Leistung zu vermeiden.
Andere CSS-Sprite-Mängel
Im Folgenden sind einige Mängel von CSS Sprite aufgeführt, die von einigen Internetnutzern in den Kommentaren zu diesem Artikel erwähnt wurden:
Von CSS Sprite aufgerufene Bilder können nicht gedruckt werden, es sei denn, die Druckanweisung wird von RichB ausdrücklich zu @media hinzugefügt
Wenn Sie ein Bild in Sprite ändern möchten, müssen Sie das gesamte Bild ändern, was zweifellos den Arbeitsaufwand für Tom B. erhöht
Sollten Ihnen bei der Nutzung Mängel in anderen CSS-Sprites auffallen, können Sie diese gerne erwähnen.