Schnelle Seiten: Bilder und Schriften richtig einbinden

Eine CMF-Seite ohne Bilder ist in Sekundenbruchteilen da. Was eine Seite schwer macht, sind fast immer Bilder und Schriften. Mit ein paar Handgriffen beim Hochladen bleibt sie trotzdem leicht – ganz ohne Build-Tool oder Plugin zur Bildoptimierung.

Fotos gehören ins JPEG- oder WebP-Format, Grafiken mit wenigen Farben und klaren Kanten ins PNG- oder SVG-Format. WebP ist dabei fast immer die kleinere Wahl: Der Editor-Screenshot auf unserer Startseite wog als PNG 256 KB, als WebP 32 KB – bei gleicher Größe und ohne sichtbaren Unterschied. Der Medienbereich nimmt JPG, PNG, WebP, GIF und SVG direkt an.

Lade Bilder außerdem nicht größer hoch, als sie angezeigt werden. Ein Beitragsbild in der News-Übersicht braucht keine 4000 Pixel Breite; die Blätter über diesen Beiträgen haben 1024 × 1024 Pixel.

Der Bild-Block kennt eine Einstellung, die viel ausmacht: Loading. Mit „lazy“ lädt der Browser ein Bild erst, wenn es in die Nähe des sichtbaren Bereichs kommt – richtig für alles unterhalb des ersten Bildschirms. Für das große Bild ganz oben ist „eager“ die bessere Wahl, damit es sofort erscheint.

Breite und Höhe (width und height) verhindern, dass die Seite beim Laden springt: Der Browser reserviert den Platz, bevor das Bild da ist. Du setzt sie über die API am Bild-Block. Seit Version 1.17.0 bleiben sie auch erhalten, wenn die Seite danach im visuellen Editor gespeichert wird.

Logos und Symbole sind als SVG unschlagbar: wenige Kilobyte, gestochen scharf auf jedem Bildschirm. Weil eine SVG-Datei aber auch Code enthalten kann, bereinigt das CMF jede hochgeladene SVG. Skripte, Event-Handler und Verweise auf fremde Server fliegen raus, die Farben aus Illustrator- oder Inkscape-Exporten bleiben erhalten. Lässt sich eine Datei nicht sicher bereinigen, lehnt das CMF sie ab.

Für die Vorschau in sozialen Netzwerken taugt SVG nicht – dort zeigen die meisten Dienste nichts an. Als Vorschaubild gehört ein PNG oder JPEG in og_image der Site-Einstellungen oder in meta.image einer Seite.

Eigene Schriften sind schön, aber jeder Schnitt ist eine eigene Datei. Das CMF bindet deshalb nur die beiden Schriftfamilien ein, die im Theme gewählt sind, und zeigt den Text sofort in einer Systemschrift an, bis die eigene geladen ist.

Seit Version 1.17.0 enthält das Download-Paket alle mitgelieferten Schriften zusätzlich als WOFF2, das kompakteste Format, das alle aktuellen Browser verstehen. Liegt ein Schnitt in mehreren Formaten vor, nennt das Theme beim nächsten Speichern WOFF2 zuerst und TTF als Rückfall. Auf dieser Seite sank das Gewicht der Schriften damit von 356 auf 137 KB. Eigene Schriften legst du am besten ebenfalls als WOFF2 in den Schriften-Ordner.

Wie das Theme Farben und Schriften verwaltet, steht im Beitrag Ein System, fünf Gesichter. Was sonst noch zählt, damit eine Seite gefunden wird: Gefunden werden ohne SEO-Plugin.