Bilder einer im Internet aufgerufenen Webseite müssen vom Browser geladen werden - das kostet Zeit und Zeit ist nicht nur im Internet Geld. Das Laden von Bildern kostet Ladegeschwindigkeit und zu langsam ladende Seiten vertreiben Seitenbesucher. Auch suchmaschinentechnisch ist das ein Problem, denn solche Seiten ranken bei Google & Co schlechter.

So wie der mitgelieferte Image Stack in Stack 3 mit Bildern umgegangen ist, konnte vor diesem Hintergrund problematisch sein. Denn diese Bilder wurden direkt in die jeweilige Seite geschrieben und mussten deshalb  bei einen neuen Seitenaufruf, der das gleiche Bild enthalten sollte, neu geladen werden. Zu lösen war das nur, indem man auf andere Stacks auswich.

Das Zauberwort hiess hier "Warehousing" von Bildern. Den Begriff erkläre ich hier nicht im Detail, nur so viel: Warehousing-Bilder werden in einem definierten Verzeichnis deiner Webseite abgelegt und egal auf welcher Seite  dieses Bild angezeigt werden soll, es wird über dieses Verzeichnis eingebunden und auch aus diesem Verzeichnis geladen. Einmal vom Browser verarbeitet, muss der es bei einem erneuten Aufruf nicht mehr nachladen, sondern holt es sich aus eben diesem Verzeichnis. Das spart umgemein Ressourcen und Ladezeit.

Den alten mitgelieferten Image Stack gibt es nach wie vor und hier hat sich auch nichts geändert. Nun gibt es zusätzlich einen neuen Stack, den Site Image Stack. Bilder, die hier hineingezogen werden, werden im Verzeichnis Resources abgelegt - von hier werden sie dann vom Browser geladen und das ist genau jenes Warehousing, von welchem ich soeben schrieb. Du kannst dich davon überzeugen, wenn du nach dem Einfügen eines Bildes über den Site Image Stack einmal in den Resources Ordner schaust (⌘ - 4). Wenn du Bilder direkt in die Arbeitsfläche ziehst, werden die nun automatisch in einen Site Image Stack gelegt.

Diese neue Art der Bildverwaltung erkennt sogar, wenn du das gleiche Bild ein zweites Mal einfügst - voraus gesetzt, es hat den gleichen Dateinamen (dazu gleich mehr).

Noch mal zur Übersicht:

  • Der Image Stack legt Bilder in einem seitenspezifischen Verzeichnis /files/ ab. Sie müssen bei jedem einzelnen Seitenaufruf neu geladen werden. Diesen Stack verwendest du, wenn du ein bestimmtes Bild nur auf dieser einen Seite einfügen möchtest

  • Der Site Image Stack legt Bilder in das projektübergreifende Verzeichnis /resources/. Von hier können sich auch andere Seiten das Bild holen, es muss also nur einmal vom Browser geladen werden. Diesen Stack verwendest du, wenn du das gleiche Bild auf mehreren Seiten nutzen möchtest


Jetzt gibt es aber zwei mehr oder minder folgenreiche "Probleme" bei der Verwendung des Site Image Stack - nicht wirklich ein Problem, aber du solltest es wissen:

  • Wenn du einen Stack mit einem Bild löschst, löscht du ihn zwar aus der jeweiligen Seite, nicht aber aus dem Verzeichnis Resources. Aus dem Resources-Verzeichnis musst du ihn manuell löschen - allerdings: Wenn er da weg ist, ist das Bild auf allen Seiten, auf denen du es benutzt hast, nicht mehr darstellbar

  • Idealerweise vergibst du dem Bild vor dem Einfügen einen aussagefähigen Namen. Unter dem wird es auch im Resources-Verzeichnis abgelegt. Wenn du nun ein anderes Bild mit im Resources Verzeichnis bereits vorhandenem Dateinamen einfügst, hast du ein Problem: Der Stack denkt "Upps, das Bild ist ja schon vorhanden" und verarbeitet das bereits vorhandene. Also schön darauf achten, dass alle Bilder unterschiedliche Datreinamen haben (wie das bei einer Unzahl von Bildern bewältigt werden soll, kann ich leider auch nicht verraten - vielleicht wird da noch etwas nachgebessert)

Dass Bilder hinsichtlich Datei- und Pixelgröße vor dem Einfügen hinreichend aufbereitet werden sollten, versteht sich von selbst.

Alles nicht so einfach...

Bildquelle: Pexels