Unser Blog wurde in den vorangehenden Tutorials bereits gut ausgebaut. Er hat Eine Übersichtsseite, Einzelseite, und arbeitet mit Statischem Caching. Nur die Bilder sind noch nicht ideal. Sie werden teilweise zu gross geladen und haben keine srcset gesetzt. Auch verwenden wir eine Bildgrösse für alle Endgeräte.

Im diesem Beitrag tauchen wir ein in die Möglichkeiten von Statamic Bilder zu bearbeiten, responsive auszugeben und zu cachen. Wir verwenden Glide und das Responsive Images Addon von Spatie um die Ladezeit der Webseite weiter zu steigern.

Responsive Bilder und srcset

Viele verstehen unter responsiven Bildern, dass sie sich der grösse des Screens anpassen und ihre Aspect-Ratio beibehalten. Das Bild wird in der ursprünglichen Grösse vom Server geladen und anschliessend vom Browser auf die Grösse des Screens herunter gerechnet. Meist wird dies mit der CSS-Anweisung max-width: 100%; height: auto; erreicht.

Seit gut fünf Jahren besteht mit srcset die Möglichkeit, dem Browser mitzuteilen, dass je nach Screengrösse unterschiedliche Bildgrössen auf dem Server zur Verfügung stehen. So können für ein mobiles Gerät ein kleineres Bild geladen werden, also für den Desktop. Dadurch sparen wir uns Bandbreite und unsere Seite werden schneller.

Statamic erleichtert durch die Integration von Glide den Umgang mit Bildern. Bilder können automatisiert auf einen Fokuspunkt zugeschnitten werden und so können aus einem Ursprungsbild mehrere Bilder für unterschiedliche Screens erstellt werden.

Bilder mit Glide manipulieren

Unser Blog verwendet an mehreren Stellen Bilder. Auf der Übersichtseite werden die feautre_images als Teaser verwendet, auf der eigentlichen Beitragsseite wird dasselbe Bild grösser angezeigt. Dazu kommen Bilder im eigentlichen Blogbeitrag. Für die Übersichtsseite können wir ein kleineres Bild laden. Dort wird aufgrund unseres Design niemals das volle Bild verwendet werden. Die maximale Grösse dürfte 450px Breite nicht überschreiten. Entsprechend wollen wir dort ein angepasstes Bild laden. Auch auf der eigentlichen Beitragsseite können wir die maximale Grösse des feautre_image auf 880px beschränken. Im Folgenden das Template für /resources/views/posts/show.antlers.html. Analog können Anpassungen für die Übersicht aller Posts vorgenommen werden.

{{ cache for="1 week" key="post_entries"}}
    <article>
        <h1 class="font-black text-4xl mb-6">{{title}}</h1>
        <div class="mb-2 text-sm">
            Von <address class="inline" rel="author">{{ author:name }}</address>
            veröffentlicht am
            <time pubdate datetime="{{updated_at format="Y-m-d"}}">{{updated_at format="d.M Y" }}</time>
        </div>
        {{ glide :src="feature_image" width="880" fit="crop_focal" }}
            <img src="{{url}}" alt="{{ feature_image:alt }}" width="{{width}}" height="{{height}}" class="responsive min-w-full">
        {{ /glide }}
        <p class="italic my-4 text-xl">{{lead}}</p>
        <div>
            {{ partial:default}}
        </div>
    </article>
{{ /cache }}

Das {{ glide }} Tag nimmt ein Asset Feld oder ein Bildpfad entgegen und verändert das Ursprungsbild entsprechend der width oder height Parameter. So können Bilder einfach auf eine bestimmte Grösse angepasst werden.

Wie das Bild zugeschnitten wird, können User:innen im Control Panel von Statamic selber bestimmen. Sie können einen Focal-Point setzen, der das Zentrum des Bildes markiert und um den herum der Zuschnitt passiert. So wird verhindert, dass ein wichtiges Detail am Bildrand immer abgeschnitten wird.

Wir loggen uns im Control Panel von Statamic ein und navigieren auf Assets und klicken auf eines unserer Bilder. Wir wählen "Set Focal Point" und können nun das Zentrum unseres Bildes wählen. Mit dem Antlers Parameter fit="crop_focal" wird festegelet, dass der Focal Point als Zentrum des Bildes verwendet werden soll.

Responsive images

Bis jetzt können wir Bilder manipulieren. Dies bildet die Grundlage um eine komplexe Choreographien von Zuschnitten für ein Bild zu hinterlegen, so dass je nach Grösse des Screens ein anderes Bild geladen wird. Das Addon von spatie repsonsive-images hat diese Komposition von Glide Operationen in einem Plugin gebündelt. Das Plugin bietet eine Palette an Features, um mit responsiven Bildern zu arbeiten. Wir werden uns hier nur das {{ responsive }} Antlers Tag anschauen. Alles andere findet sich in der Doku des Pugins.

Zuerst fügen wir das Plugin zu unserem Projekt hinzu.

composer require spatie/statamic-responsive-images

Anstatt unserer eigenen Glide Integration greifen wir nun auf das Plugin zurück und verwenden folgendes Snippet um ein Bild mit unterschiedlichen Sources, mit unterschiedlichen srcset's und einem eingebetteten Vorschaubild zu generieren.

{{ responsive:feature_image glide:width="880" glide:fit="focal" }}

Das Ergebnis erinnert stark an die Bildeffekte von Medium. Zuerst werden verschwummene Farbkleckse geladen, die dann durch das Bild ersetzt werden. Die Bilder werden auch nicht mehr nur als jpg oder png ausgeliefert, sondern stehen für den Browser als webp zur Verfügung. All dies erhöht die Userexperience und schafft ein schnelles und attraktives Erlebnis.

Bilder Cachen

Die Bilder werden von Statamic On-The-Fly generiert. Das {{ glide }} Tag generiert nichts anderes als eine URL über die das Bild mit den jeweiligen Parameter abgerufen werden kann. Der Bilder-Endpoint generiert dann das Bild dynamisch für jeden Aufruf. Dies erzeugt Last auf den Server. Die zugrundeliegende GD-Bibliothek muss ziemlich viel rechnen, um die Bilder zu transformieren.

Die neu generierten Bilder können auch gecached werden. Dies wird von Statamic und den Macher:innen des responsive-image Addons nicht als Standard empfohlen. Das Caching kann schnell viel Platz auf der Festplatte einnehmen. Auch verliert man an Dynamik und ist an das Bild im Cache gebunden. Soviel vorne weg. Wir werden trotzdem das Caching für Bilder aktivieren.

In der Konfiguration /config/statamic/assets.php kann das Caching aktiviert werden. Dazu setzen stellen 'cache' => true. Wenn wir nun unsere Seite neu laden, werden die Bilder im Cache abgespeichert. Jede weitere Aufruf lädt dann direkt dieses Bild. Das Resultat ist eine sehr schnelle Seite, die Bilder in der richtigen Grösse lädt und einen Lighthouse-Score von 100 Punkten erreicht