04 – Formate & Web 🌐
Wie du Grafiken optimal für Webseiten vorbereitest
🧠 1. Warum das Format entscheidend ist
Die Wahl des richtigen Grafikformats beeinflusst:
- Ladezeit der Webseite
- Bildqualität auf verschiedenen Geräten
- Zugänglichkeit für alle Nutzer:innen
- Wartbarkeit deines Projekts
Ein falsches Format kann eine schnelle Seite in eine lahme verwandeln!
📊 2. Vergleich: Welches Format wofür?
| Format | Typ | Vorteile | Nachteile | Web-Einsatz |
|---|---|---|---|---|
| JPG | Pixel | Kleine Datei bei Fotos | Keine Transparenz, Qualitätsverlust bei Kompression | Fotogalerien, Hintergrundbilder |
| PNG | Pixel | Transparenz, scharfe Kanten | Größere Datei als JPG | Logos mit Transparenz, Icons, Screenshots |
| WebP | Pixel | 30 % kleiner als JPG/PNG, unterstützt Transparenz | Ältere Browser (IE) unterstützen es nicht | Modernes Web – überall wo möglich einsetzen! |
| SVG | Vektor | Beliebig skalierbar, extrem klein, editierbar | Nicht für Fotos geeignet | Logos, Icons, Illustrationen, Diagramme |
🛠️ 3. Praxis: Optimierung in GIMP & Inkscape
🖌️
GIMP (Pixel)
- Exportiere Fotos als WebP oder JPG (Qualität: 70–80 %)
- Logos mit Transparenz als PNG
- Verwende „Datei → Exportieren als…“ – nicht „Speichern unter“
→ Siehe: GIMP – Export & Formate
📐
Inkscape (Vektor)
- Speichere Logos immer als SVG
- Exportiere nach PNG nur, wenn SVG nicht möglich ist
- Entferne ungenutzte Objekte vor dem Export
→ Siehe: Inkscape – Export nach SVG & PNG
🌐 4. Einbindung in HTML
So fügst du Grafiken korrekt in deine Webseite ein:
<!-- Foto -->
<img src="foto.jpg" alt="Beschreibung des Fotos">
<!-- Transparentes Logo -->
<img src="logo.png" alt="Mein Logo">
<!-- Skalierbares Logo -->
<svg width="200" height="50">
<use href="logo.svg#symbol"></use>
</svg>🧠 5. KI-Prompt-Training
Aufgabe: Formuliere einen Prompt, mit dem du KI bitten würdest, dir zu erklären, welches Grafikformat du für ein responsives Webprojekt wählen solltest – abhängig von Inhalt (Foto, Logo, Icon) und Zielgruppe (moderne Browser vs. ältere Geräte).
💡 Beispiel guter Prompt:
„Vergleiche JPG, PNG, WebP und SVG für den Einsatz in einer responsiven Website –
inklusive Empfehlungen für Fotos, Logos und Icons,
und wann man auf WebP verzichten sollte.“