Das passende Bild beginnt beim Motiv
Ein technisch kleines Bild ist nicht automatisch ein gutes Website-Bild. Es muss eine konkrete Information oder Wirkung tragen und zum vorgesehenen Ausschnitt passen. Eigene Arbeits-, Team- und Projektbilder schaffen meist mehr Vertrauen als austauschbare Stockmotive.
Abmessungen statt Originaldateien ausliefern
Kameradateien sind oft deutlich größer als die Darstellung im Browser. Für verschiedene Bildschirmbreiten sollten passende Varianten erzeugt werden. Der Browser kann dann über `srcset` die kleinste ausreichende Datei auswählen.
Feste Breiten- und Höhenangaben reservieren Platz, bevor ein Bild geladen ist. Das verhindert Layoutsprünge und verbessert die visuelle Stabilität.
WebP und AVIF sinnvoll einsetzen
WebP und AVIF können Fotos wesentlich kleiner ausliefern als unkomprimierte PNG-Dateien. PNG bleibt für bestimmte transparente Grafiken sinnvoll, während SVG für Logos und einfache Vektoren geeignet ist.
Entscheidend ist die sichtbare Qualität nach der Kompression. Eine aggressive Verkleinerung mit deutlichen Artefakten schadet der professionellen Wirkung.
Sichtbare Bilder priorisieren
Das zentrale Bild im ersten sichtbaren Bereich darf nicht unnötig verzögert werden. Weiter unten liegende Bilder können mit Lazy Loading erst kurz vor ihrer Nutzung geladen werden.
Zu viele große Bilder, Slider oder automatisch startende Videos erhöhen die Ladezeit und lenken häufig von der eigentlichen Botschaft ab.
Alt-Texte beschreiben den Inhalt
Ein Alt-Text erklärt knapp, was auf dem Bild für den Seitenkontext relevant ist. Dekorative Bilder erhalten einen leeren Alt-Text. Schlagwortlisten und wiederholte Keyword-Varianten sind weder hilfreich noch barrierefrei.
Dateinamen, Bildumfeld und Bild-Sitemap unterstützen die Auffindbarkeit zusätzlich, ersetzen aber keine gute sichtbare Einbindung auf der zugehörigen Seite.