Web

Bildauslieferung im Edge‑Zeitalter — CDN‑Design 2025

Veröffentlicht: 22. Sept. 2025 · Lesezeit: 4 Min. · Von Unified Image Tools Redaktion

Um Suchtraffic zu steigern, ist schnelle Bildauslieferung Pflicht. Dieser Leitfaden ordnet Edge/CDN‑Designpunkte nach Einsatzfall und liefert eine Checkliste gegen typische Produktionsfehler.

Grundlagen eines Image‑CDN

  1. Transformationseinheiten definieren (Origin vs transformierte Varianten)
  2. Cache‑Key festlegen (URL, Accept, Accept-Encoding, DPR, etc.)
  3. Expiration/Invalidation (Fingerprint, Cache-Control, stale-while-revalidate)
  4. Abstimmung mit Responsive‑Images (srcset/sizes‑Korrektheit)

Interne Links: srcset‑Grundlagen, INP‑fokussierte Auslieferung, Priority Hints & Preload

HTTP‑Header in der Praxis

Cache-Control: public, max-age=86400, stale-while-revalidate=259200
Vary: Accept, DPR
Accept-Ranges: bytes
Timing-Allow-Origin: *
  • Vary: Accept nutzen, um AVIF/WebP/JPEG zu schalten
  • Bei Vary: DPR serverseitig Varianten pro DPR generieren/cachen
  • Für SSG/ISR ist explizites URL‑Versioning am sichersten (z. B. hero-640.avif?v=20250922)

Priority Hints / Early Hints

<!-- Für LCP‑Kandidaten -->
<link rel="preload" as="image" href="/images/hero-1200.avif" imagesrcset="..." imagesizes="(min-width: 1024px) 1200px, 90vw" fetchpriority="high" />
  • Nicht alles als „high“ markieren (kann CLS‑Budgets stören)
  • Wenn verfügbar, 103 Early Hints senden, um früher zu preconnecten/preloaden

Edge‑ vs Origin‑Transforms trennen

  • Edge: häufige Schritte, Breite/Qualität/Format (AVIF/WebP)
  • Origin: teurere, qualitätskritische Schritte (Metadaten, ICC, Alpha‑Compositing)

Tools: Format‑Konverter, Bulk‑Kompression, Placeholder‑Generator

Klassiker der Fehlkonfiguration

  • Vary gesetzt, aber CDN cached nicht (Doppel‑Konfiguration)
  • AVIF an Legacy‑Clients ohne Accept: image/avif → kaputte Indizes
  • Doppelte Transformation durch Optimizer‑Service und App‑CDN → Qualitätsverlust

Checkliste (dauerhaft)

  • [ ] LCP‑Bilder: korrektes fetchpriority und sizes
  • [ ] Cache‑Keys via URL‑Versioning oder Vary
  • [ ] Sicherer Fallback (JPEG) bei Transformationsfehlern
  • [ ] Bild‑alt + strukturierte Daten für Image‑SEO

Details zu Cache‑Keys

  • Vorgeschlagene Keys: URL + Accept + DPR + Width + Quality
  • w/q in Edge‑Funktionen normalisieren (z. B. 320/480/640/…)
  • Antwort‑Header Beispiel:
Cache-Control: public, max-age=604800, stale-while-revalidate=2592000
Vary: Accept, DPR
CDN-Cache-Status: HIT

AVIF/WebP‑Fallback‑Strategie

  1. Nach Accept zuerst AVIF wählen, dann WebP, Fallback JPEG
  2. Serverseitig bei Timeouts/Fehlern → JPEG
  3. Clientseitig hilft <picture> mit type (verwenden Sie srcset type für explizite Auswahl)
<picture>
  <source type="image/avif" srcset="hero.avif 1x, hero@2x.avif 2x" />
  <source type="image/webp" srcset="hero.webp 1x, hero@2x.webp 2x" />
  <img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>

On‑the‑fly‑Resize normalisieren

  • Fixes Breiten‑Set: 320/480/640/768/960/1200/1600/2000, an sizes gebunden
  • Eingehendes w runden, um Cache‑Fragmentierung zu vermeiden
  • Presets für q: Thumbs 60/Fotos 70/UI 80

Sicherheit und Missbrauchsschutz

  • Signierte URLs verhindern ungebremste Transforms (w/h/q/fmt signiert)
  • Rate‑Limit und Circuit‑Breaker bei Fehlern
  • Schwere Filter verbieten, die CPU DoS auslösen können

Observability / Kostenkontrolle

  • Logs: URL, fmt, w, q, dpr, cacheStatus, genTime, size
  • Dashboards: Format‑Hit‑Rates, Median‑Größen, p95‑Generierungszeiten
  • Kosten: heiße Größen vorab; lange TTL zur Entlastung der Origin

Edge‑Funktion (Pseudo)

export default async function handle(req) {
  const u = new URL(req.url)
  const w = normalizeWidth(u.searchParams.get('w'))
  const q = normalizeQuality(u.searchParams.get('q'))
  const fmt = negotiate(req.headers.get('Accept'))
  const key = `${u.pathname}?w=${w}&q=${q}&fmt=${fmt}`
  const cached = await caches.default.match(key)
  if (cached) return cached
  const out = await transform(u.pathname, { w, q, fmt })
  return new Response(out.body, { headers: responseHeaders({ fmt, w, q }) })
}

Troubleshooting

  • Kein Bild in alten Browsern → Accept‑Verhandlung fixen oder <source type> nutzen
  • Langsame Generierung → Breiten‑Set reduzieren, Qualität preset, doppeltes Re‑Encode vermeiden
  • Unkonstante Qualität → q pro Zweck fixieren; moderates AVIF‑effort

FAQ

F. Immer WebP/AVIF bevorzugen?

A. Kompatibilität und Generierungskosten balancieren. Für markenkritische Flächen kann JPEG gewinnen.

F. Mehr Vary‑Achsen senken Cache‑Hits?

A. Breite/Qualität normalisieren, um Fragmentierung zu steuern. DPR nur dort nutzen, wo es zählt.

Zusammenfassung

„Korrekte Cache‑Keys“ und „gezielte Optimierung für LCP‑Kandidaten“ verbessern wahrgenommene Geschwindigkeit und Suchtraffic am schnellsten. Beginnen Sie mit Hero‑Bildern und testen Sie klein per A/B.

Auf X teilenZurück zur Liste