Bilder für die Website richtig optimieren: Format, Größe, Lazy Loading und Alt-Text
Wie Sie Bildformat, Abmessungen, Komprimierung, Lazy Loading und Alternativtexte so wählen, dass Ihre Website schnell lädt und barrierefrei ist.
- Nº
- 18
- Veröffentlicht
- Lesezeit
- 10 Min.
- Kategorie
- Notes
- Geschrieben von
- Revylio
Bilder für die Website richtig optimieren: Format, Größe, Lazy Loading und Alt-Text zusammen
Bilder für die Website richtig optimieren heißt, vier Dinge zusammen zu erledigen. Sie wählen das passende Format, skalieren auf die angezeigte Breite und komprimieren maßvoll. Bilder unterhalb des sichtbaren Bereichs laden Sie verzögert. Und jedes Bild erhält einen Alternativtext nach seiner Funktion.
Bildoptimierung ist die Abstimmung von Dateiformat, Bildgröße und Dateigröße auf den Einsatz auf der Website. Diese drei Dinge muss man laut Pixelwerk beim Einbau eines Bildes kennen und verstehen. Dieser Leitfaden ergänzt responsive Einbindung, Lazy Loading und den Alternativtext. Sie entscheiden über Ladezeit, Barrierefreiheit und Auffindbarkeit mit.
Ein einzelnes Werkzeug macht ein Bild deshalb nicht „fertig“. Wer nur die Datei verkleinert, hat ein schnelles Bild, das Nutzer eines Screenreaders womöglich nicht verstehen. Ein Screenreader ist eine Software, die Bildschirminhalte vorliest. Wer nur den Alt-Text pflegt, hat ein verständliches Bild, das auf dem Smartphone zu lange lädt. Die folgenden Abschnitte behandeln jede Stellschraube einzeln, mit einem durchgerechneten Beispiel und einer Prüfliste am Ende.
Große Bilddateien verlängern die Ladezeit und schaden der Platzierung in der Suche
Große Bilddateien verlängern die Ladezeit einer Website und schaden ihrer Platzierung in Suchmaschinen. Die Ursache liegt meist vor dem Hochladen. Kamera- und Smartphone-Fotos sind laut webdesign-cms-agentur.de meist viel zu groß, falsch benannt oder im ungeeigneten Format. Das kann die Ladezeit der Website erheblich verschlechtern.
Als Folgen großer Bilder nennt dieselbe Quelle:
- lange Ladezeiten
- schlechteres Ranking
- genervte Besucher
- erhöhten Datenverbrauch
Auch die Suchmaschine reagiert auf die Dateigröße. Laut Pixelwerk erkennt Google, wie stark Bilder komprimiert sind, und bewertet zu große Dateigrößen als schlecht. Wer Format, Bildgröße und Dateigröße vor dem Hochladen prüft, vermeidet das Problem von Anfang an.
Wie viel eine langsame Seite tatsächlich an Anfragen kostet, lässt sich messen. Das Vorgehen beschreiben wir im Beitrag Was eine langsame Website an Anfragen kostet.
Bildformat wählen: JPEG, PNG, WebP, SVG, GIF und AVIF im Vergleich
Das richtige Bildformat hängt vom Motiv ab: Fotos gehören in ein stark komprimierbares Format, Logos und Icons in ein Vektorformat. Die Google Suche unterstützt Bilder in sieben Formaten: BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Bei der Wahl zählen also Dateigröße und Darstellung, nicht die Auffindbarkeit.
web.dev unterscheidet zwei Familien. Rasterbilder wie JPEG, GIF, PNG und WebP bestehen aus Pixeln. SVG ist das Vektorformat des Webs. Die Tabelle fasst die Eigenschaften aus den Quellen zusammen.
| Format | Typischer Einsatz | Komprimierung | Zu beachten |
|---|---|---|---|
| JPEG | Fotos | bei den meisten Motiven am stärksten komprimierbar | häufigstes Bildformat im Web |
| PNG | Grafiken, Transparenzen | reduziert vor allem die Zahl der Farben | Fotos wirken stark komprimiert schnell unnatürlich |
| WebP | Fotos und Grafiken mit kleiner Datei | sehr gute Qualität bei kleinerer Dateigröße | Rasterformat, von der Google Suche unterstützt |
| SVG | Logos, Icons | Vektorformat | von der Google Suche unterstützt |
| GIF | Animationen | höchstens 256 Farben | True-Color-GIFs lassen die Dateigröße stark steigen |
Für Fotos ist JPEG der Standard; web.dev nennt es das häufigste Bildformat im Web. WebP liefert laut webdesign-cms-agentur.de sehr gute Qualität bei kleinerer Dateigröße. AVIF ist laut web.dev eine Kodierung auf Basis des offenen Videocodecs AV1. Stark komprimierte PNG-Fotos wirken laut Pixelwerk schnell unnatürlich, weil vor allem die Zahl der Farben sinkt.
Bildabmessungen: Fotos auf die tatsächlich angezeigte Breite skalieren
Entscheidend ist, wie viele Pixel ein Bild breit ist, gemessen an der Breite, in der es tatsächlich erscheint. Pixelwerk nennt die Bildgröße neben Dateiformat und Dateigröße als eines der drei Dinge, die man beim Einbau eines Bildes kennen muss. Ein zu breites Bild überträgt Pixel, die niemand sieht.
Moderne Kameras liefern laut webdesign-cms-agentur.de Fotos mit 5.000 bis 8.000 Pixeln Breite. Der Contentbereich ist der Bereich, in dem die eigentlichen Inhalte einer Seite stehen. Auf einem PC-Monitor ist er laut Pixelwerk in der Regel um die 1000 Pixel breit.
Ein häufiger Fehler zeigt das Problem. Ein Bild mit 3500 x 2800 Pixeln wird hochgeladen und im Inhalt mit 600 x 400 Pixeln angezeigt. Übertragen wird trotzdem die volle Datei. Pixelwerk weist zudem darauf hin, dass die Darstellung darunter leiden kann.
Als Richtwert nennt webdesign-cms-agentur.de je nach Layout meist 1.200 bis 2.000 Pixel Breite. Skalieren Sie jedes Bild auf die größte Breite, in der Ihre Vorlage es tatsächlich zeigt. Ein Bild im Contentbereich braucht weniger Pixel als ein bildschirmbreites Titelbild.
Quelle: webdesign-cms-agentur.de, pixelwerk-marketing.com
Bilder komprimieren: Exportqualität, keine doppelte Kompression und Sichtkontrolle
Komprimierung ist die Verdichtung von Bilddaten, die die Dateigröße verringert. Verlustfreie Komprimierung lässt die Bildinformation unverändert. Verlustbehaftete Komprimierung verwirft auch Bilddaten und erreicht dadurch kleinere Dateien.
Wie stark sich ein Bild verdichten lässt, hängt vom Format ab. JPG lässt sich laut Pixelwerk bei den meisten Motiven am stärksten komprimieren. Bei PNG reduziert die Komprimierung dagegen vor allem die Zahl der Farben im Bild.
Für den Export nennen die Quellen konkrete Werte:
- Qualität zwischen 55 und 65 % wählen (webdesign-cms-agentur.de).
- Keine doppelte Kompression, also ein bereits komprimiertes Bild nicht erneut komprimieren.
- Bildgröße passend zur tatsächlichen Anzeige wählen (webdesign-cms-agentur.de).
- Höchstens rund 200 KB für ein Contentbild von etwa 640 x 400 Pixeln (Pixelwerk).
Prüfen Sie das Ergebnis immer mit dem Auge. Zu stark komprimierte Bilder werden laut Pixelwerk unscharf und verlieren ihre Natürlichkeit. Als Werkzeuge nennt webdesign-cms-agentur.de Photoshop, TinyPNG, Squoosh und Lightroom.
Responsive Bilder: mit srcset und sizes die passende Größe je Bildschirm ausliefern
Responsive Bilder sind Bilder, deren ausgelieferte Datei sich nach dem Gerät richtet, auf dem sie erscheinen. Das Smartphone erhält eine schmale Datei, der große Monitor eine breite. Ohne diese Technik lädt jedes Gerät dieselbe, meist zu große Version.
Gesteuert wird das im HTML. Mit den Attributen srcset und sizes erhält der Browser laut web.dev Informationen über die verfügbaren Bildquellen und darüber, wie sie verwendet werden. Das Element <picture> beschreibt web.dev als vorschreibende Syntax: Sie legen selbst fest, welche Quelle der Browser wann nimmt.
Eine Regel aus der Google-Dokumentation zur Bilder-SEO gilt für beide Varianten. Einige Browser und Crawler verstehen <picture> und srcset nicht. Google empfiehlt deshalb, immer eine Fallback-URL im Attribut src anzugeben. Bilder im src des <img>-Elements findet Google auch dann, wenn das Element in einem <picture> steht.
Von Hand pflegen müssen Sie das selten. Content-Management-Systeme wie WordPress erleichtern laut web.dev den Einsatz responsiver Bilder. Bild-CDNs, also auf Bilder spezialisierte Auslieferungsnetze, können Bilder laut web.dev zusätzlich umwandeln und optimieren.
Lazy Loading für Bilder unterhalb des sichtbaren Bereichs und Einbindung als img-Element
Lazy Loading ist das verzögerte Laden von Bildern: Ein Bild wird erst geladen, wenn der Besucher an die Stelle der Seite gelangt, an der es steht. Beim ersten Aufruf überträgt der Browser damit nur die Bilder, die tatsächlich gebraucht werden.
Lazy Loading lohnt sich für Bilder unterhalb des sichtbaren Bereichs, die erst nach dem Scrollen erscheinen. Typische Fälle sind Referenzgalerien, Teamfotos weiter unten und Logoleisten im Fußbereich. Das Titelbild ganz oben sollte dagegen sofort laden. Sonst wartet der Besucher genau auf das Bild, das er zuerst sieht.
Für die Suche zählt außerdem, wie ein Bild eingebunden ist. Google indexiert keine CSS-Bilder, also keine Bilder, die im Stylesheet als Hintergrund hinterlegt sind. Ein Produkt- oder Teamfoto, das in der Bildersuche erscheinen soll, gehört deshalb als <img>-Element mit src in den HTML-Code.
Prüfen Sie nach dem Einrichten von Lazy Loading, ob jedes wichtige Bild weiterhin eine echte Bildadresse im src trägt. Die Google-Dokumentation nennt genau dieses Attribut als Ort, an dem Google Bilder findet. Ein Plugin, das die Adresse dort durch einen Platzhalter ersetzt, verdient deshalb einen zweiten Blick.
Alternativtexte nach Bildfunktion schreiben: informativ, dekorativ oder funktional
Ein Alternativtext, kurz Alt-Text, ist der Text im Attribut alt, der ein Bild beschreibt. Das Bildertutorial der Web Accessibility Initiative (WAI) des W3C verlangt, dass er die Information oder Funktion des Bildes wiedergibt.
Welcher Text passt, hängt laut WAI von Verwendung, Zusammenhang und Inhalt des Bildes ab. Das Tutorial unterscheidet diese Fälle:
- Informative Bilder wie Fotos und Illustrationen: beschreiben, welche Information das Bild vermittelt.
- Dekorative Bilder ohne inhaltliche Aussage: leerer Alternativtext
alt="". - Funktionale Bilder als Link oder Schaltfläche: die Funktion beschreiben, nicht das Motiv.
- Bilder mit Text: außer bei Logos vermeiden, sonst dieselben Wörter in den Alt-Text.
- Komplexe Bilder wie Diagramme: ein vollständiges Textäquivalent der Daten bereitstellen.
- Bildgruppen mit einer gemeinsamen Aussage: ein Alt-Text für die ganze Gruppe.
Für die Suche gilt dieselbe Regel. Google versteht das Thema eines Bildes aus Alt-Text, Computer-Vision-Algorithmen und Seiteninhalt. Keywords im alt-Attribut zu stapeln ist laut Google nicht nutzerfreundlich und kann dazu führen, dass die Website als Spam gilt.
Bei Svennis ordnen wir im Relaunch jedes Bild zuerst einer dieser Funktionen zu, bevor jemand einen Alt-Text schreibt. Am häufigsten korrigieren wir dabei verlinkte Logos, deren Alt-Text den Dateinamen oder das Motiv nennt statt das Linkziel.
Was wir darüber hinaus prüfen, steht im Beitrag Barrierefreie Website nach WCAG 2.1 AA: Was wir im Relaunch prüfen.
Dateinamen, einheitliche Bild-URLs und Bild-Sitemap für die Google-Bildersuche
Ein beschreibender Dateiname hilft Suchmaschinen laut webdesign-cms-agentur.de, schneller zu erkennen, worum es in einem Bild geht. Die Quelle empfiehlt beschreibende Namen, Bindestriche statt Leerzeichen, sinnvoll eingesetzte Suchbegriffe und keine kryptischen Zahlenfolgen. Aus „IMG_4711.jpg“ wird so etwa „teamfoto-vertrieb.webp“.
Verwenden Sie für ein Bild überall dieselbe Adresse. Google empfiehlt, auf einer größeren Website ein mehrfach genutztes Bild immer mit derselben URL einzubinden. Dann kann Google es im Cache speichern und wiederverwenden. Ändern sich Bildadressen bei einem Umzug, planen Sie das wie jede andere Adressänderung; die Schritte stehen in unserer Checkliste für den Website-Umzug ohne Traffic-Verlust.
Eine Bild-Sitemap meldet Google die Bildadressen gezielt. Im Unterschied zu normalen Sitemaps darf sie laut Google URLs anderer Domains enthalten, sodass Bilder auch auf einem CDN liegen können.
Die Bildvorschau in den Suchergebnissen wählt Google vollautomatisch aus. Beeinflussen können Sie die Auswahl über primaryImageOfPage, Bildattribute in mainEntity oder das Meta-Tag og:image. Strukturierte Daten sind maschinenlesbare Auszeichnungen im Code. Bei den dafür vorgesehenen Typen ist das Bildattribut laut Google ein Pflichtfeld für hervorgehobene Ergebnisse in Google Bilder.
Beispiel: Ein Teamfoto vom Smartphone Schritt für Schritt für die Website optimieren
Das folgende Beispiel zeigt alle Optimierungsschritte an einem typischen Fall: einem Teamfoto vom Smartphone für die Seite „Über uns“, für das die Einwilligung aller abgebildeten Beschäftigten schriftlich oder elektronisch vorliegt. Das Foto ist 6.000 Pixel breit, heißt „IMG_4711.jpg“ und soll im Contentbereich erscheinen.
- Funktion klären: Das Foto zeigt das Team und ist damit ein informatives Bild. Es braucht einen beschreibenden Alt-Text.
- Breite festlegen: Der Contentbereich ist rund 1000 Pixel breit. Exportieren Sie eine Version mit 1.000 Pixeln und eine mit 2.000 Pixeln, der oberen Grenze des Richtwerts.
- Format wählen: WebP als Hauptformat, dazu ein JPEG als Fallback für das
src-Attribut. - Komprimieren: In Squoosh die Qualität auf 60 % setzen, nicht doppelt komprimieren und das Ergebnis mit dem Original vergleichen.
- Benennen: „teamfoto-vertrieb.webp“ und „teamfoto-vertrieb.jpg“.
- Einbinden: Ein
<picture>mit der WebP-Quelle und einem<img>, dessensrcauf das JPEG zeigt.srcsetnennt beide Breiten,sizesdie Darstellungsbreite. - Alt-Text schreiben: etwa „Das fünfköpfige Vertriebsteam vor dem Firmengebäude“, ohne angehängte Suchbegriffe.
- Verzögert laden: Steht das Foto unterhalb des sichtbaren Bereichs, aktivieren Sie Lazy Loading.
Das Ergebnis ist ein Foto, das deutlich kleiner überträgt als das Original. Screenreader lesen eine verständliche Beschreibung vor, und Google findet eine echte Bildadresse im src. Kein Schritt ist aufwendig, aber erst alle zusammen ergeben ein optimiertes Bild.
Was Bildoptimierung für Unternehmen in Deutschland bedeutet: Leitungen und Barrierefreiheit
Für Unternehmen in Deutschland zählt Bildoptimierung aus zwei Gründen: wegen sehr unterschiedlicher Internetverbindungen und wegen der Barrierefreiheit. Pixelwerk rechnet vor, dass drei Bilder mit je 3 MB bei guter DSL- oder VDSL-Leitung etwa eine Sekunde laden. Bei einer langsamen Leitung kann es mehrere Minuten dauern. Nicht jeder Kunde sitzt am schnellen Büroanschluss.
Bei der Barrierefreiheit geht es um Menschen, die Ihre Seite nutzen wollen. Bilder werden laut WAI auf Websites sehr häufig eingesetzt und schaffen große Barrieren, wenn sie nicht zugänglich sind. Zugleich machen sie Inhalte für viele leichter verständlich, besonders für Menschen mit kognitiven und Lernbeeinträchtigungen. Zugängliche Bilder werden laut WAI außerdem für Suchmaschinen indexierbar.
Ob das Barrierefreiheitsstärkungsgesetz (BFSG) Ihre Website erfasst und wie Sie den Stand prüfen, erklären wir im Beitrag BFSG: Barrierefreiheit der Firmenwebsite prüfen und umsetzen. Alternativtexte und Bilder mit Text gehören bei dieser Prüfung zu den Punkten, die sich am schnellsten selbst beheben lassen.
Nächste Schritte: Bilder der wichtigsten Seiten prüfen und Vorlagen anpassen
Beginnen Sie mit den meistbesuchten Seiten Ihrer Website, denn dort wirkt jede Verbesserung am stärksten. Welche Seiten das sind und welche davon Anfragen bringen, zeigt Ihre Auswertung; das Vorgehen beschreibt unser Beitrag Messen, was die Website bringt. Gehen Sie jedes Bild dieser Seiten mit der folgenden Prüfliste durch:
- Das Format passt zum Motiv: Foto als JPEG oder WebP, Logo als SVG.
- Die Breite entspricht der größten tatsächlichen Anzeigebreite.
- Die Exportqualität liegt zwischen 55 und 65 %, ohne doppelte Kompression.
srcsetundsizessind gesetzt, ein Fallback steht imsrc.- Lazy Loading gilt nur unterhalb des sichtbaren Bereichs.
- Der Alt-Text folgt der Funktion, dekorative Bilder tragen
alt="". - Dateiname ist beschreibend, jedes Bild hat eine einheitliche URL.
Ändern Sie zuerst die Vorlagen und die Bildgrößen im CMS, danach die Einzelbilder. So entsteht jedes neue Bild gleich in der passenden Größe.
Zeigt die Prüfung, dass Vorlagen, CMS und Bildbestand grundsätzlich nicht zusammenpassen, ist ein Neuaufbau oft der sauberere Weg. Was dazugehört, beschreibt unsere Seite Website-Relaunch und Webdesign.