Bilder ohne fremdes CDN

Ein paar meiner älteren Beiträge hatten Titelbilder, die von einem fremden Dienst kamen — Adressen mit langen Signaturen im Anhang, entstanden, weil ich die Bilder irgendwo hochgeladen und den Link kopiert hatte.

Diese Signaturen hatten ein Ablaufdatum. Irgendwann waren die Bilder weg, und was blieb, waren kaputte Platzhalter in Beiträgen, die ich nicht mehr anfassen wollte.

Warum das mehr ist als ein kaputtes Bild

Man verliert die Kontrolle über den eigenen Inhalt. Ein Beitrag, dessen Bilder von einem fremden Dienst kommen, ist nur so dauerhaft wie dieser Dienst.

Man verrät seine Besucher. Jeder Aufruf eines eingebetteten Bildes ist eine Verbindung des Besuchers zu diesem Dienst — mit Adresse, Browserkennung und dem Verweis darauf, welche Seite er gerade liest.

Man kann nichts optimieren. Größenvarianten, moderne Formate, Zwischenspeicherung — alles außerhalb der eigenen Kontrolle.

Der Aufbau, für den ich mich entschieden habe

Ein eigener Ablageort für Medien mit einer Tabelle davor.

CREATE TABLE medien (
  id          TEXT PRIMARY KEY,
  dateiname   TEXT NOT NULL,
  typ         TEXT NOT NULL,
  breite      INTEGER,
  hoehe       INTEGER,
  groesse     INTEGER NOT NULL,
  pruefsumme  TEXT NOT NULL,
  hochgeladen TEXT NOT NULL
);

Drei Entscheidungen daraus haben sich bewährt:

Die Kennung ist die Adresse, nicht der Dateiname. Ein Bild liegt unter /medien/<kennung>. Damit kann man die Datei austauschen, ohne dass sich Verweise ändern, und der ursprüngliche Dateiname — der oft Unsinn enthält — steht nicht in der Adresse.

Eine Prüfsumme über den Inhalt. Damit erkennt man beim Hochladen, ob ein Bild schon existiert. Bei mir hat das ein Drittel aller Uploads als Dubletten entlarvt.

Größenvarianten werden bei Bedarf erzeugt und zwischengespeichert. Nicht beim Hochladen, weil man da nicht weiß, welche Größen gebraucht werden.

Was beim Ausliefern zählt

Passende Größe statt großer Datei. Ein Vorschaubild in einer Übersicht braucht keine 3000 Pixel Breite. Das Bildelement kann mehrere Quellen angeben, und der Browser wählt.

Moderne Formate mit Rückfallebene. Deutlich kleiner bei gleicher Qualität, mit einem klassischen Format als Absicherung.

Feste Größenangaben. Ohne Breite und Höhe springt die Seite beim Laden, weil der Platz erst reserviert wird, wenn das Bild da ist. Das ist der häufigste Grund für dieses unangenehme Verrutschen beim Lesen.

Verzögertes Laden für alles, was nicht sofort sichtbar ist — und ausdrücklich kein verzögertes Laden für das oberste Bild, weil das den ersten sichtbaren Eindruck verlangsamt.

Der Umgang mit den alten Beiträgen

Die kaputten Bilder in älteren Beiträgen habe ich nicht ersetzt, sondern entfernt. Die Originale hatte ich nicht mehr, und ein nachträglich erfundenes Bild fand ich unehrlich.

Was ich stattdessen gebaut habe: Wenn ein Beitrag kein Titelbild hat, zeigt die Übersicht einen ruhigen Platzhalter mit dem Anfangsbuchstaben des Titels. Das ist besser als ein kaputtes Bild und besser als ein Loch im Layout — und es hat den Nebeneffekt, dass ich mich nicht mehr verpflichtet fühle, für jeden Beitrag ein Bild zu suchen.

Was ich über Bildformate gelernt habe

Beim Umbau habe ich mich zum ersten Mal ernsthaft mit Formaten beschäftigt, und das Ergebnis war eindeutiger als erwartet.

Für Fotos bringt ein modernes Format bei gleicher wahrgenommener Qualität grob ein Drittel weniger Daten als das klassische. Bei einem Titelbild sind das schnell einige hundert Kilobyte.

Für Grafiken mit wenigen Farben — Diagramme, Bildschirmfotos von Oberflächen — ist der Unterschied noch größer, und verlustfreie Formate schlagen verlustbehaftete deutlich.

Für alles Vektorbasierte ist die Antwort ohnehin ein Vektorformat, und der Unterschied ist keine Verbesserung, sondern eine Größenordnung.

Was ich dabei unterschätzt hatte: Die Auswahl der richtigen Größe schlägt die Auswahl des richtigen Formats. Ein Foto in doppelter Anzeigegröße im besten Format ist größer als dasselbe Foto in passender Größe im schlechteren. Erst die Größe, dann das Format.

Der Aufräumteil, den ich unterschätzt habe

Beim Umzug der Bilder in die eigene Ablage habe ich festgestellt, wie viel Müll sich angesammelt hatte.

Dubletten in mehreren Größen. Bilder, die zu gelöschten Beiträgen gehörten. Testdateien mit Namen wie „unbenannt-3". Insgesamt deutlich mehr Dateien, als es Verwendungsstellen gab.

Aufgeräumt habe ich mit einem Abgleich: alle Verweise aus Inhalten einsammeln, mit dem Bestand vergleichen, den Rest auflisten. Nicht automatisch löschen — die Liste habe ich durchgesehen, weil ein Bild auch von außen verlinkt sein kann.

Dieses Vorgehen, alles Nicht-Referenzierte zu suchen und zur Prüfung vorzulegen statt es zu entfernen, hat sich bei mir mehrfach bewährt: bei Bildern, bei Datenbankeinträgen, bei Dateien auf Servern. Automatisches Aufräumen ist gefährlich, und eine Liste zum Durchsehen kostet zwanzig Minuten.

Was ich beim Ausliefern eingestellt habe

Ein paar konkrete Werte, die sich bewährt haben — sie sind der Unterschied zwischen einer Seite, die schnell lädt, und einer, die es nicht tut.

Sehr lange Gültigkeit für Bilder mit Kennung in der Adresse. Weil eine Kennung immer denselben Inhalt bedeutet, kann ein Browser sie unbegrenzt behalten.

Kurze Gültigkeit für Seiten. Sie ändern sich, und ein zu lange zwischengespeicherter Inhalt ist unangenehmer als ein paar Anfragen mehr.

Passende Größen im Bildelement angeben. Ohne diese Angabe lädt der Browser die größte Fassung, auch auf einem schmalen Bildschirm.

Breite und Höhe immer setzen. Sonst springt die Seite beim Laden — der häufigste Grund für dieses unangenehme Verrutschen beim Lesen.

Der letzte Punkt ist der, der am wenigsten mit Datenmenge zu tun hat und am meisten mit dem Eindruck. Eine Seite, die beim Laden nicht springt, wirkt schneller als eine, die es tut — auch wenn beide gleich lange brauchen.

Was ich mitnehme

Alles, was zu einem Inhalt gehört, sollte an derselben Stelle liegen wie der Inhalt. Wenn Text und Bilder unterschiedliche Lebensdauern haben, zerfällt ein Beitrag mit der Zeit.

Und: Ich habe seitdem einen Reflex bei jeder externen Adresse in meinen Inhalten. Wenn dort eine Signatur oder ein Ablaufdatum drinsteht, ist es keine Adresse, sondern eine Leihgabe.