Bilder machen eine Website lebendig – sie zeigen Ihre Arbeit, schaffen Vertrauen und erzählen Ihre Geschichte. Gleichzeitig sind schlecht aufbereitete Bilder einer der häufigsten Gründe, warum Websites langsam laden. Und eine langsame Website kostet Besucher. Die gute Nachricht: Wer ein paar grundlegende Regeln kennt, kann Bilder so aufbereiten, dass sie schnell laden und trotzdem überzeugend aussehen.
Das richtige Format wählen
Nicht jedes Bildformat ist für jede Situation geeignet. Hier ein kurzer Überblick über die drei Formate, die im Web am relevantesten sind:
- JPEG eignet sich für Fotos und Bilder mit vielen Farben und feinen Verläufen. Es lässt sich stark komprimieren, ohne dass das menschliche Auge den Qualitätsverlust sofort bemerkt.
- PNG ist die richtige Wahl, wenn ein Bild einen transparenten Hintergrund haben soll – zum Beispiel bei Logos. PNG-Dateien sind allerdings oft größer als JPEGs.
- WebP ist ein moderneres Format, das sowohl Fotos als auch Grafiken mit kleineren Dateigrößen bei vergleichbarer Qualität darstellt. Alle aktuellen Browser unterstützen es. Wer neue Bilder für die Website vorbereitet, sollte WebP bevorzugen.
Das Fazit: Fotos als WebP oder JPEG, Logos und Icons als SVG oder PNG – und veraltete Formate wie BMP oder TIFF haben im Web nichts verloren.
Dateigröße und Auflösung realistisch einschätzen
Ein Foto direkt von der Kamera oder dem Smartphone kann leicht 5 bis 10 Megabyte groß sein. Auf einer Website werden Bilder im Browser-Fenster jedoch meist in Breiten zwischen 400 und 1600 Pixeln angezeigt. Eine Auflösung von 4000 mal 3000 Pixeln ist schlicht verschwendete Datenmenge.
Daumen-Regelung für die Praxis:
- Vollbreite Header-Bilder: maximal 1920 Pixel breit, Dateigröße unter 200 Kilobyte
- Teaser- oder Thumbnailbilder: 600 bis 800 Pixel breit, unter 80 Kilobyte
- Logos: als SVG wenn möglich, da vektorgraphisch und beliebig skalierbar
Zum Komprimieren gibt es einfache, kostenlose Online-Werkzeuge wie Squoosh oder TinyPNG. Dort laden Sie ein Bild hoch, stellen die gewünschte Qualität ein und laden die optimierte Version herunter – kein Programm nötig, keine technischen Vorkenntnisse.
Alt-Texte: gut für SEO, wichtig für Barrierefreiheit
Ein Alt-Text ist eine kurze Beschreibung, die einem Bild im HTML-Code hinterlegt wird. Er erfüllt zwei Aufgaben: Suchmaschinen wie Google können Bilder nicht „sehen” – sie lesen den Alt-Text, um den Bildinhalt zu verstehen. Gleichzeitig lesen Screenreader, die von sehbeeinträchtigten Menschen genutzt werden, diesen Text vor.
Ein guter Alt-Text beschreibt sachlich, was auf dem Bild zu sehen ist, und enthält – wo es natürlich passt – ein relevantes Stichwort.
Schlecht: bild1.jpg oder kein Alt-Text
Besser: Tischlermeister bei der Arbeit in seiner Werkstatt in Rendsburg
Alt-Texte müssen nicht lang sein. Ein präziser Satz reicht vollkommen aus. Was nicht geht: Alt-Texte als Keyword-Listen missbrauchen oder bei dekorativen Bildern (Trennlinien, Hintergründe) einen sinnlosen Text einzutragen – dort sollte das Alt-Attribut leer bleiben.
Dateinamen nicht vergessen
Ein kleines Detail, das viele übersehen: Benennen Sie Ihre Bilder vor dem Hochladen sinnvoll. Statt IMG_3847.jpg besser tischler-werkzeug-rendsburg.jpg. Suchmaschinen werten den Dateinamen als zusätzliches Signal aus, und auch intern behalten Sie so einen besseren Überblick.
Zusammenfassung: Was Sie jetzt tun können
- Neue Bilder als WebP speichern oder mit TinyPNG komprimieren
- Auflösung vor dem Upload auf eine realistische Breite reduzieren
- Jeden Alt-Text kurz und beschreibend formulieren
- Dateinamen sprechend wählen
Diese vier Maßnahmen kosten kaum Zeit, können die Ladegeschwindigkeit Ihrer Website jedoch spürbar verbessern – und das wirkt sich sowohl auf das Nutzererlebnis als auch auf Ihr Google-Ranking aus.
Bereit für einen Auftritt, der Anfragen bringt?
Kostenloses Erstgespräch