Slice

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