Responsive Image Sprites

Ein Bild mit vielen Bildern

Sprites sind eine alte Technik der Grafik: Ein Bild wird einmal geladen, aber zu jedem Zeitpunkt oder an jeder Position nur in Teilen angezeigt. CSS Image Sprites und SVG Image Sprites sind »Platzanweiser« für die Einzelbilder.

CSS-Image Sprites beschleunigen den Ladevorgang: Nur ein großes Bild zu laden ist schneller als das Laden vieler kleiner Bilder.

	food-painted-1500.png	200 KB
	food-painted-03-500	84 KB
	food-painted-01-500	75 KB
	food-painted-02-500	55 KB

Der Unterschied fällt eher homöopathisch aus, dennoch lohnte sich das Verfahren früher, denn anstelle von drei gab es nur noch einen HTTP-Request. Auch mit HTTP/2 kann sich das Verfahren bei vielen sehr kleinen Bildern noch lohnen, obwohl HTTP/2 mit weniger Overhead kommt.

CSS Image Sprites

Die Technik der CSS Image Sprites ist bekannt und bewährt, aber jede Serie braucht ihren eigenen Eintrag in die CSS-Datei.

.sprites {
   width:30%;
   height: 0;
   padding-bottom: 20%;
   background-size: 300%;
   display:block;
   background-image: url("hot-dog.jpg");
   background-repeat: no-repeat;
}
.sprite-1 {background-position: 0 0;}
.sprite-2 {background-position: 50% 0;}
.sprite-3 {background-position: 100% 0;}

Damit Image Sprites sich an das Platzangebot anpassen, müssen alle Größen in Prozent angegeben werden.

SVG Image Sprites

SVG rendert Bitmap-Bilder in einem SVG image-Tag, das kaum anders aussieht als ein HTML-img-Tag. SVG ist durch sein viewBox-Attribut von Haus aus anpassungsfähig, aber Internet Explorer 10 und 11 lernen das Rechnen auch im hohen Alter nicht mehr.

<svg viewBox="0 0 500 428">
   <image id="pixl" height="428" width="1500" y="0" x="0" xlink:href="fraisier.jpg"/>
</svg>

Diese drei Zeilen SVG-Markup mit einem image-Tag reichen schon.

Zur Sache: Jetzt noch die SVG-Sprite-Technik

Die Bitmap-Bilder werden genauso wie bei CSS-Image-Sprites nach links aus dem sichtbaren Ausschnitt herausgezogen. Mehr ist da nicht dran.

<div class="svginside" style="max-width:400px">
   <canvas height="629" width="500"></canvas>
   <svg width="100%" height="100%" viewBox="0 0 500 629">
      <image id="pixl" height="629" width="1500" y="0" x="0" xlink:href="fraisier1500-629.jpg"/>
   </svg>
</div>
<div class="svginside" style="max-width:400px;">
   <canvas height="629" width="500"></canvas>
   <svg width="100%" height="100%" viewBox="0 0 500 629">
      <use xlink:href="#pixl" transform="translate(-500)"/>
   </svg>
</div>
<div class="svginside" style="max-width:400px;">
   <canvas height="629" width="500"></canvas>
   <svg width="100%" height="100%" viewBox="0 0 500 629">
      <use xlink:href="#pixl" transform="translate(-1000)"/>
   </svg>
</div>

Statt das Seitenverhältnis der Image-Sprites aus Breiten und Höhen zu berechnen, darf abgeschrieben werden: Breite und Höhe des SVG-Elements aus der viewBox in das canvas-Element übernehmen.

Während die div class=“sprites“-Elemente leer sind, können SVG-Elemente durch title und desc-Tags beschrieben werden.