CSS Sprites automatisiert aktualisieren

Bei der Optimierung von Webseiten auf Geschwindigkeit ist die Reduktion der notwendigen Anfragen einer der wichtigsten Maßnahmen. Kleine Bilddateien für Logos, Trusted Shop Logos oder SSL Zertifikate sind dabei nicht zu unterschätzen.

Für diesen Fall werden sogenannte “CSS Sprites” empfohlen. Die Idee: man packt alle kleinen Dateien in eine einzelne Datei und verwendet dann CSS Anweisungen um an der richten Stelle den richtigen Ausschnitt zu verwenden. Im allgemein kann man dazu kleine online Tools verwenden um sich diese Sprite zu erstellen.

Etwas kniffeliger kann es werden wenn diese Bilddateien nicht statisch sind sondern täglich aktualisiert werden.

In meinem Fall habe ich das so gelöst. Ich verwende convert aus dem imagemagick Baukasten um die Gif Datei täglich mit Cron zu aktualisieren.

 convert logo_shop.gif trusted-shop-siegel.gif trusted-shop-rating.gif thawte-seal.gif -append sprite.gif

Innerhalb der CSS Datei werden dann die genauen Positionen festgelegt

.logo_shop, .trusted-shop-siegel, .trusted-shop-rating, .thawte {
  background-image: url('sprite.gif');
  background-repeat: no-repeat;
}
.thawte{
    background-position: 0px -344px;
    width: 60px;
    height: 61px;
}
.trusted-shop-rating {
    background-position: 0px -153px;
    width: 190px;
    height: 190px;
}

Stellt sich die Frage wie man die genaue Position herausbekommt. Hilfreich hierbei kann die Website SpriteCow sein. Aber am Ende muss man wohl immer etwas probieren.

Im HTML der Webseite kann man dann die Bilder ungefähr so einbinden

   <a href="{$index}"> <div class="logo_shop"></div></a>

Bei der Optimierung der Bilder auf Größe kann einem auch noch kraken.io hilfreich sein.

10.9.15 Weitere Beiträge zu: performance CSS

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License