Bilder gehören auf vielen Websites zu den größten übertragenen Dateien. Werden Fotos und Grafiken ohne Optimierung hochgeladen, können einzelne Bilder mehrere Megabyte groß sein und die Ladezeit einer Seite unnötig erhöhen.
Gute Bildoptimierung bedeutet jedoch nicht, Bilder einfach möglichst stark zu komprimieren. Entscheidend ist ein sinnvoller Kompromiss zwischen Bildqualität, Abmessungen, Dateigröße und dem verwendeten Dateiformat.
Auch für Suchmaschinen spielen Bilder eine Rolle. Verständliche Dateinamen, passende Alternativtexte und ein sinnvoller inhaltlicher Zusammenhang helfen dabei, Bilder und ihre Bedeutung besser einzuordnen.
In dieser Anleitung zeigen wir dir, wie du Bilder für Websites vorbereitest und welche Faktoren für Qualität, Ladezeit und SEO wichtig sind.
Kurz erklärt: Ein für das Web optimiertes Bild besitzt die für seinen Einsatzzweck passenden Abmessungen, ein geeignetes Dateiformat und eine möglichst kleine Dateigröße, ohne dass die sichtbare Qualität unnötig leidet.
Warum sollten Bilder für Websites optimiert werden? #
Digitalkameras und moderne Smartphones erzeugen Bilder mit sehr hohen Auflösungen. Das ist für Fotografie, Bearbeitung und Druck sinnvoll, für die Darstellung auf einer Website aber häufig unnötig.
Ein Foto kann beispielsweise mehrere Tausend Pixel breit sein, obwohl es auf der Website maximal mit deutlich geringerer Breite dargestellt wird.
Wird trotzdem die große Originaldatei übertragen, muss der Browser wesentlich mehr Daten herunterladen als für die tatsächliche Darstellung erforderlich wären.
Das kann insbesondere bei mobilen Verbindungen spürbar werden.
Bildabmessungen und Dateigröße sind nicht dasselbe #
Bei der Bildoptimierung solltest du zwei Begriffe unterscheiden:
Bildabmessungen beschreiben die Breite und Höhe eines Bildes in Pixeln.
Beispiel:
1920 × 1080 Pixel
Die Dateigröße beschreibt dagegen, wie viel Speicherplatz die Bilddatei benötigt.
Beispiel:
280 KB
Zwei Bilder mit identischen Pixelabmessungen können sehr unterschiedliche Dateigrößen besitzen. Das hängt unter anderem vom Bildinhalt, Dateiformat und der verwendeten Kompression ab.
Wichtig: Ein Bild wird nicht allein dadurch weboptimiert, dass du seine Dateigröße reduzierst. Auch unnötig große Pixelabmessungen sollten vermieden werden.
Wie groß sollte ein Bild für eine Website sein? #
Es gibt keine einzige Pixelgröße, die für sämtliche Website-Bilder richtig ist.
Die benötigten Abmessungen hängen davon ab, wo und wie das Bild dargestellt wird.
Ein kleines Vorschaubild benötigt andere Abmessungen als ein großes Hero-Bild über die gesamte Breite einer Website.
Die grundlegende Regel lautet:
Praxis-Tipp: Stelle nicht wesentlich mehr Bilddaten bereit, als für die vorgesehene Darstellung tatsächlich benötigt werden.
Originalfotos nicht ungeprüft hochladen #
Ein aktuelles Smartphone kann beispielsweise ein Foto mit mehreren Tausend Pixeln Breite erzeugen.
Wenn dieses Bild auf deiner Website nur innerhalb einer Inhaltsspalte dargestellt wird, kann die vollständige Originalauflösung unnötig sein.
Vor dem Upload solltest du deshalb prüfen, welche maximale Darstellungsgröße für den konkreten Einsatzzweck sinnvoll ist.
Hochauflösende Displays berücksichtigen #
Bei der Wahl der Bildabmessungen solltest du allerdings nicht nur die sichtbare CSS-Darstellungsbreite betrachten.
Moderne Geräte können hochauflösende Displays besitzen, auf denen zusätzliche Bildinformationen für eine scharfe Darstellung sinnvoll sein können.
Deshalb wäre die pauschale Regel „Bild immer exakt auf die sichtbare Pixelbreite verkleinern“ ebenfalls zu einfach.
Moderne Websites können außerdem unterschiedliche Bildvarianten für verschiedene Displaygrößen beziehungsweise Auflösungen bereitstellen.
Was sind responsive Bilder? #
Responsive Bilder ermöglichen es dem Browser, abhängig von Gerät, Darstellungsgröße und weiteren Faktoren eine geeignete Bildvariante auszuwählen.
Technisch können dafür beispielsweise HTML-Mechanismen wie srcset und sizes verwendet werden.
Vereinfacht:
kleines Display
↓
kleinere Bildvariante
größeres Display
↓
größere BildvarianteViele moderne Content-Management-Systeme erzeugen beziehungsweise verwenden solche Varianten automatisch. Trotzdem solltest du nicht davon ausgehen, dass dadurch jede beliebig große Originaldatei automatisch optimal wird.
Welches Bildformat sollte ich verwenden? #
Für Websites kommen mehrere Bildformate infrage. Sie besitzen unterschiedliche Eigenschaften und eignen sich deshalb nicht für jeden Inhalt gleich gut.
Zu den heute relevanten Formaten gehören insbesondere:
JPEG / JPG
PNG
WebP
AVIF
SVGWelches Format sinnvoll ist, hängt unter anderem davon ab, ob es sich um ein Foto, eine Grafik, ein Logo oder ein Bild mit Transparenz handelt.
Die Unterschiede zwischen WebP, AVIF, JPEG und PNG behandeln wir ausführlich unter WebP, AVIF, JPG und PNG: Welches Bildformat verwenden?.
JPEG beziehungsweise JPG #
JPEG ist seit vielen Jahren ein verbreitetes Format für Fotos.
Es verwendet verlustbehaftete Kompression. Dadurch kann die Dateigröße deutlich reduziert werden, wobei je nach Kompressionsstärke Bildinformationen verloren gehen.
JPEG eignet sich insbesondere für fotografische Motive mit vielen Farben und Farbverläufen.
Für Grafiken mit Transparenz ist klassisches JPEG dagegen nicht geeignet.
PNG #
PNG verwendet verlustfreie Kompression und unterstützt Transparenz.
Das Format eignet sich beispielsweise für bestimmte Grafiken, Screenshots oder Inhalte, bei denen scharfe Kanten beziehungsweise Transparenz wichtig sind.
Bei großen Fotografien kann eine PNG-Datei jedoch erheblich größer sein als eine sinnvoll komprimierte Alternative.
Ein Foto sollte deshalb nicht automatisch als PNG gespeichert werden, nur weil dieses Format bekannt ist.
WebP #
WebP ist ein modernes Bildformat für das Web und unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz.
Bei geeigneten Einstellungen lassen sich damit häufig kleinere Dateien als mit älteren Formaten erreichen, ohne dass die sichtbare Qualität entsprechend stark reduziert werden muss.
WebP wird von modernen Browsern breit unterstützt und ist deshalb für viele Website-Anwendungen eine praktische Option.
AVIF #
AVIF ist ein weiteres modernes Bildformat, das eine effiziente Kompression ermöglichen kann.
Insbesondere bei fotografischen Inhalten können damit bei geeigneter Konfiguration sehr kleine Dateien bei guter sichtbarer Qualität erzielt werden.
Das bedeutet jedoch nicht, dass AVIF automatisch für jedes Bild die beste Wahl ist. Kodierungsaufwand, Bildinhalt, gewünschte Qualität und der technische Workflow der Website spielen ebenfalls eine Rolle.
SVG für Logos und Vektorgrafiken #
SVG unterscheidet sich grundlegend von klassischen Pixelbildern.
Es handelt sich um ein Vektorformat. Formen und Linien werden mathematisch beziehungsweise als strukturierte Vektordaten beschrieben und nicht als festes Raster einzelner Bildpunkte gespeichert.
Dadurch können geeignete SVG-Grafiken ohne den typischen Qualitätsverlust eines Pixelbildes skaliert werden.
SVG eignet sich beispielsweise für Logos, Icons und bestimmte Illustrationen.
Achtung: SVG-Dateien können aktiven beziehungsweise komplexen Inhalt enthalten. Verwende SVG-Dateien nur aus vertrauenswürdigen Quellen und beachte die Sicherheitsmechanismen deines CMS beziehungsweise deiner Website-Anwendung.
Nicht jedes Bildformat eignet sich für jeden Inhalt #
Eine einfache Orientierung:
| Bildtyp | Häufig geeignete Formate |
|---|---|
| Foto | WebP, AVIF, JPEG |
| Grafik mit Transparenz | WebP, PNG, je nach Inhalt AVIF |
| Logo oder Icon als Vektorgrafik | SVG |
| Screenshot | PNG oder WebP, abhängig vom Inhalt |
Diese Tabelle ist eine Orientierung und keine starre Regel. Ein konkreter Qualitäts- und Größenvergleich kann bei wichtigen Bildern sinnvoll sein.
Was bedeutet Bildkompression? #
Bei der Kompression werden Bilddaten so gespeichert, dass die resultierende Datei weniger Speicherplatz benötigt.
Dabei wird zwischen verlustfreier und verlustbehafteter Kompression unterschieden.
Verlustfreie Kompression #
Bei verlustfreier Kompression werden die Bilddaten so komprimiert, dass die ursprünglichen Informationen grundsätzlich wiederhergestellt werden können.
Verlustbehaftete Kompression #
Bei verlustbehafteter Kompression werden Bildinformationen entfernt beziehungsweise vereinfacht, um kleinere Dateien zu erreichen.
Je stärker die Kompression, desto eher können sichtbare Artefakte oder Qualitätsverluste entstehen.
Die kleinste Datei ist nicht automatisch die beste Datei #
Das Ziel der Bildoptimierung ist nicht, um jeden Preis die kleinstmögliche Datei zu erzeugen.
Ein Foto mit extrem starker Kompression kann zwar sehr klein sein, aber sichtbar an Qualität verlieren.
Du suchst deshalb einen sinnvollen Kompromiss:
gute sichtbare Qualität
+
passende Abmessungen
+
effizientes Format
+
angemessene Kompression
=
gut optimiertes WebbildBildqualität nach der Kompression kontrollieren #
Verlasse dich nicht ausschließlich auf einen Prozentwert eines Bildprogramms.
Eine Qualitätsstufe von beispielsweise „80“ ist nicht zwischen allen Programmen, Codecs und Formaten direkt vergleichbar.
Kontrolliere das fertige Bild visuell.
Achte insbesondere auf:
unschöne Blockbildung
verwaschene Details
Farbstufen in Verläufen
unsaubere Kanten
Text, der schwer lesbar wird
sichtbare ArtefakteWarum große Bilder die Ladezeit beeinflussen #
Bilddateien müssen vom Server zum Browser übertragen werden.
Je mehr Daten für eine Seite übertragen werden müssen, desto stärker kann dies insbesondere bei langsameren oder mobilen Verbindungen ins Gewicht fallen.
Angenommen, eine Seite enthält mehrere nicht optimierte Bilder:
Bild 1: 4,0 MB
Bild 2: 3,2 MB
Bild 3: 2,5 MB
Bild 4: 3,8 MB
Gesamt: 13,5 MBAllein diese vier Bilder verursachen dann bereits eine erhebliche Datenmenge.
Wenn dieselben Bilder bei vergleichbarer sichtbarer Qualität deutlich effizienter bereitgestellt werden können, kann das die übertragene Datenmenge wesentlich reduzieren.
Keine pauschale maximale Dateigröße festlegen #
Im Internet findest du Empfehlungen wie „jedes Bild muss unter 100 KB sein“ oder „Bilder dürfen maximal 200 KB groß sein“.
Solche festen Grenzwerte sind zu pauschal.
Ein kleines Vorschaubild und ein großes, detailreiches Hero-Foto erfüllen völlig unterschiedliche Aufgaben.
Die Frage sollte deshalb nicht lauten:
„Ist dieses Bild unter einer bestimmten KB-Grenze?“
Sondern:
„Ist diese Datei für ihren konkreten Einsatzzweck unnötig groß?“
Was bedeutet Lazy Loading? #
Lazy Loading bedeutet vereinfacht, dass bestimmte Bilder erst geladen werden, wenn sie benötigt werden beziehungsweise sich dem sichtbaren Bereich nähern.
Dadurch müssen beim ersten Seitenaufruf nicht zwingend sofort alle weiter unten liegenden Bilder vollständig geladen werden.
sichtbarer Bereich
[ Bild wird benötigt ]
weiter unten
[ Bild kann später geladen werden ]Moderne Browser unterstützen für geeignete HTML-Bilder beispielsweise das Attribut loading="lazy".
Nicht jedes Bild sollte blind verzögert geladen werden #
Ein Bild, das beim Seitenaufruf sofort im sichtbaren oberen Bereich benötigt wird, sollte nicht ohne Prüfung unnötig verzögert werden.
Das betrifft insbesondere wichtige visuelle Inhalte im ersten sichtbaren Bereich einer Seite.
Lazy Loading ist deshalb eine Optimierungstechnik, die sinnvoll eingesetzt werden sollte, und kein Schalter nach dem Prinzip „je mehr, desto besser“.
Bilder und Core Web Vitals #
Bilder können auch die von Google verwendeten Core Web Vitals beeinflussen.
Ein großes sichtbares Bild kann beispielsweise für den Messwert Largest Contentful Paint relevant sein.
Fehlen für Bilder geeignete Größeninformationen, können sich außerdem während des Ladens Layoutverschiebungen ergeben.
Die Core Web Vitals behandeln wir ausführlich unter Core Web Vitals erklärt: LCP, INP und CLS.
Breite und Höhe im HTML können Layoutverschiebungen reduzieren #
Wenn der Browser die Abmessungen eines Bildes bereits vor dem vollständigen Laden kennt, kann er den benötigten Platz im Layout frühzeitig berücksichtigen.
Bei einem normalen HTML-Bild können beispielsweise die Attribute width und height dabei helfen, das Seitenverhältnis beziehungsweise den benötigten Platz festzulegen.
Moderne CMS und Website-Systeme übernehmen dies häufig automatisch. Trotzdem lohnt es sich bei auffälligen Layoutverschiebungen zu prüfen, wie Bilder eingebunden werden.
Bilder und SEO #
Bildoptimierung für Suchmaschinen besteht nicht nur aus möglichst kleinen Dateien.
Suchmaschinen berücksichtigen verschiedene Informationen, um den Inhalt und Zusammenhang einer Seite beziehungsweise eines Bildes zu verstehen.
Dazu gehören unter anderem der umgebende Seiteninhalt, die technische Einbindung und beschreibende Informationen zum Bild.
Sinnvolle Dateinamen verwenden #
Ein verständlicher Dateiname kann helfen, eine Bilddatei organisatorisch und inhaltlich einzuordnen.
Wenig aussagekräftig:
IMG_847293.jpg
Verständlicher:
webhosting-cpanel-dashboard.webp
Der Dateiname sollte den tatsächlichen Bildinhalt beschreiben. Vermeide künstliche Aneinanderreihungen von Keywords.
Was ist ein Alt-Text? #
Das HTML-Attribut alt stellt eine textliche Alternative für ein Bild bereit.
Ein vereinfachtes Beispiel:
<img
src="cpanel-dashboard.webp"
alt="Übersicht des cPanel Dashboards"
>Alternativtexte sind insbesondere für die Barrierefreiheit wichtig, beispielsweise wenn ein Screenreader den Inhalt einer Seite vermittelt oder ein Bild nicht dargestellt werden kann.
Wie schreibe ich einen guten Alt-Text? #
Der Alternativtext sollte den relevanten Inhalt beziehungsweise Zweck des Bildes im jeweiligen Kontext knapp und verständlich vermitteln.
Schlecht:
Bild
Ebenfalls schlecht:
Webhosting Hosting Schweiz bestes Hosting günstiges Hosting cPanel
Besser bei einem entsprechenden Screenshot:
Übersicht des cPanel Dashboards
Ein Alt-Text ist kein Feld zum Ansammeln möglichst vieler Suchbegriffe.
Wichtig: Schreibe Alternativtexte in erster Linie so, dass sie den Zweck beziehungsweise relevanten Bildinhalt sinnvoll vermitteln. Barrierefreiheit und Verständlichkeit sind wichtiger als Keyword-Stuffing.
Dekorative Bilder benötigen eine andere Behandlung #
Nicht jedes Bild transportiert relevante Informationen.
Bei rein dekorativen Bildern kann ein leerer Alternativtext technisch sinnvoll sein, damit assistive Technologien das Bild überspringen können.
Im HTML kann dies beispielsweise so aussehen:
alt=""
Ob ein Bild dekorativ oder inhaltlich relevant ist, hängt von seiner Funktion im konkreten Seitenkontext ab.
Text nicht unnötig in Bilder einbauen #
Wichtige Informationen sollten nach Möglichkeit als echter HTML-Text auf der Webseite vorhanden sein und nicht ausschließlich innerhalb einer Grafik stehen.
Das hat mehrere Vorteile:
Text kann besser skaliert werden
Text kann kopiert werden
Screenreader können ihn verarbeiten
Übersetzungen sind einfacher
Inhalte können responsiver dargestellt werden
Suchmaschinen erhalten direkten TextinhaltGrafiken mit Text können selbstverständlich sinnvoll sein. Kritische Informationen sollten aber nicht ausschließlich darin versteckt werden.
Bilder im richtigen Seitenkontext verwenden #
Ein Bild sollte zum Inhalt der Seite passen.
Ein Screenshot des cPanel Dashboards ist beispielsweise sinnvoll in einer Anleitung über cPanel. Derselbe Screenshot liefert auf einer völlig themenfremden Seite keinen zusätzlichen Kontext.
Auch Bildunterschriften können sinnvoll sein, wenn sie dem Besucher zusätzliche Informationen vermitteln.
Bildoptimierung und PageSpeed #
Analysewerkzeuge können darauf hinweisen, dass Bilder effizienter kodiert, anders dimensioniert oder in einem moderneren Format bereitgestellt werden könnten.
Solche Hinweise solltest du im Kontext der tatsächlichen Website beurteilen.
Wie du Ladezeitmessungen richtig interpretierst, erklären wir später unter Website-Ladezeit messen und richtig beurteilen.
Den Umgang mit Google PageSpeed Insights behandeln wir zusätzlich unter Google PageSpeed Insights richtig verwenden.
PageSpeed-Werte nicht blind optimieren #
Ein Analysewerkzeug ist eine Diagnosehilfe und kein Selbstzweck.
Es ist nicht sinnvoll, ein sichtbar wichtiges Bild so stark zu komprimieren, dass die Qualität deutlich leidet, nur um einen einzelnen Messwert zu verbessern.
Bewerte immer den tatsächlichen Nutzen einer Optimierung.
Metadaten in Bilddateien #
Bilddateien können zusätzliche Metadaten enthalten, beispielsweise Informationen zur Aufnahme oder zur verwendeten Software.
Je nach Einsatzzweck können solche Metadaten unnötige Daten enthalten oder Informationen offenlegen, die du nicht veröffentlichen möchtest.
Bei Bildern für eine öffentliche Website kann es deshalb sinnvoll sein, zu prüfen, welche Metadaten tatsächlich enthalten sind und benötigt werden.
Datenschutz-Tipp: Prüfe insbesondere bei privaten oder mit Smartphones aufgenommenen Bildern, ob Metadaten enthalten sind, die du nicht öffentlich bereitstellen möchtest.
Bildrechte und Lizenzen nicht vergessen #
Technische Optimierung sagt nichts darüber aus, ob du ein Bild rechtmäßig verwenden darfst.
Verwende nur Bilder, für deren Veröffentlichung du die erforderlichen Rechte besitzt beziehungsweise deren Lizenz die geplante Nutzung erlaubt.
Beachte gegebenenfalls erforderliche Urheber- oder Quellenangaben.
Originaldateien separat aufbewahren #
Wenn du ein hochwertiges Originalfoto für das Web verkleinerst und komprimierst, solltest du die Originaldatei nicht unbedingt durch die optimierte Version ersetzen.
Bewahre hochwertige Ausgangsdateien separat auf, falls du später eine andere Größe, einen anderen Ausschnitt oder eine höher aufgelöste Variante benötigst.
Die Webversion ist eine für einen bestimmten Einsatzzweck optimierte Ausgabe – nicht zwingend dein Archiv-Original.
Bilder nicht mehrfach unnötig komprimieren #
Bei verlustbehafteten Formaten kann wiederholtes Öffnen, Bearbeiten und erneutes starkes Komprimieren die Bildqualität schrittweise verschlechtern.
Erzeuge neue Webversionen deshalb nach Möglichkeit aus einer hochwertigen Ausgangsdatei.
Original
↓
Webversion erzeugen
besser als:
bereits stark komprimierte Datei
↓
erneut komprimieren
↓
erneut komprimierenScreenshots für Anleitungen optimieren #
Bei Screenshots ist vor allem wichtig, dass die relevanten Bedienelemente und Texte gut lesbar bleiben.
Schneide unnötige Bereiche weg, bevor du den Screenshot verkleinerst.
Ein gezielter Ausschnitt ist häufig hilfreicher und kleiner als ein kompletter Bildschirm, auf dem der relevante Bereich kaum erkennbar ist.
Achte außerdem darauf, keine vertraulichen Informationen, Kundendaten, Zugangsdaten oder andere sensible Inhalte versehentlich im Screenshot zu veröffentlichen.
Hero-Bilder besonders beachten #
Große Bilder im oberen sichtbaren Bereich einer Seite verdienen besondere Aufmerksamkeit.
Sie können einen erheblichen Teil der sichtbaren Fläche einnehmen und bereits unmittelbar beim Seitenaufruf benötigt werden.
Hier solltest du besonders sorgfältig zwischen Bildqualität, Abmessungen und Dateigröße abwägen.
Ein solches Bild einfach extrem klein zu komprimieren oder pauschal verzögert zu laden, ist nicht automatisch die beste Lösung.
Hintergrundbilder nicht vergessen #
Bilder können nicht nur über ein normales HTML-Bildelement eingebunden werden.
Auch CSS-Hintergrundbilder können große Datenmengen verursachen.
Wenn ein Analysewerkzeug auf hohe Bildübertragung hinweist, solltest du deshalb auch Hintergrundgrafiken, Slider und andere visuelle Elemente berücksichtigen.
Slider können mehrere große Bilder laden #
Ein Slider kann mehrere großformatige Bilder enthalten. Abhängig von seiner technischen Umsetzung können dadurch bereits beim Seitenaufruf mehrere Dateien geladen werden.
Prüfe deshalb, ob alle verwendeten Slider-Bilder tatsächlich benötigt werden und sinnvoll optimiert sind.
Mehr Bilder bedeuten nicht automatisch eine bessere Website.
Bildoptimierung für Online-Shops #
Bei einem Online-Shop können Produktbilder einen erheblichen Anteil der übertragenen Daten ausmachen.
Gleichzeitig müssen Kunden Produkte ausreichend detailliert beurteilen können.
Zu starke Kompression kann deshalb ebenso problematisch sein wie unnötig große Originaldateien.
Besonders bei vielen Produkten ist ein konsistenter Workflow für Abmessungen, Format und Qualität hilfreich.
Bildoptimierung bei Blogs und Ratgebern #
Bei längeren Artikeln können sich viele einzelne Bilder zu einer erheblichen Gesamtgröße summieren.
Das betrifft beispielsweise Schritt-für-Schritt-Anleitungen mit zahlreichen Screenshots.
Hier lohnt es sich, jeden Screenshot auf den tatsächlich relevanten Bereich zuzuschneiden und eine passende Webversion zu verwenden.
Vorher und nachher vergleichen #
Bei wichtigen Bildern kannst du die ursprüngliche und optimierte Version vergleichen.
Beispiel:
Original:
4000 × 2667 Pixel
4,8 MB
Webversion:
passende Abmessungen
effizientes Format
420 KB
sichtbare Qualität:
für den vorgesehenen Einsatz vergleichbarDie Zahlen sind nur ein Beispiel. Entscheidend ist nicht ein bestimmter Zielwert, sondern ob die optimierte Datei ihren Zweck bei deutlich effizienterer Datenmenge erfüllt.
Website nach der Bildoptimierung testen #
Nach Änderungen solltest du die Website tatsächlich aufrufen und kontrollieren.
Prüfe insbesondere:
Bildqualität
richtiger Bildausschnitt
Desktop-Darstellung
Smartphone-Darstellung
Galerien und Slider
Links auf Bilder
Layoutverschiebungen
LadeverhaltenEine technisch kleinere Datei bringt keinen Vorteil, wenn danach beispielsweise der falsche Ausschnitt angezeigt wird oder wichtige Details kaum noch erkennbar sind.
Häufige Fehler bei der Bildoptimierung #
Zu den typischen Problemen gehören:
Originalfotos direkt vom Smartphone hochladen
riesige Pixelabmessungen für kleine Darstellungen
Fotos unnötig als große PNG-Dateien speichern
Bilder zu stark komprimieren
für jedes Bild denselben Qualitätswert verwenden
Dateinamen wie IMG_12345 beibehalten
Alt-Texte mit Keywords überladen
jedes Bild pauschal lazy laden
Text ausschließlich als Bild darstellen
große Hintergrundbilder übersehen
Originaldateien nach der Optimierung löschenPraktischer Workflow für neue Website-Bilder #
Bild auswählen
↓
Einsatzzweck bestimmen
↓
passende Abmessungen festlegen
↓
geeignetes Format wählen
↓
sinnvoll komprimieren
↓
Qualität kontrollieren
↓
verständlichen Dateinamen vergeben
↓
auf Website hochladen
↓
Alt-Text entsprechend dem Kontext setzen
↓
Desktop und Smartphone prüfen
↓
Ladeverhalten kontrollierenBestehende Website mit vielen Bildern optimieren #
Wenn deine Website bereits viele Bilder enthält, musst du nicht zwingend jede Datei ohne Priorisierung gleichzeitig bearbeiten.
Beginne mit den Seiten und Bildern, bei denen der größte Nutzen zu erwarten ist.
Das können beispielsweise häufig besuchte Seiten, besonders große Hero-Bilder oder Seiten mit auffällig hoher übertragener Datenmenge sein.
Eine Messung der Website kann dabei helfen, die tatsächlichen Problemstellen zu identifizieren.
Wenn die Website trotz optimierter Bilder langsam bleibt #
Bilder sind nur ein möglicher Faktor für die Ladezeit.
Eine Website kann trotz gut optimierter Bilder langsam sein, wenn beispielsweise andere Ressourcen, externe Dienste, JavaScript, Datenbankzugriffe oder die Anwendung selbst Probleme verursachen.
Die systematische Fehlersuche behandeln wir später unter Langsame Website: Ursachen systematisch finden.
Wichtig: Bildoptimierung ist ein wichtiger Bestandteil der Website-Performance, aber nicht die universelle Lösung für jedes Ladezeitproblem.
Checkliste zur Bildoptimierung #
Passt das Bild zum Inhalt?
↓
Sind die Abmessungen sinnvoll?
↓
Ist das Format geeignet?
↓
Ist die Kompression angemessen?
↓
Bleibt die Qualität ausreichend?
↓
Ist der Dateiname verständlich?
↓
Ist ein sinnvoller Alt-Text vorhanden?
↓
Sind unnötige Metadaten geprüft?
↓
Funktioniert das Bild responsiv?
↓
Ist Lazy Loading sinnvoll eingesetzt?
↓
Desktop und Smartphone getestet?
↓
Ladeverhalten kontrolliert?Zusammenfassung #
Gut optimierte Bilder können die übertragene Datenmenge einer Website erheblich reduzieren und dadurch zu einer besseren Ladeperformance beitragen.
Entscheidend sind dabei nicht nur die Dateigröße, sondern auch passende Pixelabmessungen, ein geeignetes Bildformat und eine sinnvolle Kompression.
JPEG, PNG, WebP, AVIF und SVG besitzen unterschiedliche Eigenschaften. Das richtige Format hängt deshalb vom jeweiligen Bild und seinem Einsatzzweck ab.
Für SEO und Barrierefreiheit solltest du außerdem verständliche Dateinamen, sinnvolle Alternativtexte und einen passenden inhaltlichen Kontext berücksichtigen.
Techniken wie responsive Bilder und Lazy Loading können die Auslieferung zusätzlich optimieren, sollten aber nicht ohne Rücksicht auf den konkreten Einsatzzweck angewendet werden.
Die beste Bildoptimierung reduziert nicht einfach nur Kilobytes. Sie liefert dem Besucher die benötigte Bildqualität mit möglichst wenig unnötigen Daten.
