1. Warum die Bildgröße wichtig ist
- Große Bilder erhöhen die Ladezeit und belasten mobile Daten.
- Kleine Bilder können unscharf wirken und die User Experience verschlechtern.
- Google bewertet die Ladezeit als wichtigen Ranking-Faktor.
2. Richtwerte für Bildgrößen
- Header / Hero-Bilder: 1920px Breite für Desktop, 1200px für Tablets, 800px für Smartphones.
- Content-Bilder / Artikelbilder: 1200px Breite für Desktop, 800px für Tablets, 400px für Smartphones.
- Thumbnails / Vorschaubilder: 300–400px Breite.
Tipp: Immer Bilder proportional skalieren, um Verzerrungen zu vermeiden.
3. Bildformate und Komprimierung
- WebP oder AVIF für moderne Websites – kleine Dateigrößen bei hoher Qualität.
- JPEG oder PNG als Fallback für ältere Browser.
- LexImg kann die Bilder automatisch optimieren, komprimieren und in mehreren Größen ausgeben.
4. Responsive Bilder einsetzen
Nutze das <picture>-Tag oder srcset/sizes, damit der Browser die passende Bildgröße für das Gerät auswählt. Spart Bandbreite und sorgt für schnelle Ladezeiten.
<picture> <source srcset="bild-large.webp" media="(min-width:1200px)" type="image/webp"> <source srcset="bild-medium.webp" media="(min-width:768px)" type="image/webp"> <img src="bild-small.jpg" alt="Beispielbild"> </picture>
5. Best Practices
- Bilder vor dem Hochladen immer auf die maximal benötigte Größe skalieren.
- Unnötig große Bilder vermeiden.
- Mit LexImg können alle Versionen automatisch erstellt werden, inklusive Lazy Loading.
6. Zusammenfassung
Die optimale Bildgröße ist entscheidend für schnelle Webseiten, gute SEO und eine positive Nutzererfahrung. Mit LexImg kannst du Bilder automatisch skalieren, komprimieren und in modernen Formaten bereitstellen – perfekt für alle Bildschirmgrößen.