Eine ausführliche Einführung in Sprite-Bilder in CSS

CSS Sprite CSS Sprite, manche nennen es CSS Sprite, ist eine CSS-Bildzusammenführungstechnologie. Bei dieser Methode werden kleine Symbole und Hintergrundbilder zu einem Bild zusammengeführt und dann mithilfe von CSS positioniert um den Teil des Bildes anzuzeigen, der angezeigt werden muss. CSS Sprites-Technologie wird von einigen Leuten in China CSS Sprite genannt. Sie integriert tatsächlich einige Hintergrundbilder in der Webseite in eine Bilddatei und verwendet dann CSS „Hintergrundbild“, „Hintergrundwiederholung“, „Hintergrund-“. „Position“-Kombination für die Hintergrundpositionierung, Hintergrundposition kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren

Das Grundprinzip des CSS-Sprite-Bildes ist Konsolidieren Sie einige auf Ihrer Website verwendete Bilder in einem einzigen Bild und reduzieren Sie so die Anzahl der HTTP-Anfragen an Ihre Website. Das Bild wird mithilfe der CSS-Eigenschaften „Hintergrund“ und „Hintergrundposition“ gerendert, was bedeutet, dass Ihre Tags komplexer werden. Das Bild wird in CSS definiert, nicht im

CSS-Wissenspunkte:

Hintergrundbild

Hintergrundposition

CSS-Sprite-Bildfunktionen:

Im Vergleich zu einem kleinen Symbol spart es Dateigröße und Serviceanfragezeiten. Durch die Integration aller fragmentierten Webseiten-Hintergrundbilder kann die Anzahl der HTTP-Anfragen für Bilder effektiv reduziert werden, ohne dass fragmentierte Hintergrundbilder mehrmals geladen werden müssen.

Im Allgemeinen müssen Sie im PNG-24-Dateiformat speichern.

Sie können die Körperoberfläche in satten und farbenfrohen Farben gestalten.

Schwierigkeiten von CSS-Sprite-Bildern:

Sie müssen die Größe jedes kleinen Symbols im Voraus bestimmen

Achten Sie auf den Abstand zwischen kleinen Symbolen

Seien Sie vorsichtig und geduldig

PNG-24-Bildformat: PNG-24 kann Grate reduzieren.

Vorteile von CSS-Sprites

Reduzieren Sie die Anzahl der Anfragen an den Server beim Laden von Webseitenbildern

Kann die meisten Hintergrundbilder und kleinen Symbole zusammenführen und ist an jedem Ort einfach zu verwenden, sodass Anfragen von verschiedenen Orten nur ein Bild aufrufen müssen, wodurch die Anzahl der Anfragen an den Server verringert, der Serverdruck verringert und gleichzeitig die Seitenladegeschwindigkeit verbessert wird Einsparung von Serververkehr.

Seitenladegeschwindigkeit verbessern

Einer der Vorteile der Sprite-Technologie ist die Ladezeit von Bildern (die Ladezeit eines einzelnen Bildes, wenn viele Sprites vorhanden sind). Ein aus den erforderlichen Bildern zusammengesetztes GIF ist deutlich kleiner als die Gesamtgröße aller Bilder. Ein einzelnes GIF verfügt nur über eine zugehörige Farbtabelle, während jedes geteilte GIF über eine eigene Farbtabelle verfügt, wodurch die Gesamtgröße zunimmt. Daher ist ein einzelnes JPEG- oder PNG-Sprite wahrscheinlich kleiner als die Gesamtgröße eines in mehrere Bilder aufgeteilten Bildes.

Einige Fehler reduzieren, wenn die Maus darüber fährt

IE6 lädt das Hintergrundbild nicht aktiv vor, wenn Sie mit der Maus darüber fahren, wenn Sie also mehrere Bilder verwenden , es blinkt weiß, wenn die Maus darüber fährt. Bei Verwendung von CSS Sprite tritt dieses Phänomen nicht auf, da ein Bild ausreicht.

Unzureichende CSS-Sprite-Bilder

Das größte Problem bei CSS-Sprite ist die Speichernutzung

Es sei denn, das Sprite-Bild wird sehr stark aufgenommen Bei sorgfältiger Organisation entsteht am Ende viel nutzloser Leerraum. Ein Beispiel stammt von der WHIT TV-Website. 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)

Beeinflusst die Zoomfunktion des Browsers

Wenn man das CSS verwendet Die Sprite-Seite wird mithilfe der von einigen Browsern bereitgestellten Ganzseiten-Zoomfunktion skaliert. Der Browser muss einige zusätzliche Arbeiten ausführen, um das Verhalten dieser Bildkanten zu korrigieren – im Wesentlichen, um zu verhindern, dass benachbarte Bilder im Sprite „hereinkommen“. Bei kleinen Bildern ist das kein Problem, bei großen Bildern ist dies jedoch ein Leistungseinbruch.

Die Wartung von Puzzles ist mühsam

Das Zusammenstellen so vieler Bilder erfordert Geduld. Gleichzeitig sollten Sie immer darüber nachdenken, wie Sie dieses Bild nutzen können, ohne sich gegenseitig zu beeinflussen. Es ist nicht einfach, große und dünne Bilder mit breiten und kurzen Bildern zusammenzufügen. Wenn Sie ein Bild in Sprite ändern möchten, müssen Sie das gesamte Bild ändern, was zweifellos den Arbeitsaufwand erhöht.

Erschwert das Schreiben von CSS

Wenn das CSS-Sprite komplex genug ist, erhöht es die Menge und den Schwierigkeitsgrad des CSS-Codes erheblich, was die Wartung und Änderung erschwert.

Von CSS Sprite aufgerufene Bilder können nicht gedruckt werden

Von CSS Sprite aufgerufene Bilder können nicht gedruckt werden, es sei denn, @media wird ausdrücklich eine Druckanweisung hinzugefügt.

Die falsche Verwendung von Sprites wirkt sich auf die Barrierefreiheit aus.

Einige neue Entwickler werden dies tun, um die Anzahl der HTTP-Anfragen einzusparen (dies ist der Vorteil, der durch die Verwendung von CSS hervorgehoben wurde). Sprites) Behandeln Sie alle Bilder als Hintergrundbilder – auch solche, die wichtige Informationen vermitteln. Das Ergebnis ist eine Website, die nicht barrierefrei ist und die potenziellen Vorteile von Titeln und Alternativen in HTML einschränkt.

Daher ist an CSS-Sprites grundsätzlich nichts auszusetzen, und sie verursachen keine Probleme mit der Barrierefreiheit (tatsächlich verbessern sie bei korrekter Verwendung die Barrierefreiheit). Aber der übermäßige Einsatz von Sprites, ob zu Recht oder zu Unrecht, kann den Prozess der Erstellung von Webseiten sowohl hinsichtlich der Zugänglichkeit als auch der Produktivität behindern.

CSS Sprite CSS Sprite, auch bekannt als CSS Sprite, ist eine CSS-Bildzusammenführungstechnologie. Bei dieser Methode werden kleine Symbole und Hintergrundbilder zu einem Bild zusammengeführt CSS, um den Teil des Bildes anzuzeigen, der angezeigt werden muss. CSS Sprites-Technologie wird von einigen Leuten in China CSS Sprite genannt. Sie integriert tatsächlich einige Hintergrundbilder in der Webseite in eine Bilddatei und verwendet dann CSS „Hintergrundbild“, „Hintergrundwiederholung“, „Hintergrund-“. „Position“-Kombination zur Hintergrundpositionierung, Hintergrundposition kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren

Das Grundprinzip des CSS-Sprite-Bildes ist Konsolidieren Sie einige auf Ihrer Website verwendete Bilder in einem einzigen Bild und reduzieren Sie so die Anzahl der HTTP-Anfragen an Ihre Website. Das Bild wird mithilfe der CSS-Eigenschaften „Hintergrund“ und „Hintergrundposition“ gerendert, was bedeutet, dass Ihre Tags komplexer werden. Das Bild wird in CSS definiert, nicht im

CSS-Wissenspunkte:

Hintergrundbild

Hintergrundposition

CSS-Sprite-Bildfunktionen:

Im Vergleich zu einem kleinen Symbol spart es Dateigröße und Serviceanfragezeiten. Durch die Integration aller fragmentierten Webseiten-Hintergrundbilder kann die Anzahl der HTTP-Anfragen für Bilder effektiv reduziert werden, ohne dass fragmentierte Hintergrundbilder mehrmals geladen werden müssen.

Im Allgemeinen müssen Sie im PNG-24-Dateiformat speichern.

Sie können die Körperoberfläche in satten und farbenfrohen Farben gestalten.

Schwierigkeiten von CSS-Sprite-Bildern:

Sie müssen die Größe jedes kleinen Symbols im Voraus bestimmen

Achten Sie auf den Abstand zwischen kleinen Symbolen

Seien Sie vorsichtig und geduldig

PNG-24-Bildformat: PNG-24 kann Grate reduzieren.

Vorteile von CSS-Sprites

Reduzieren Sie die Anzahl der Anfragen an den Server beim Laden von Webseitenbildern

Kann die meisten Hintergrundbilder und kleinen Symbole zusammenführen und ist an jedem Ort einfach zu verwenden, sodass Anfragen von verschiedenen Orten nur ein Bild aufrufen müssen, wodurch die Anzahl der Anfragen an den Server verringert, der Serverdruck verringert und gleichzeitig die Seitenladegeschwindigkeit verbessert wird Einsparung von Serververkehr.

Seitenladegeschwindigkeit verbessern

Einer der Vorteile der Sprite-Technologie ist die Ladezeit von Bildern (die Ladezeit eines einzelnen Bildes, wenn viele Sprites vorhanden sind). Ein aus den erforderlichen Bildern zusammengesetztes GIF ist deutlich kleiner als die Gesamtgröße aller Bilder. Ein einzelnes GIF verfügt nur über eine zugehörige Farbtabelle, während jedes geteilte GIF über eine eigene Farbtabelle verfügt, wodurch die Gesamtgröße zunimmt. Daher ist ein einzelnes JPEG- oder PNG-Sprite wahrscheinlich kleiner als die Gesamtgröße eines in mehrere Bilder aufgeteilten Bildes.

Einige Fehler reduzieren, wenn die Maus darüber fährt

IE6 lädt das Hintergrundbild nicht aktiv vor, wenn Sie mit der Maus darüber fahren, wenn Sie also mehrere Bilder verwenden , es blinkt weiß, wenn die Maus darüber fährt. Bei Verwendung von CSS Sprite tritt dieses Phänomen nicht auf, da ein Bild ausreicht.

Unzureichende CSS-Sprite-Bilder

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. Ein Beispiel stammt von der WHIT TV-Website. 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)

Beeinflusst die Zoomfunktion des Browsers

Wenn man das CSS verwendet Die Sprite-Seite wird mithilfe der von einigen Browsern bereitgestellten Ganzseiten-Zoomfunktion skaliert. Der Browser muss einige zusätzliche Arbeiten ausführen, um das Verhalten dieser Bildkanten zu korrigieren – im Wesentlichen, um zu verhindern, dass benachbarte Bilder im Sprite „hereinkommen“. Bei kleinen Bildern ist das kein Problem, bei großen Bildern ist dies jedoch ein Leistungseinbruch.

Puzzle-Pflege ist mühsam

Das Zusammensetzen so vieler Bilder erfordert Geduld. Gleichzeitig sollten Sie immer darüber nachdenken, wie Sie dieses Bild nutzen können, ohne sich gegenseitig zu beeinflussen. Es ist nicht einfach, große und dünne Bilder mit breiten und kurzen Bildern zusammenzufügen. Wenn Sie ein Bild in Sprite ändern möchten, müssen Sie das gesamte Bild ändern, was zweifellos den Arbeitsaufwand erhöht.

Erschwert das Schreiben von CSS

Wenn das CSS-Sprite komplex genug ist, erhöht sich die Menge und der Schwierigkeitsgrad des CSS-Codes erheblich, was die Wartung und Änderung erschwert.

Von CSS Sprite aufgerufene Bilder können nicht gedruckt werden

Von CSS Sprite aufgerufene Bilder können nicht gedruckt werden, es sei denn, @media wird ausdrücklich eine Druckanweisung hinzugefügt.

Die falsche Verwendung von Sprites wirkt sich auf die Barrierefreiheit aus.

Einige neue Entwickler werden dies tun, um die Anzahl der HTTP-Anfragen einzusparen (dies ist der Vorteil, der durch die Verwendung von CSS hervorgehoben wurde). Sprites) Behandeln Sie alle Bilder als Hintergrundbilder – auch solche, die wichtige Informationen vermitteln. Das Ergebnis ist eine Website, die nicht barrierefrei ist und die potenziellen Vorteile von Titeln und Alternativen in HTML einschränkt.

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in Sprite-Bilder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!