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 (Diskussion – warum einen CSS-Sprite-Generator oder ein anderes serverbasiertes Tool verwenden, 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 1299 x 15.000 Pixeln handelt. Es ist auch sehr gut komprimiert – die tatsächliche Downloadgröße beträgt nur etwa 26 KB –, aber der Browser rendert die komprimierten Bilddaten 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, wenn eine Seite, die CSS Sprite verwendet, mit der von einigen Browsern bereitgestellten Ganzseiten-Zoomfunktion skaliert wird, der Browser einige zusätzliche Arbeit leisten muss, um das Verhalten dieser Bildkanten zu korrigieren – im Grunde genommen Es soll verhindern, dass benachbarte Bilder in Sprite „belichtet“ 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 ein paar 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 Seitenladen – bei nachfolgenden Seitenladevorgängen speichert der Browser das Bild zwischen). 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 erst in einiger Zeit 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 die entsprechende Verwendung vermeiden. 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:
Sollten Ihnen bei der Nutzung Mängel in anderen CSS-Sprites auffallen, können Sie diese gerne erwähnen.