Lädt...

CSS Image-Sprites

Optional Advanced hat gerade !important behandelt — ein seltener Override-Schalter. Diese Session ist ein anderes optionales Thema: Image-Sprites. Du triffst sie in älteren Stylesheets und manchen Legacy-Icon-Sets. Die Idee ist einfach: eine Bilddatei, viele Icons, und background-position wählt, welche Kachel durch ein kleines Fenster schaut.

Direkte Antwort

Ein CSS Image-Sprite ist ein einziges Sheet-Bild, das mehrere Icons (oder Button-Zustände) nebeneinander speichert. Jedes UI-Element bekommt feste Breite und Höhe, dasselbe background-image und ein background-position, das das Sheet verschiebt, bis die gewünschte Kachel die Box füllt. Sprites senkten die Request-Zahl im alten „eine Datei pro Icon“-Web. Für neue Arbeit bevorzugst du SVG-Icons, Inline-SVG oder ein kleines Icon-System — behalte Sprites, wenn du ein vorhandenes Sheet pflegst oder ein Legacy-Design treffen musst.

Warum es Sprites gab

Früher bedeutete jedes Icon oft einen weiteren HTTP-Roundtrip. Zwanzig winzige PNGs in einem Sheet zu bündeln hieß ein Download und ein Cache-Eintrag. Browser malten dann mit CSS unterschiedliche „Fenster“ auf dieses Sheet. HTTP/2 und modernes Bundling haben diesen Schmerz verringert, und skalierbare Vektor-Icons wirken meist schärfer — aber das Positionierungsmuster bleibt nützliche Literacy, wenn du alten CSS öffnest.

Die drei Bausteine

Du brauchst:

  1. Ein Sheet — z. B. icons.png mit Kacheln in einer Reihe oder einem Raster
  2. Eine Box — width und height passend zu einer Kachel (oft mit display: inline-block oder einem Block-Link)
  3. Einen Offset — background-position, damit die richtige Kachel unter der Box sitzt
    background-repeat: no-repeat verhindert, dass das Sheet kachelt. Du lädst keine eigene Datei pro Icon; du schneidest über Position.

Erste Kachel auf einem gemeinsamen Sheet

Stell dir ein Sheet vor, in dem jedes Icon 32×32 Pixel groß ist. Das erste sitzt oben links. Die Element-Box ist 32×32, und der Hintergrund startet bei 0 0:

First icon tile from a shared sheet

css 
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

Die Box wirkt wie ein Viewport. Sichtbar ist nur die oberen linken 32×32 von icons.png. Der Rest des Sheets ist da — nur durch die Elementgröße abgeschnitten.

Zweites Icon: Sheet verschieben

Beginnt das nächste Icon 32px weiter rechts, verschiebe den Hintergrund um 32px nach links (negatives X). Dasselbe Bild, dieselbe Boxgröße, anderes Fenster:

Second icon with a horizontal offset

css 
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}

Negatives X zieht das Sheet nach links, bis die zweite Kachel das Fenster füllt. Eine zweite Icon-Zeile ändert auch den Y-Wert (z. B. -32px -32px). Miss an deinem echten Sheet — rate Offsets nicht aus dem Gedächtnis.

Hover aus einer anderen Kachel

Button-Sets legen oft Standard und Hover (oder Active) auf dasselbe Sheet. Bei :hover änderst du nur background-position:

Hover state from another sprite tile

css 
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.btn-icon:hover {
background-position: -40px 0;
}

Keine zweite Bilddatei — nur ein anderer Ausschnitt. Die Boxgröße stabil halten, damit das Control nicht springt.

Ruhige Sheet-Gewohnheiten

Kombiniere das Sheet immer mit einer expliziten Box und no-repeat. Benenne Klassen nach der Rolle, nicht nur nach Pixelrechnung:

Named sprite roles and no-repeat

css 
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}

.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}

.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}

Dokumentiere das Kachel-Raster kurz im Kommentar (Kachelgröße, Zeilenreihenfolge), damit der nächste Maintainer keine Magiezahlen reverse-engineeren muss.

Sprites damals vs. Icons heute

📊 Sprite sheets vs modern icon approaches

Approach Best when Watch out
CSS image sprite (PNG sheet) Legacy UI you must keep; one cached sheet already in the project Raster scales poorly; offsets break if the sheet changes
Inline SVG / SVG sprite Crisp UI icons at any size; easy theming with currentColor Slightly more markup or build setup
Icon font Very old stacks that already ship one Accessibility and ligature quirks; harder to theme than SVG
Separate PNG per icon Rare one-off graphics Many requests on old HTTP/1 connections
Real <img> photos Content images, galleries, product shots Not a job for background-position sprites

Die Lektionen Image gallery und responsive images nutzen echte <img> (Flex-Thumbs, object-fit, srcset). Sprites sind meist dekoratives UI-Chrome im Hintergrund — kein Ersatz für inhaltliche Fotos mit sinnvollem alt.

Für neue UI moderne Icons bevorzugen

Bei einer frischen Oberfläche mit SVG starten (inline oder kleines SVG-Sprite-System). Du bekommst schärfere Kanten, einfachere Farbwechsel und keine fragilen Pixel-Offsets. Zum klassischen PNG-Sprite greifen nur, wenn das Design-Pack schon ein Sheet ist — oder wenn du CSS patchst, das bereits davon abhängt.

When a sprite is the wrong tool

css 
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}

/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}

Selbst ausprobieren

  1. Skizziere eine 3-Icon-Reihe auf Papier (oder öffne ein echtes Sprite). Notiere die Kachelbreite (z. B. 32px).
  2. Erstelle .icon-a mit background-position: 0 0 und passender Box.
  3. Füge .icon-b mit -32px 0 hinzu (oder deinem echten zweiten Offset).
  4. Schreibe eine Hover-Regel zur dritten Kachel, ohne width/height zu ändern.
  5. Schreibe einen Satz als Kommentar: warum dieses Sheet noch existiert (Legacy) oder warum du nächstes Mal SVG nimmst.

Typische Fehler

  • Content-Fotos in ein Sprite stecken und alt / Semantik verlieren
  • width und height vergessen, sodass das ganze Sheet sichtbar wird oder nichts sauber croppt
  • Positive Offsets nutzen, obwohl das Sheet in die andere Richtung rutschen sollte
  • background-repeat anlassen, sodass Kacheln in der Box duplizieren
  • Eine brandneue App standardmäßig auf PNG-Sprites statt SVG bauen
  • Offsets aus einem Tutorial kopieren, ohne dein Sheet zu messen

Kurzfassung

  • Ein Sprite ist ein Sheet; background-position wählt, welche Kachel eine feste Box füllt
  • Historisch reduzierte das HTTP-Requests für viele kleine Icons
  • no-repeat, stabile Größen und benannte Rollen behalten; Raster dokumentieren
  • Für neue UI SVG (oder ähnlich) bevorzugen; Sprites für Legacy-Sheets behalten
  • Content-Bilder bleiben echte <img> — Galerie und responsive images sind eine andere Aufgabe
  • Optional Advanced geht als Nächstes mit Mehrspalten (multi-column) weiter

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 72 von 72
Css Tutorial