Slice

Slice

Copyright © Unsplash / Vitalii Chernopyskyi

Was ist ein Slice?

Ein Slice, auf Deutsch ein Stück oder wörtlich eine Scheibe, bezeichnet einen Teil eines Bildes oder einer Grafik, die bei der Erstellung von Webseiten verwendet werden, um die Ladezeiten zu verkürzen. Beim sogenannten Slicen werden Grafiken und Bilder in definierte Stücke zerteilt, bevor sie in ein CMS (Content Management System) eingebunden oder als Teil einer Webseite auf den Webspace hochgeladen werden.

Anwendungsbereiche der Slice Technik

Das Aufteilen von Bildern in einzelne Slices kann je nach Zielsetzung als Teil der generellen Bildoptimierung, als eine Maßnahme im Rahmen der OnPage- und technischen Suchmaschinenoptimierung oder als Teil der Layouterstellung für eine Webseite angesehen werden.

Bereits bei der Projektierung einer Webseite und der Auswahl der geeigneten Designwerkzeuge sollten Slices bereits in Betracht gezogen werden. Neben der Suchmaschinenoptimierung von Bildern durch das Hinzufügen von Auszeichnungen und Zusatzinformationen, ist die Technik des Slicens nach wie vor ein mächtiges Werkzeug für die Erstellung von ansprechenden Layouts für Webseiten. Auch für die nachträgliche Optimierung von Bildern bereits fertig erstellter Webseiten können Slices genutzt werden.

Anwendung des Slicens im Webdesign

Obwohl mittlerweile andere Werkzeuge zur Verfügung stehen, wird die Technik des Slicens nach wie vor von Webdesignern angewendet. Das Seitenlayout einer Webseite wird von den Designern zunächst in einem Bildbearbeitungsprogramm wie in Photoshop oder Illustrator entworfen, bevor das Layout in ein anderes Programm übertragen wird, mit dem anschließend der HTML Code erstellt werden kann.

Die meisten professionellen und kostenpflichtigen Programme wie Photoshop, Illustrator oder Adobe Muse und einige als Open-Source-Software erhältliche Bildbearbeitungsprogramme wie Gimp enthalten Tools und Werkzeuge, mit denen unterschiedliche Bilder und Grafiken individuell designt und optimal gestaltet werden können.

Die speziellen Slice-Werkzeuge werden genutzt, um Bilder in mehrere einzelne, nicht mehr unmittelbar miteinander verbundene Teile zu unterteilen. Wie groß jeder Silce sein soll und in wie viele Teilstücke ein Bild unterteilt werden soll oder muss, ist in erster Line von der Größe des Bildes und von der Website abhängig, in die das geteilte Bild integriert werden soll.

Funktionsweise der Slice Technik

Anwender der Slice Technik können zum Beispiel in Photoshop festlegen, wie die Anzeige der Slice-Daten im Webbrowser erfolgen soll, nachdem sie in eine HTML-Datei exportiert wurden. Zudem ist es möglich, direkt beim Erstellen eines Slices zusätzliche Informationen anzugeben.

Mögliche Informationen, die einem Slice gewissermaßen mitgegeben werden können, sind ein Name, eine URL, die als Link beim  Klick auf einen Slice genutzt wird, sowie ein sogenannter Alt-Tag. Der Alt-Tag, mit dem eine alternative Bildbeschreibung in Textform angegeben werden kann, wird benötigt, falls das Bild nicht im Browser angezeigt werden kann.

Der Webseitenbesucher sieht dann den Inhalt des Alt-Tags. Allerdings kann der Alt-Tag nur für das ganze Bild, nicht aber für einen einzelnen Slice angegeben werden. Darüber hinaus ist es möglich, die Maße bei jedem Slice zu verändern und ein Hintergrundbild und eine Hintergrundfarbe ebenfalls für jeden einzelnen Slice festzulegen.

Bildbearbeitungsprogramme ermöglichen es, die ausgewählten Slices einzeln oder zusammen in einer Datei zu speichern. Die von den Slice Werkzeugen gespeicherten Gesamtdateien enthalten alle ausgewählten Slices, sodass sich das Gesamtbild ergibt. In Photoshop nennt sich diese Funktion “Für Web und Geräte speichern”.

Die Funktion “Für Web und Geräte speichern” erlaubt es dem Designer, das HTML-Format oder andere Formate für die Speicherung der Datei auszuwählen. Wird das HTML-Format gewählt, erzeugt das Programm automatisch den erforderlichen HTML-Quellcode, mit dem die zerteilten Bilder eingebunden werden können.

Dadurch sparen Webdesigner einen nicht unerheblichen Teil der Arbeit. Zudem kann der HTML-Quellcode nachträglich bearbeitet und bei Bedarf verändert werden. Grundsätzlich ist eine Überprüfung des Quellcodes auf eine korrekte Umsetzung empfehlenswert.

Zusätzlich zur Auswahl der Dateiformate können noch weitere Einstellungen wie Bildqualität und Bildgröße oder auch, ob das Bild weich gezeichnet werden soll, vorgenommen werden, bevor die Bilddatei gespeichert wird. Je nach späterem Verwendungszweck, beispielsweise in einer Webseite, können Bilder so ohne Programmieraufwand optimiert und in einem geeigneten Format gespeichert werden.

Die Technik des Slicens ermöglicht es den Designern, die leistungsfähigen Layout- und Designfunktionen der Bildbearbeitungsprogramme nutzen zu können, um an den kreativen Aspekten des Layouts der Seite zu arbeiten. Sobald das Design einer Webseite erstellt ist, kann das Layout dann einfach übertragen werden.

Möglicher Einfluss des Slicens von Bildern auf die Bewertung einer Webseite durch Google

Bei der richtigen Anwendung des Slicens können Bilder so zerteilt werden, dass sich die Ladezeit einer Webseite erheblich verkürzt. Dabei empfiehlt es sich, die Slices so auszuwählen, dass das Bild oder die Bilder für die Darstellung vor allem auf mobilen Endgeräten im Bereich Above the Fold optimiert werden. Der Besucher einer Webseite bekommt zunächst diese optimierten Bildteile angezeigt.

Die nachzuladenden Bildteile haben dann keinen negativen Einfluss auf die Ladezeit der Webseitenteile, die für das Rendern der Ansicht des Above the Fold Bereiches erforderlich sind. Auf diesen Aspekt legt zum Beispiel das Testtool PageSpeed Insights von Google besonderen Wert. Damit entspricht eine auf diese Weise gestaltete Webseite der Anforderung von Google nach möglichst kurzen Ladezeiten und bietet Nutzern die vom Suchmaschinenkonzern geforderte positive Nutzererfahrung (zumindest hinsichtlich der Ladezeit).

Das Slicen sollte jedoch mit Bedacht genutzt werden und erfordert ein gewisses Maß an Erfahrung auf der Seite des Anwenders. Werden zu viele Slices erstellt, kann dies bei der Kommunikation zwischen Server und Client beim Abruf einer Webseite zu überflüssigen Metadaten führen. Zu viele unnötige Metadaten bedeuten, dass die Zahl der http requests unnötig erhöht wird, was dem Bestreben, die Kommunikation zwischen Server und Client auf ein Minimum zu reduzieren, zuwiderläuft.

Es ist daher empfehlenswert, die Entscheidung, ob Slices und wenn ja, wie viele Slices verwendet werden sollen, durch vergleichende Tests des Page Speed mit unterschiedlichen Versionen einer Webseite zu überprüfen.

Die Geschichte des Slicens

Die Technik des Slicens wurde, soweit bekannt, etwa Mitte der 1990er-Jahre erstmals angewendet. Die Technik wurde genutzt, um das Layout von damals in der Regel auf Basis von HTML-Tabellen erstellten Webseiten zu kreieren. Anfänglich wurden die Bilddateien mit Maskierungs- und Freistellwerkzeugen aufgeteilt. Diese Arbeit war allerdings mühselig und ungenau. Bildbearbeitungsprogramme wie ImageReady oder Fireworks waren die ersten Programme, die Designern 1998 eigens entwickelte Slice-Werkzeuge für die präzise Aufteilung der Bilder sowie die Übertragung in HTML-Code zur Verfügung stellten. Obwohl die Technik des Slicens aus Sicht des Webdesigns alt und fast ein Anachronismus ist, wird die Technik von vielen Webdesignern bei der Layout-Gestaltung nach wie vor genutzt.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte