Bilder·Claude Code
BilderClaude Code

Bilder zu WebP oder AVIF konvertieren — Claude Code

JPEGs und PNGs sind 2026 grösser als nötig. WebP und AVIF schneiden Grössen 30-50% bei gleicher visueller Qualität — spürbare LCP-Verbesserung.

rocket_launch

In Claude Code fixen

Anthropics offizieller Terminal-Coding-Agent

Claude Code kann zuerst den ganzen Codebase greppen, die Änderung planen, dann jede betroffene Datei editieren. Prompt unten in deinen Claude Code-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Claude Code

Diesen Text exakt so in deinen Claude Code-Chat kopieren und einfügen.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

Use modern image formats

1. Convert JPEG/PNG images to WebP or AVIF format.
2. Use <picture> element with fallback for older browsers.

Warum das wichtig ist

Moderne Bildformate sind der #1-Hebel für bildlastige Seiten. 2MB-Hero-JPEG wird zu 500KB-WebP ohne sichtbaren Qualitätsverlust — ~1.5s LCP auf Mobile.

Jeder moderne Browser unterstützt WebP (99%+ Coverage). AVIF hat weniger Support, ist aber 30% kleiner als WebP wo es funktioniert.

So nutzt du diesen Prompt in Claude Code

  1. 1. Dein Claude Code-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Claude Code-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outlineKonvertieren aber JPEG-Originale als Primary-Format behalten.
  • error_outlineÜberkomprimieren — Artefakte werden sichtbar.
  • error_outline`<picture>` mit Fallback aus Safety nicht nutzen.

Wie du prüfst ob der Fix geklappt hat

  • check_circleChrome DevTools → Network → Img-Type → Grössen reduziert.
  • check_circleLighthouse → "Serve images in next-gen formats" besteht.
  • check_circlePageSpeed Insights zeigt Image-Opportunities weg.

Häufige Fragen

WebP oder AVIF?expand_more
WebP für universelle Kompatibilität. AVIF wenn du extra Kompression willst und `<picture>`-Fallback für Safari-Edge-Cases OK ist.
Verliere ich Qualität?expand_more
Bei sinnvollen Quality-Settings (75-85) visuell nicht wahrnehmbar. Überkompression ist sichtbar.

Alle 34 Prompts passend zu deiner Claude Code-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Claude Code-Prompts

Performance

Largest Contentful Paint (LCP) verbessern — Claude Code

Prompt um LCP unter 2.5s zu kriegen — Hero-Bild preloaden, Render-Blocking reduzieren, CDN nutzen.

Performance

Core Web Vitals fixen (LCP, CLS, INP) — Claude Code

Prompt um Googles Core-Web-Vitals-Schwellen zu treffen: LCP < 2.5s, CLS < 0.1, INP < 200ms. Funktioniert in jedem AI-Stack.

Bilder

1200×630 Open-Graph-Bild setzen — Claude Code

Prompt um ein richtig dimensioniertes og:image zu erstellen und zu referenzieren — Link-Previews auf LinkedIn, Slack, WhatsApp, X sehen professionell aus.

Bilder

Alt-Text für alle Bilder auf einmal — Claude Code

Prompt der jedes <img>-Tag durchläuft und beschreibende Alt-Attribute im Bulk setzt — schnelle Alternative zum einzelnen Fixen.

Mehr im Glossar erfahrenarrow_forward