Astro-Kurs 26: Bilder und Performance

Modul 5 – Webseiten erweitern · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du bindest Bilder korrekt ein, lernst den Unterschied zwischen public/ und src/ und erkennst einfache Leistungsprobleme.

1. Zwei Arten, Bilder abzulegen

Dateien unter public/bilder/ werden unverändert veröffentlicht. Das ist unkompliziert, führt aber nicht automatisch zu optimierten Bildgrößen. Dateien unter src/assets/ können über Astos eingebautes Bildwerkzeug verarbeitet werden.

Verschiebe für diese Übung eine Kopie des Modellflugbilds nach src/assets/modellflug.jpg.

2. Optimiertes Bild

Beispiel für eine neue Komponente src/components/ProjektBild.astro:

---
import { Image } from 'astro:assets';
import flieger from '../assets/modellflug.jpg';
---
<figure>
  <Image src={flieger} alt="Modellflugzeug auf der Werkbank" width={800} loading="lazy" />
  <figcaption>Unser Modellflugprojekt</figcaption>
</figure>
<style>
  figure { margin: 1rem 0; }
  img { max-width:100%; height:auto; border-radius:10px; }
  figcaption { font-size:.9rem; color:#556; }
</style>

Im Layout oder auf einer Seite importierst du ProjektBild und setzt <ProjektBild /> an die gewünschte Stelle. Image kann lokale Bilder optimieren und legt sinnvolle Maße fest.

3. Performance prüfen

Öffne die Entwicklerwerkzeuge im Browser. Prüfe unter „Netzwerk“, wie viel die Seite überträgt. Vergleiche ein großes JPG in public/ mit dem optimierten Bild. Teste am besten zusätzlich eine Produktionsvorschau:

npm run build
npm run preview

Weitere Grundregeln: Nur notwendiges JavaScript laden, Bildabmessungen reservieren, sichtbare Hauptbilder nicht unnötig verzögert laden und aussagekräftige Alternativtexte verwenden.

Übung

Füge ein zweites Projektbild hinzu und prüfe, welche Version auf dem Smartphone besser lädt.