Slices

Als Slices (deutsch: Stücke) werden Teile von Bildern und Grafiken bezeichnet, die zum Zwecke der Optimierung von Website-Ladezeiten gebildet werden. Die Bilder oder Grafiken einer Website werden in bestimmte Teile zerstückelt, bevor sie auf den Server oder in das Content Management System hochgeladen werden. Ruft ein Nutzer die Website auf, baut diese sich schneller auf als dies mit Bildern oder Grafiken der Fall wäre, die nicht zerstückelt wurden. Slices sind eine Option zur Bildoptimierung, die vor der Liveschaltung einer Website erfolgen muss. Das Resultat besteht darin, dass die Ladezeiten geringer ausfallen können, wenn die Slices die richtige Größe haben und korrekt wieder zusammengefügt wurden. Programme wie Adobe Photoshop bieten Slice-Werkzeuge an, mit denen die Unterteilung von Bildern umgesetzt werden kann. Meist werden Slices jedoch beim Design des Layouts verwendet.

Allgemeine Informationen zum Thema

Die Zerstückelung von Bildern in Slices kann den Bereichen Bildoptimierung, aber auch OnPage Optimierung, technische Suchmaschinenoptimierung oder Design zugeordnet werden. Denn Slices werden üblicherweise während der Projektierung in Betracht gezogen: Beim Aufsetzen der Inhalte auf einen Server sind Slices nur eine von vielen Optionen, die Webmaster und Designer ergreifen können. Neben dem Bilder SEO, das spezielle Auszeichnungen und semantische Zusatzinformationen für Bilder vorsieht, setzen Slices dort an, wo das Design einer Website anfängt: Bei der Gestaltung des Layouts. Das bedeutet jedoch nicht, dass Slices nicht auch beim Hochladen von neuen Bildern verwendet werden können.

Funktionsweise

Die meisten Bildbearbeitungsprogramme bieten Tools und Werkzeuge an, mit denen Bilder, Grafiken, Thumbnails und Logos optimiert und designt werden können. Das Slice-Werkzeug dient dazu, ein Bild in bestimmte Segmente zu unterteilen. Wie viele Bildteile gewählt werden, ist zum einen vom Bild selbst abhängig und zum anderen von der Website, auf der das zerstückelte Bild später erscheinen soll. Es ist empfehlenswert, die Slices sinnvoll zu wählen und die Unterteilung des Bildes auf den Above the fold-Bereich der Website anzupassen: Der Nutzer sieht dann genau die Bilder, die für diesen Bereich optimiert beziehungsweise zerstückelt wurden. Die Bildteile, die erst später geladen werden müssen, würden nur die Ladezeit erhöhen.

Beim Erstellen der Slices können direkt Zusatzinformationen angegeben werden. Dazu zählen unter anderem:

• Der Name der Bilddatei oder des jeweiligen Slices.
• Eine URL, die als Hyperlink bei einem Klick auf den Bildteil fungiert.
• Ein Alt-Tag, das eine alternative Bildbeschreibung liefert (nur ein Alt-Tag pro Gesamtbild angeben).
• Zudem können die Maße und ein Hintergrundbild mit Hintergrundfarbe des jeweiligen Slices verändert werden.

Sobald alle Slices ausgewählt wurden, können diese einzeln oder als Gesamtes abgespeichert werden. Die meisten Slice-Werkezuge speichern sodann die Slices mit einer Gesamtbilddatei ab, in der sich alle gewählten Slices zu einem ganzen Bild zusammenfügen. Zum Beispiel mit der Funktion "Für Web und Geräte speichern": Hier können HTML und weitere Formate aus einem Reiter gewählt werden. An dieser Stelle können zudem weitere Einstellungen vorgenommen werden: Format, Qualität, Bildgröße oder Weichzeichnen. All diese Optionen sind natürlich davon abhängig, was mit den Slices nach deren Erstellung geschehen soll. Handelt es sich um ein Design für eine Website, ist es angebracht, die Slices als HTML und Bilddateien zu speichern. Sollen nur Bilder optimiert werden, dürften andere Optionen ausreichen.

Ein entscheidender Vorteil bei der Erstellung von Websites sind Slices genau dann, wenn sie für das Design verwendet werden. Denn Werkzeuge wie Photoshop erstellen automatisch den dazugehören HTML-Quellcode, in den die zerstückelten Bilder eingebunden und verändert werden können. Beim Kodieren von Layouts erleichtern sie maßgeblich die Arbeit. Der erzeugte HTML-Quellcode sollte dennoch überprüft werden.

Bedeutung für das Online Marketing

Bilder können unter anderem verkleinert, komprimiert und in Sachen Qualität und Pixeldichte optimiert werden. Slices verfolgen einen anderen Ansatz, der die Größe der einzelnen Slices betrifft: Eine Bilddatei kann auf diese Weise zerstückelt werden, was sich direkt auf die Ladezeiten auswirken kann – auch wenn das aktuell kritisch gesehen wird. Wie bereits erwähnt sollte, wenn überhaupt der Above the fold-Bereich im Fokus stehen. Wenn das Bild zerteilt wird, werden bei der HTTP-Kommunikation zwischen Server und Client nur die Segmente geladen und nicht die gesamte Bilddatei. Nutzer können währenddessen sehen, dass sich die Website aufbaut – was insbesondere für bildlastige Websites sinnvoll sein kann. Für mobile Endgeräte gilt dies natürlich ebenfalls. Dieser Ansatz macht es wahrscheinlicher, dass Nutzer auch bei größeren Bilddateien auf der Website bleiben.

Allerdings kann übermäßiges Slicen auch dazu führen, dass die HTTP-Kommunikation zu viel Overhead (unnötige Metadaten) produziert, der nicht notwendig ist. Denn die erste Regel einer Optimierung besagt, dass die HTTP-Kommunikation auf ein Minimum reduziert werden sollte. Einige Browser erlauben zudem nur eine bestimmte Anzahl an Verbindungen pro Sitzung. Und die Alt-Tags sollten stets nur für die ursprüngliche Bilddatei ausgefüllt werden, wenn Slices zum Einsatz kommen – nicht etwa für jeden Slice. Ob und inwiefern Slices sich für Webprojekte anbieten, sollte durch Vergleiche entschieden werden. So kann der Page Speed beispielsweise überprüft werden, wenn zwei Testversionen erstellt werden. Für die meisten Szenarien erscheint das Slicen nicht unbedingt als die modernste Lösung. Als Methode zur Layout-Gestaltung sind Slices aber nach wie vor beliebt. Doch das hat nur in geringem Maße mit der Bildoptimierung zu tun.

Weblinks

• Slices Definition
• Slice Definition
• Erklärungsvideo: Slices in Photoshop richtig erstellen
• Slicing Webpages
• Tipps Bilder SEO
• Tipps Bilder SEO