Folge 021: Bilder finden, schlank machen und auf der Site einbinden

Schöne Fotos machen eine Site lebendig. Gleichzeitig sind schwere Dateien der häufigste Bremsklotz bei Page Speed (Ladezeit und mobile Nutzung). In dieser Folge: wo du legale Bilder findest, wie du sie vor dem Upload verkleinerst und wo sie in hautuu landen. Hintergründe und Nachweise kennst du schon aus Folge 003 und Folge 019. Bausteine und Medienordner: Folge 020.

Kostenlose Bildquellen (und die Fallen)

Beliebte Stock-Seiten mit gratis Downloads (Stand der Plattform-Regeln, immer die aktuelle Lizenz auf der Seite lesen):

Quelle	Kurz
Pixabay	Kostenlose Nutzung laut Pixabay License; gesponserte Treffer oben/unten sind oft kostenpflichtig (Filter nutzen, nicht blind klicken).
Unsplash	Unsplash License: frei für viele private und kommerzielle Nutzungen; Unsplash+ (Schloss-Symbol) ist nicht der gratis Download. Namensnennung ist erwünscht, aber laut Hilfe nicht zwingend.
Pexels	Pexels License: ähnlich Stock-Nutzung ohne Account-Pflicht für viele Motive.
Freepik	Viele Motive nur mit Attribution oder im Premium-Abo; Filter Free / License und AI generated bewusst setzen.

Praxis: Motiv gefällt dem Kunden, du merkst erst beim Download: kostet. Deshalb vorher Lizenz und Preislabel checken. KI-generierte Bilder kannst du oft per Filter ausblenden, wenn du echte Fotos willst.

Größe und Format vor dem Upload

Aus dem Video: Startseiten-Hintergrund zuerst 1920 px breit als JPEG (~470 KB), für ein dekoratives Vollbild ohne Details reicht oft weniger.

Faustregeln:

• Breite: Für Hintergründe und Hero oft 1280 px (manchmal 1024 px), nicht immer volle 4K-Datei hochladen.
• Format: WebP statt JPEG/PNG für Fotos im Web (kleinere Datei bei ähnlicher Optik). In gThumb (GNOME Bildbetrachter) oder GIMP: exportieren, Qualität oft 80 % reicht; in GIMP zusätzlich Metadaten weglassen, wenn das Export-Dialog anbietet.
• Ziel: Unter ~100 KB pro dekoratives Hintergrundbild anpeilen, wenn es geht (Motiv und Qualität entscheiden mit).

Beispiel aus der Session: 1920 px JPEG ~470 KB → 1280 px WebP ~91 KB. Weitere Motive ähnlich geschnitten. Tools wie MAT2 (Metadata Anonymisation Toolkit) können Metadaten entfernen; die Dateigröße ändert sich manchmal nur wenig, trotzdem sinnvoll vor Veröffentlichung.

In Sveltia einbinden und ersetzen

Geteilte Motive für Startseite, FAQ, Glossar-Übersicht: Medienbibliothek → Dateien unter src/assets/ (Pfad in der UI oft /assets/…). Nur für einen Artikel: Variante B, Bild neben index.md (Folge 004).

Im CMS: Seite öffnen, Hintergrundbild wählen oder per Replace eine optimierte Datei nachlegen (gleicher Dateiname oder neues Asset). Overlay und Bildnachweis nicht vergessen, wenn die Lizenz oder die Plattform Credits will (Sammlung auf dem Impressum).

Was Astro noch macht

hautuu wandelt Hintergründe beim Build in WebP um und liefert mehrere Breiten per srcset (640 bis 1920 px), siehe PageBackground.astro. Trotzdem lohnt kleine Quelldateien: der Build spart Bytes, aber eine 2‑MB-Rohdatei bleibt unnötig schwer in Git.

In PageSpeed Insights (Google) kann unter „Bildübermittlung“ noch Optimierungspotenzial auftauchen (z. B. angezeigte Breite kleiner als ausgelieferte Datei). Dann Quelle schlanker wählen oder prüfen, ob das richtige sizes-/srcset-Setup greift. Die Site war in der Session schon grün mobil; Bilder sind ein Hebel für die letzten Prozent.

Alt-Text: Dekorative Vollbild-Hintergründe nutzen bei uns alt="" (rein visuell). Informatives Bild im Artikeltext braucht einen Alt-Text, wenn es Inhalt transportiert.

Kurz merken

• Lizenz und bezahlte Treffer auf Stock-Seiten prüfen.
• Vor Upload: schneiden, skalieren, WebP, Metadaten optional strippen.
• Assets global oder neben dem Artikel; Nachweis im CMS-Feld.
• Astro optimiert weiter, ersetzt aber kein schlankes Original.

Nächster Schritt im Projektalltag: Meilensteine und offene Issues (SEO, Performance) wie gewohnt über GitHub pflegen (Folge 002). PR-Konflikte kann der Agent oft allein lösen, wenn du die Nummer nennst (Folge 016).