Astro-Entwickler in Leipzig

#Bilder und Schriften sind meist der größte Hebel

Auf vielen Firmenseiten ist das größte Element im sichtbaren Bereich ein Foto, und die Schrift kommt von einem fremden Server. Beides lässt sich in Astro im Projekt selbst regeln. Diese Seite zeigt, wie ich das aufsetze: die Bildkomponenten aus astro:assets, responsive Layouts, fremde Bildquellen, den Bilddienst Sharp, selbst gehostete Schriften und die Messung des LCP.

Ich bin Mariusz Szatkowski, ein einzelner Entwickler, arbeite mit WordPress seit 2006 und baue Astro-Seiten für Firmen in Leipzig und im Rest Deutschlands. Ich arbeite ausschließlich schriftlich und aus der Ferne. Fotos, Layout und Gestaltung liefern Sie; ich setze sie um. Wie ein Projekt bei mir abläuft, steht weiter unten. Alle Angaben zu Astro stammen aus der Astro-Dokumentation, die zu LCP von web.dev.

Foto: Michielverbeek, CC BY-SA 3.0 de, Wikimedia Commons.

#Was ein Leipziger Verlag oder Veranstalter an Bildern mitbringt

Die Leipziger Buchmesse findet nach Angabe des Veranstalters vom 18. bis 21. März 2027 auf dem Leipziger Messegelände statt (Stand November 2026); ideeller Träger ist der Börsenverein des Deutschen Buchhandels. Ein Verlag, der dazu eine Seite pflegt, bringt viele Titelbilder und Autorenfotos mit, jedes in einer anderen Größe und oft als großes Original. Genau dafür ist die Bildverarbeitung gedacht. Das gilt ebenso für einen Handwerksbetrieb mit Referenzfotos oder eine Praxis mit Teambildern.

Wie eine bestehende Mediathek bei einem Systemwechsel mitgeht, beschreibt die Seite Bilder und Medien bei der Migration (Wien). Ich wiederhole das hier nicht.

#Image oder Picture: was ich wann nehme

Die Astro-Dokumentation beschreibt zwei Komponenten aus astro:assets. <Image /> zeigt optimierte Versionen eines lokalen oder eines freigegebenen entfernten Bildes. <Picture /> erzeugt ein <picture>-Element mit mehreren Formaten oder Größen und einem <img> als Rückfall. Bei beiden ist alt Pflicht; für reine Dekoration gilt alt="".

Für ein einzelnes Foto im Textfluss reicht <Image />. <Picture /> nehme ich, wenn Sie ausdrücklich mehrere Formate ausliefern wollen. Ob sich das für Ihre Seite lohnt, entscheidet am Ende die Messung, nicht die Komponente.

#Responsive Layouts: Astro erzeugt srcset und sizes

Seit [email protected] kennen die Komponenten die Eigenschaft layout. Der Wert constrained setzt laut Dokumentation max-width: 100%, full-width setzt width: 100%. Die Dokumentation nennt außerdem fixed und none. Mit einem Layout erzeugt Astro srcset und sizes selbst. Wer das Layout nicht je Bild angibt, kann es global über image.layout setzen; es gilt dann auch für Markdown-Bilder in der Schreibweise ![]().

Die Standard-Stile von Astro greifen nur, wenn image.responsiveStyles auf true steht; der Standardwert ist false. Die Eigenschaften widths und densities erzeugen ebenfalls ein srcset. widths verlangt sizes, die beiden dürfen nicht zusammen verwendet werden, und densities ist laut Dokumentation nicht mit layout kombinierbar.

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  image: {
    layout: "constrained",
    responsiveStyles: true,
  },
});

Welches Layout zu welchem Bereich Ihrer Seite passt, hängt von der Vorlage ab, die Sie mitbringen. Die Spaltenbreiten übernehme ich aus ihr.

#Bilder von fremden Adressen

Liegt ein Teil Ihrer Bilder auf einer anderen Domain, etwa in einem Redaktionssystem, verarbeitet Astro sie nur, wenn die Quelle freigegeben ist. Dafür gibt es image.domains und image.remotePatterns; die Dokumentation zeigt als Beispiel domains: ["astro.build"] und remotePatterns: [{ protocol: "https" }]. Bilder von nicht freigegebenen Quellen zeigt Astro ohne Verarbeitung an. <Image /> verhindert auch dann Layoutsprünge, weil das Element Breite und Höhe setzt.

Bei entfernten Bildern fehlen die Maße zunächst. Dann hilft inferSize, das ab [email protected] existiert: Es liest die Maße aus dem Bild, und seit [email protected] fragt es nur bei freigegebenen Domains ab. Alternativ liefert inferRemoteSize(url) die Maße. Wie Astro und WordPress als Headless-Paar zusammenarbeiten, steht auf der Seite für Wien; welche Quellen eine Content-Security-Policy für Bilder zulassen muss, auf der Seite für Frankfurt.

#Sharp und die Bildverarbeitung auf dem Server

Laut Astro-Dokumentation ist Sharp der Standard-Bilddienst für astro:assets. Bei strengen Paketmanagern wie pnpm kann es nötig sein, Sharp von Hand zu installieren. Unterstützt ein Adapter Sharp nicht, lässt sich passthroughImageService() konfigurieren. Der Bilddienst steht in image.service und ist als { entrypoint: 'astro/assets/services/sharp' } voreingestellt.

Welcher Adapter und welcher Bilddienst zu Ihrem Hosting passen, kläre ich vor dem Start schriftlich und halte es im Umfang fest. Das ist eine Frage des Hostings, nicht des Frameworks. Welche Hosting-Adapter es gibt, beschreibt die Seite für Berlin.

#Schriften ohne Anfrage an Dritte: die Fonts API

Astro registriert Schriften über die Option fonts in der Konfiguration. Jede Schrift braucht name, cssVariable und provider. Zu den eingebauten Anbietern zählen laut Dokumentation Adobe, Bunny, Fontshare, Fontsource, Google, Google Icons und NPM sowie lokale Dateien.

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [
    {
      name: "Poppins",
      cssVariable: "--font-poppins",
      provider: fontProviders.local(),
      options: {
        variants: [
          { src: ["./src/assets/fonts/Poppins-regular.woff2"] },
          { src: ["./src/assets/fonts/Poppins-bold.woff2"] },
        ],
      },
    },
  ],
});

Das Beispiel stammt aus der Astro-Dokumentation. Die Schriftdateien liegen im Ordner src. Im <head> steht <Font cssVariable="--font-poppins" /> aus astro:assets, im CSS verweist font-family: var(--font-poppins) darauf. Die Dokumentation beschreibt, dass die API Schriften herunterlädt und zwischenspeichert, sodass sie von der eigenen Seite ausgeliefert werden; beim Build landen die Dateien in _astro/fonts. Auch bei einem Anbieter wie Google kommen die Dateien demnach von Ihrer Domain. Die Dokumentation merkt an, das könne verhindern, dass Nutzerdaten an Dritte gehen.

Zwei Einstellungen sind für die Ladezeit relevant. Mit preload an <Font /> lädt der Browser eine Schrift vorab; die Dokumentation rät, das sparsam und nur für Schriften im sichtbaren Bereich zu tun. Mit fallbacks legen Sie Ersatzschriften fest. Steht am Ende eine generische Familie, erzeugt Astro daraus eine angepasste Ersatzschrift, um Layoutsprünge zu verringern; mit optimizedFallbacks: false schalten Sie das ab.

#Warum das datenschutzrechtlich zählt

Das Landgericht München I hat am 20.01.2022 unter dem Aktenzeichen 3 O 17493/20 ein Endurteil gesprochen. Der Beklagte musste es bei Vermeidung eines Ordnungsgeldes unterlassen, die IP-Adresse des Klägers durch die Bereitstellung der Schrift von Google (Google Fonts) an Google weiterzugeben. Das Gericht sah die Weitergabe der dynamischen IP-Adresse an Google ohne Einwilligung als Verletzung des Rechts auf informationelle Selbstbestimmung. Eine Rechtfertigung nach Art. 6 Abs. 1 Buchst. f DS-GVO verneinte es mit der Begründung, Google Fonts lasse sich auch ohne Verbindung zu einem Google-Server nutzen. Zugesprochen wurde dem Kläger Schadensersatz für einen immateriellen Schaden nach Art. 82 Abs. 1 DS-GVO. Der Wortlaut steht in der Entscheidungsdatenbank des Freistaats Bayern.

Der Punkt für Ihre Seite: Wenn die Schrift von Ihrer eigenen Domain kommt, gibt es diese Anfrage nicht. Das ersetzt keine Prüfung Ihrer übrigen Einbindungen. Karten, Videos und Analyse-Skripte laden häufig weiter von fremden Servern; die Einwilligungsfrage dazu behandelt die Seite für Köln. Für Datenschutzfragen Ihres Betriebs im Freistaat ist die Sächsische Datenschutz- und Transparenzbeauftragte zuständig, mit Sitz in Dresden. Ein Urteil einer Kammer ist keine Rechtsberatung für Ihren Fall, und ich gebe keine.

#LCP messen, bevor etwas verändert wird

Nach web.dev misst der Largest Contentful Paint, wann das größte sichtbare Element im Darstellungsbereich fertig gerendert ist, gerechnet ab dem Beginn der Navigation. Als Elemente zählen <img>, <image> in einem <svg>, <video> (Vorschaubild oder erstes Bild), Elemente mit einem Hintergrundbild über url() und blockartige Elemente mit Text. Gut ist ein LCP von bis zu 2,5 Sekunden am 75. Perzentil, getrennt für Mobil und Desktop; über 4,0 Sekunden gilt als schlecht. Die Schwellen stehen auch auf der Übersicht zu den Core Web Vitals.

Gemessen wird auf zwei Wegen. Reale Nutzer zeigen der Chrome User Experience Report, PageSpeed Insights, der Bericht zu den Core Web Vitals in der Search Console und die JavaScript-Bibliothek web-vitals. Kontrollierte Tests laufen in den Chrome DevTools, in Lighthouse, in PageSpeed Insights und in WebPageTest. web.dev empfiehlt für die Messung im Skript die Bibliothek web-vitals statt der rohen API, weil die rohe API Einträge enthält, die nicht zählen sollen, etwa aus Hintergrund-Tabs.

Mein Vorgehen: Zuerst stelle ich fest, welches Element auf Ihrer Seite das LCP-Element ist. Ist es ein Bild, setze ich an dieser einen Stelle priority; laut Dokumentation stellt das loading="eager", decoding="sync" und fetchpriority="high" ein. Alle anderen Bilder behalten das Nachladen. Danach messe ich noch einmal und gebe Ihnen beide Werte schriftlich. Ob es etwas ändert, zeigt der Vergleich, eine Zahl nenne ich vorher nicht.

#Checkliste für Bilder und Schriften

Die Liste gilt auch, wenn Sie nie mit mir arbeiten.

#So läuft ein Projekt mit mir

Sie schicken mir die Adresse Ihrer Website, das Ziel, den Termin und den heutigen Stack, dazu die Layoutvorlage, falls es sie gibt. Ich schreibe Fragen zurück, dann einen Umfang mit Annahmen. Gestaltung, Mockups und Wireframes liefern Sie, ich setze sie um. Ich baue auf einer Staging-Adresse, Sie prüfen dort, und nach Ihrer Abnahme geht die Seite live. Auf Wunsch gibt es danach eine Wartung. Ich antworte schriftlich an Werktagen; Termine oder Anrufe biete ich nicht an.

Für den Start brauche ich Zugang zum Quellcode oder zum bisherigen System, die Originale der Fotos in der größten vorhandenen Fassung und die Schriftdateien samt Lizenz. Erlaubt eine Webfont-Lizenz nur den Abruf von einem Anbieter, prüfe ich vorher, ob sie auch das Hosten auf Ihrer Domain deckt.

#Häufige Fragen

#Was passiert mit den Bildern aus der Mediathek meines alten Systems?

Das ist eine Migrationsfrage und hat eine eigene Seite: Mediathek, Bild-URLs und Weiterleitungen beschreibe ich auf der Seite zur Medien-Migration für Wien. Hier geht es nur darum, wie Astro Bilder und Schriften im fertigen Projekt behandelt.

#Muss ich bei Astro jedes Bild mit Breite und Höhe angeben?

Nicht bei Bildern aus dem Ordner src: Dort liest Astro die Maße selbst aus. Für Bilder aus dem Ordner public sind width und height laut Dokumentation Pflicht. Bei Bildern von einer fremden Adresse braucht es die Maße oder inferSize.

#Ist Sharp bei Astro fest eingebaut?

Sharp ist laut Astro-Dokumentation der Standard-Bilddienst für astro:assets. Wo ein Hosting Sharp nicht unterstützt, lässt sich passthroughImageService() einstellen; dann gibt Astro die Bilder ohne Umrechnung aus. Welche Variante bei Ihrem Hosting gilt, kläre ich vor dem Start schriftlich.

#Reicht es, Google Fonts lokal einzubinden, damit die Seite datenschutzkonform ist?

Das Landgericht München I hat am 20.01.2022 entschieden, dass die Weitergabe der IP-Adresse an Google über die dynamisch geladene Schrift ohne Einwilligung eine Rechtsverletzung war. Aus dem Urteil folgt nicht, dass eine lokale Einbindung alle Datenschutzfragen Ihrer Seite löst; sie beseitigt aber genau diese Anfrage an Google. Eine Rechtsberatung gebe ich nicht, die gehört zu Ihrer Datenschutzbeauftragten oder Ihrem Anwalt.

#Kann ich eigene Schriftdateien statt eines Anbieters verwenden?

Ja. Mit fontProviders.local() tragen Sie die Dateien unter options.variants ein; sie liegen im Ordner src. Bei Variablenschriften steht die Gewichtsspanne, etwa 100 bis 900, in weight.

#Welcher LCP-Wert gilt als gut, und wie messe ich ihn?

Nach web.dev gilt ein LCP von bis zu 2,5 Sekunden am 75. Perzentil der Seitenaufrufe als gut, getrennt nach Mobil und Desktop. Reale Nutzerdaten liefern der Chrome User Experience Report, PageSpeed Insights und der Bericht zu den Core Web Vitals in der Search Console; Lab-Werte kommen aus Lighthouse oder den Chrome DevTools.

#Schreiben Sie mir

Schicken Sie mir die Adresse Ihrer Website, das Ziel, den gewünschten Termin und den heutigen Stack. Meine erste Einschätzung bekommen Sie schriftlich und ohne Berechnung. Der Weg zu mir führt über die Kontaktseite.