Css Hilfe - Css Tutorial - Css Anleitung leicht verständlich und gut nachvollziehbar
Css Sprites - minimale HTTP Requests bessere Seitenqualität und Suchmaschinen - Indizierung
Was sind Css Sprites?
Zu erst möchte ich dieses mächtige Wort "Css Sprites" vereinfachen und die ganze Mystik herausnehmen die gerade für ungeübte Webseiten Ersteller ein riesigen und unüberwindbaren Berg darstellen.
Mit "Css Sprites" ist eine einfach Technik gemeint. Kurz und Knapp, Sie fügen mehrere Einzelbilder zu einem grösseren Bild zusammen und verschieben dieses einzelne große Bild im Hintergrund auf die gewünschte Position.
Welchen Vorteil haben Css Sprites?
Der Vorteil von "Css Sprites" ist enorm.
Http Request's minimieren request english (Abfrage)
Größere Webseiten haben oftmals viele kleine Einzelgrafiken. Werden für grafisch anspruchsvolle Menüs immer ein Start Bild, eine Zwischen Bild und ein Endbild genommen, müssen diese drei Bilder herkömmlich einzeln vom Web Server geladen werden. Vereint man diese zu Bilder zu einem Bild, wird eben nur ein Bild vom Server geladen. In diesem Fall haben wir 2 Abfragen an den Webserver gespart.
Minimierung der Bildgröße
Für jedes Bild wird von Ihrem Grafikprogramm ein so genannter Header erstellt. Darin enthalten sind wichtige Informationen zum Bild. Dieser Header wird für jedes Bild erstellt, egal wie groß oder klein das Bild ist. Fügt man die einzelnen Bilder zu einem Bild zusammen verringert sich ebenso die Gesamtgröße des Bildes, da nur ein Header für das Bild erstellt wird.
Suchmaschinen Optimierung
Seit einiger Zeit testeten die großen Suchmaschinen Anbieter wie Google und Yahoo, die Performance von Webseiten. Resultat waren verschiedene Werkzeuge mit denen man selbst die Performance der eigenen Webseite feststellen kann. Google Tool Page Speed. Die Auswirkungen werden unserer Meinung nach enorm sein. Es werden Seiten mit schlechter Seitenqualität im technischen Sinn niedriger gerankt werden. Somit fallen viele Webseiten durch den Suchmaschinen Raster und müssen sich mit niedrigeren Plätzen bei den Suchergebnissen zufrieden geben.
Wann lohnen sich Css Sprites?
Sobald auf Ihrer Webseite mehr als 6 Bilder per Css geladen werden.
Wie erstelle ich Css Sprites?
Sie benötigen eine Grafik Programm z.B. Gimp / Photoshop oder ähnliche. Einen Texteditor mit dem Sie Html Dateien bearbeiten können. Am besten auch den Mozilla Firefox Browser mit dem Firebug Plug-in und am besten das Page Speed Plug-in von Google.
Tutorial Css Sprites
Damit Sie den Einstieg in das Thema "Css Sprites" schneller finden, haben wir Ihnen ein leicht nachvollziehbares Tutorial geschrieben. Wir nehmen als einfaches Beispiel das obere Menü (Topmenu).
