Dieser Guide hilft dir dabei, Bilder für die Website optimal aufzubereiten, zu komprimieren und in WordPress mit passenden Alt-Texten zu pflegen.
1. Warum Bilder optimieren?
- Schnellere Ladezeiten: Kleinere Dateien sorgen für ein schnelleres Nutzererlebnis.
- Besseres Ranking: Suchmaschinen belohnen performante Websites.
- Optimale Darstellung: Klare, farbgetreue Bilder auf allen Endgeräten.
- Barrierefreiheit: Alt-Texte und Beschreibungen machen Inhalte für alle zugänglich.
2. Die wichtigsten Dateiformate
| Format | Für was geeignet | Stärken | Hinweise |
|---|---|---|---|
| JPEG | Fotos, komplexe Motive | Sehr gute Kompression bei Fotos | Qualität ab 70–85 % ausreichend für Web |
| PNG | Logos, Icons, Grafiken mit Transparenz | Verlustfrei, transparente Hintergründe | Für einfache Grafiken ideal |
| WebP | Moderne Websites, Fotos & Grafiken | Noch kleinere Dateien als JPEG/PNG | Breite Browser-Abstützung ist weit verbreitet |
| SVG | Logos, Icons, Vektorgrafiken | Skalierbar ohne Qualitätsverlust | Nur für Zeichnungen und Icons geeignet |
| AVIF | Zukunftsorientierte Nutzung | Sehr gute Kompression, zukunftssicher | Kann als Ergänzung neben WebP angeboten werden |
3. Auflösung und Abmessungen festlegen
- Zielgröße bestimmen: Definiere, wie groß das Bild maximal angezeigt wird. Für normale Content-Bilder sind häufig 800–1200 px ausreichend.
- Optimale Breite für volle Darstellung: Bilder, die über die gesamte Bildschirmbreite laufen (z. B. Hero-Bilder), sollten etwa 1920 px breit sein.
- Seitenverhältnis konstant halten: Achte darauf, Breite und Höhe im gleichen Verhältnis zu skalieren (z. B. 16:9 oder 4:3), um Bildverzerrungen zu vermeiden.
Übersicht: Empfohlene Abmessungen
Bildtyp | Empfohlene Abmessungen | Format |
Hero-Banner | 1920 × 1080 px | px als JPG |
Logos | je nach Einsatzgröße (z. B. 200 × 200 px) | Vektor (SVG) |
Grafiken | 800 × 600 px (je nach Einsatz) | px, png oder Vektor (SVG) |
SVG-Grafik | beliebige Skalierung | Vektor (SVG) |
Animationen | variabel, z. B. 800 × 450 px (16:9 oder 1:1) | MP4, GIF/WebP oder auch SVG-Animation |
Fotos | 1200 × 800 px | px als JPG |
4. Kompressionstechniken anwenden
- Ideale Dateigröße: Strebe eine Dateigröße von 100–200 KB pro Bild an, um Ladezeiten gering zu halten.
- Verlustbehaftete Kompression (Lossy):
Setze Qualitätseinstellungen zwischen 60 und 80 % ein – das spart Platz, ohne dass man den Unterschied visuell wahrnimmt. - Verlustfreie Kompression (Lossless):
Nutze sie für Logos und Icons, wenn jede Kante scharf bleiben muss.
Empfohlene Tools & Plugins
- Desktop-Anwendungen: Photoshop, Affinity Photo, Figma, Adobe XD
- Online-Tools: TinyPNG, Squoosh
- WordPress-Plugins: Smush, ShortPixel, Imagify
5. Farbprofil und Metadaten
- sRGB: Stelle vor dem Export sicher, dass Ihr Bild im sRGB-Farbraum ist – das gewährleistet größtmögliche Kompatibilität im Browser.
- Metadaten entfernen: Entferne EXIF- und GPS-Daten, um die Dateigröße weiter zu reduzieren und Datenschutz zu wahren.
6. Alt-Texte und Beschriftungen
- Datei-Name: Vermeide nicht aussagekräftige Namen. Anstatt “Bild-01.jpg” lieber “Webdesign-Agentur-Team.jpg”
- Alternativtext (Alt-Text): Beschreibe kurz und präzise den Bildinhalt.
Beispiel: Statt „IMG_2025-3“ lieber „Roter Klassiker-Sportwagen auf Landstraße“. - Titel und Beschreibung: Ergänze bei Bedarf eine Bildbeschreibung im Titel- und Beschreibungsfeld für Nutzer, die mehr Kontext wünschen.
- Keyword-Integration: Binde wichtige Begriffe ein, ohne den Alt-Text zu überladen.
7. Weitere nützliche Tipps
- Bildnamen: Verwende nur Buchstaben, Zahlen und Bindestriche (z. B. „Sommer-Blumenwiese.jpg“).
- Automatisierte Workflows: Nutze Tools wie Adobe Bridge oder Skripte, um Stapelverarbeitungen (Größe, Farbraum, Metadaten) automatisch durchzuführen.
- Regelmäßige Überprüfung: Führe in festgelegten Abständen eine Bildbestandsprüfung durch, um veraltete oder doppelte Dateien zu entfernen.
- SEO-Optimierung: Achte darauf, dass jede Seite nur die Bilder lädt, die tatsächlich benötigt werden, und gebe Bildunterschriften nur dort an, wo sie echten Mehrwert bieten.
