{"id":22879,"date":"2026-08-30T08:46:06","date_gmt":"2026-08-30T06:46:06","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&p=22879"},"modified":"2026-08-30T08:51:57","modified_gmt":"2026-08-30T06:51:57","password":"","slug":"bilder-fuer-web-optimieren","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/en\/hilfe\/seo-monitoring\/bilder-fuer-web-optimieren\/","title":{"rendered":"Optimizing images for the web: file size, format and SEO"},"content":{"rendered":"

Bilder geh\u00f6ren auf vielen Websites zu den gr\u00f6\u00dften \u00fcbertragenen Dateien. Werden Fotos und Grafiken ohne Optimierung hochgeladen, k\u00f6nnen einzelne Bilder mehrere Megabyte gro\u00df sein und die Ladezeit einer Seite unn\u00f6tig erh\u00f6hen.<\/p>\n\n\n\n

Gute Bildoptimierung bedeutet jedoch nicht, Bilder einfach m\u00f6glichst stark zu komprimieren. Entscheidend ist ein sinnvoller Kompromiss zwischen Bildqualit\u00e4t, Abmessungen, Dateigr\u00f6\u00dfe und dem verwendeten Dateiformat.<\/p>\n\n\n\n

Auch f\u00fcr Suchmaschinen spielen Bilder eine Rolle. Verst\u00e4ndliche Dateinamen, passende Alternativtexte und ein sinnvoller inhaltlicher Zusammenhang helfen dabei, Bilder und ihre Bedeutung besser einzuordnen.<\/p>\n\n\n\n

In dieser Anleitung zeigen wir dir, wie du Bilder f\u00fcr Websites vorbereitest und welche Faktoren f\u00fcr Qualit\u00e4t, Ladezeit und SEO wichtig sind.<\/p>\n\n\n\n

\n

Briefly explained:<\/strong> Ein f\u00fcr das Web optimiertes Bild besitzt die f\u00fcr seinen Einsatzzweck passenden Abmessungen, ein geeignetes Dateiformat und eine m\u00f6glichst kleine Dateigr\u00f6\u00dfe, ohne dass die sichtbare Qualit\u00e4t unn\u00f6tig leidet.<\/p>\n<\/blockquote>\n\n\n\n

Warum sollten Bilder f\u00fcr Websites optimiert werden?<\/h2>\n\n\n\n

Digitalkameras und moderne Smartphones erzeugen Bilder mit sehr hohen Aufl\u00f6sungen. Das ist f\u00fcr Fotografie, Bearbeitung und Druck sinnvoll, f\u00fcr die Darstellung auf einer Website aber h\u00e4ufig unn\u00f6tig.<\/p>\n\n\n\n

Ein Foto kann beispielsweise mehrere Tausend Pixel breit sein, obwohl es auf der Website maximal mit deutlich geringerer Breite dargestellt wird.<\/p>\n\n\n\n

Wird trotzdem die gro\u00dfe Originaldatei \u00fcbertragen, muss der Browser wesentlich mehr Daten herunterladen als f\u00fcr die tats\u00e4chliche Darstellung erforderlich w\u00e4ren.<\/p>\n\n\n\n

Das kann insbesondere bei mobilen Verbindungen sp\u00fcrbar werden.<\/p>\n\n\n\n

Image dimensions and file size are not the same<\/h2>\n\n\n\n

Bei der Bildoptimierung solltest du zwei Begriffe unterscheiden:<\/p>\n\n\n\n

Bildabmessungen<\/strong> beschreiben die Breite und H\u00f6he eines Bildes in Pixeln.<\/p>\n\n\n\n

Example:<\/p>\n\n\n\n

1920 \u00d7 1080 Pixel<\/code><\/p>\n\n\n\n

The File size<\/strong> beschreibt dagegen, wie viel Speicherplatz die Bilddatei ben\u00f6tigt.<\/p>\n\n\n\n

Example:<\/p>\n\n\n\n

280 KB<\/code><\/p>\n\n\n\n

Zwei Bilder mit identischen Pixelabmessungen k\u00f6nnen sehr unterschiedliche Dateigr\u00f6\u00dfen besitzen. Das h\u00e4ngt unter anderem vom Bildinhalt, Dateiformat und der verwendeten Kompression ab.<\/p>\n\n\n\n

\"Originalbild<\/figure>\n\n\n\n
\n

Important:<\/strong> Ein Bild wird nicht allein dadurch weboptimiert, dass du seine Dateigr\u00f6\u00dfe reduzierst. Auch unn\u00f6tig gro\u00dfe Pixelabmessungen sollten vermieden werden.<\/p>\n<\/blockquote>\n\n\n\n

Wie gro\u00df sollte ein Bild f\u00fcr eine Website sein?<\/h2>\n\n\n\n

Es gibt keine einzige Pixelgr\u00f6\u00dfe, die f\u00fcr s\u00e4mtliche Website-Bilder richtig ist.<\/p>\n\n\n\n

Die ben\u00f6tigten Abmessungen h\u00e4ngen davon ab, wo und wie das Bild dargestellt wird.<\/p>\n\n\n\n

Ein kleines Vorschaubild ben\u00f6tigt andere Abmessungen als ein gro\u00dfes Hero-Bild \u00fcber die gesamte Breite einer Website.<\/p>\n\n\n\n

Die grundlegende Regel lautet:<\/p>\n\n\n\n

\n

Practical Tip:<\/strong> Stelle nicht wesentlich mehr Bilddaten bereit, als f\u00fcr die vorgesehene Darstellung tats\u00e4chlich ben\u00f6tigt werden.<\/p>\n<\/blockquote>\n\n\n\n

Originalfotos nicht ungepr\u00fcft hochladen<\/h2>\n\n\n\n

Ein aktuelles Smartphone kann beispielsweise ein Foto mit mehreren Tausend Pixeln Breite erzeugen.<\/p>\n\n\n\n

Wenn dieses Bild auf deiner Website nur innerhalb einer Inhaltsspalte dargestellt wird, kann die vollst\u00e4ndige Originalaufl\u00f6sung unn\u00f6tig sein.<\/p>\n\n\n\n

Vor dem Upload solltest du deshalb pr\u00fcfen, welche maximale Darstellungsgr\u00f6\u00dfe f\u00fcr den konkreten Einsatzzweck sinnvoll ist.<\/p>\n\n\n\n

Hochaufl\u00f6sende Displays ber\u00fccksichtigen<\/h2>\n\n\n\n

Bei der Wahl der Bildabmessungen solltest du allerdings nicht nur die sichtbare CSS-Darstellungsbreite betrachten.<\/p>\n\n\n\n

Moderne Ger\u00e4te k\u00f6nnen hochaufl\u00f6sende Displays besitzen, auf denen zus\u00e4tzliche Bildinformationen f\u00fcr eine scharfe Darstellung sinnvoll sein k\u00f6nnen.<\/p>\n\n\n\n

Deshalb w\u00e4re die pauschale Regel \u201eBild immer exakt auf die sichtbare Pixelbreite verkleinern\u201c ebenfalls zu einfach.<\/p>\n\n\n\n

Moderne Websites k\u00f6nnen au\u00dferdem unterschiedliche Bildvarianten f\u00fcr verschiedene Displaygr\u00f6\u00dfen beziehungsweise Aufl\u00f6sungen bereitstellen.<\/p>\n\n\n\n

Was sind responsive Bilder?<\/h2>\n\n\n\n

Responsive Bilder erm\u00f6glichen es dem Browser, abh\u00e4ngig von Ger\u00e4t, Darstellungsgr\u00f6\u00dfe und weiteren Faktoren eine geeignete Bildvariante auszuw\u00e4hlen.<\/p>\n\n\n\n

Technisch k\u00f6nnen daf\u00fcr beispielsweise HTML-Mechanismen wie srcset<\/code> and sizes<\/code> be used.<\/p>\n\n\n\n

Simplified:<\/p>\n\n\n\n

kleines Display\n      \u2193\nkleinere Bildvariante\n\ngr\u00f6\u00dferes Display\n      \u2193\ngr\u00f6\u00dfere Bildvariante<\/code><\/pre>\n\n\n\n
Viele moderne Content-Management-Systeme erzeugen beziehungsweise verwenden solche Varianten automatisch. Trotzdem solltest du nicht davon ausgehen, dass dadurch jede beliebig gro\u00dfe Originaldatei automatisch optimal wird.<\/p>\n\n\n\n
Which image format should I use?<\/h2>\n\n\n\n
F\u00fcr Websites kommen mehrere Bildformate infrage. Sie besitzen unterschiedliche Eigenschaften und eignen sich deshalb nicht f\u00fcr jeden Inhalt gleich gut.<\/p>\n\n\n\n
Zu den heute relevanten Formaten geh\u00f6ren insbesondere:<\/p>\n\n\n\n
JPEG \/ JPG\nPNG\nWebP\nAVIF\nSVG<\/code><\/pre>\n\n\n\n
Welches Format sinnvoll ist, h\u00e4ngt unter anderem davon ab, ob es sich um ein Foto, eine Grafik, ein Logo oder ein Bild mit Transparenz handelt.<\/p>\n\n\n\n
Die Unterschiede zwischen WebP, AVIF, JPEG und PNG behandeln wir ausf\u00fchrlich unter WebP, AVIF, JPG and PNG: Which image format to use?<\/a>.<\/p>\n\n\n\n
JPEG beziehungsweise JPG<\/h2>\n\n\n\n
JPEG ist seit vielen Jahren ein verbreitetes Format f\u00fcr Fotos.<\/p>\n\n\n\n
Es verwendet verlustbehaftete Kompression. Dadurch kann die Dateigr\u00f6\u00dfe deutlich reduziert werden, wobei je nach Kompressionsst\u00e4rke Bildinformationen verloren gehen.<\/p>\n\n\n\n
JPEG eignet sich insbesondere f\u00fcr fotografische Motive mit vielen Farben und Farbverl\u00e4ufen.<\/p>\n\n\n\n
F\u00fcr Grafiken mit Transparenz ist klassisches JPEG dagegen nicht geeignet.<\/p>\n\n\n\n
PNG<\/h2>\n\n\n\n
PNG verwendet verlustfreie Kompression und unterst\u00fctzt Transparenz.<\/p>\n\n\n\n
Das Format eignet sich beispielsweise f\u00fcr bestimmte Grafiken, Screenshots oder Inhalte, bei denen scharfe Kanten beziehungsweise Transparenz wichtig sind.<\/p>\n\n\n\n
Bei gro\u00dfen Fotografien kann eine PNG-Datei jedoch erheblich gr\u00f6\u00dfer sein als eine sinnvoll komprimierte Alternative.<\/p>\n\n\n\n
Ein Foto sollte deshalb nicht automatisch als PNG gespeichert werden, nur weil dieses Format bekannt ist.<\/p>\n\n\n\n
WebP<\/h2>\n\n\n\n
WebP ist ein modernes Bildformat f\u00fcr das Web und unterst\u00fctzt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz.<\/p>\n\n\n\n
Bei geeigneten Einstellungen lassen sich damit h\u00e4ufig kleinere Dateien als mit \u00e4lteren Formaten erreichen, ohne dass die sichtbare Qualit\u00e4t entsprechend stark reduziert werden muss.<\/p>\n\n\n\n
WebP wird von modernen Browsern breit unterst\u00fctzt und ist deshalb f\u00fcr viele Website-Anwendungen eine praktische Option.<\/p>\n\n\n\n
AVIF<\/h2>\n\n\n\n
AVIF ist ein weiteres modernes Bildformat, das eine effiziente Kompression erm\u00f6glichen kann.<\/p>\n\n\n\n
Insbesondere bei fotografischen Inhalten k\u00f6nnen damit bei geeigneter Konfiguration sehr kleine Dateien bei guter sichtbarer Qualit\u00e4t erzielt werden.<\/p>\n\n\n\n
Das bedeutet jedoch nicht, dass AVIF automatisch f\u00fcr jedes Bild die beste Wahl ist. Kodierungsaufwand, Bildinhalt, gew\u00fcnschte Qualit\u00e4t und der technische Workflow der Website spielen ebenfalls eine Rolle.<\/p>\n\n\n\n
SVG f\u00fcr Logos und Vektorgrafiken<\/h2>\n\n\n\n
SVG unterscheidet sich grundlegend von klassischen Pixelbildern.<\/p>\n\n\n\n
Es handelt sich um ein Vektorformat. Formen und Linien werden mathematisch beziehungsweise als strukturierte Vektordaten beschrieben und nicht als festes Raster einzelner Bildpunkte gespeichert.<\/p>\n\n\n\n
Dadurch k\u00f6nnen geeignete SVG-Grafiken ohne den typischen Qualit\u00e4tsverlust eines Pixelbildes skaliert werden.<\/p>\n\n\n\n
SVG eignet sich beispielsweise f\u00fcr Logos, Icons und bestimmte Illustrationen.<\/p>\n\n\n\n
\n
Attention:<\/strong> SVG-Dateien k\u00f6nnen aktiven beziehungsweise komplexen Inhalt enthalten. Verwende SVG-Dateien nur aus vertrauensw\u00fcrdigen Quellen und beachte die Sicherheitsmechanismen deines CMS beziehungsweise deiner Website-Anwendung.<\/p>\n<\/blockquote>\n\n\n\n
Nicht jedes Bildformat eignet sich f\u00fcr jeden Inhalt<\/h2>\n\n\n\n
Eine einfache Orientierung:<\/p>\n\n\n\n
Bildtyp<\/th>H\u00e4ufig geeignete Formate<\/th><\/tr><\/thead>
Foto<\/td>WebP, AVIF, JPEG<\/td><\/tr>
Grafik mit Transparenz<\/td>WebP, PNG, je nach Inhalt AVIF<\/td><\/tr>
Logo oder Icon als Vektorgrafik<\/td>SVG<\/td><\/tr>
Screenshot<\/td>PNG oder WebP, abh\u00e4ngig vom Inhalt<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Diese Tabelle ist eine Orientierung und keine starre Regel. Ein konkreter Qualit\u00e4ts- und Gr\u00f6\u00dfenvergleich kann bei wichtigen Bildern sinnvoll sein.<\/p>\n\n\n\n
Was bedeutet Bildkompression?<\/h2>\n\n\n\n
Bei der Kompression werden Bilddaten so gespeichert, dass die resultierende Datei weniger Speicherplatz ben\u00f6tigt.<\/p>\n\n\n\n
Dabei wird zwischen verlustfreier und verlustbehafteter Kompression unterschieden.<\/p>\n\n\n\n
Verlustfreie Kompression<\/h3>\n\n\n\n
Bei verlustfreier Kompression werden die Bilddaten so komprimiert, dass die urspr\u00fcnglichen Informationen grunds\u00e4tzlich wiederhergestellt werden k\u00f6nnen.<\/p>\n\n\n\n
Verlustbehaftete Kompression<\/h3>\n\n\n\n
Bei verlustbehafteter Kompression werden Bildinformationen entfernt beziehungsweise vereinfacht, um kleinere Dateien zu erreichen.<\/p>\n\n\n\n
Je st\u00e4rker die Kompression, desto eher k\u00f6nnen sichtbare Artefakte oder Qualit\u00e4tsverluste entstehen.<\/p>\n\n\n\n
Die kleinste Datei ist nicht automatisch die beste Datei<\/h2>\n\n\n\n
Das Ziel der Bildoptimierung ist nicht, um jeden Preis die kleinstm\u00f6gliche Datei zu erzeugen.<\/p>\n\n\n\n
Ein Foto mit extrem starker Kompression kann zwar sehr klein sein, aber sichtbar an Qualit\u00e4t verlieren.<\/p>\n\n\n\n
Du suchst deshalb einen sinnvollen Kompromiss:<\/p>\n\n\n\n
gute sichtbare Qualit\u00e4t\n        +\npassende Abmessungen\n        +\neffizientes Format\n        +\nangemessene Kompression\n        =\ngut optimiertes Webbild<\/code><\/pre>\n\n\n\n
Bildqualit\u00e4t nach der Kompression kontrollieren<\/h2>\n\n\n\n
Verlasse dich nicht ausschlie\u00dflich auf einen Prozentwert eines Bildprogramms.<\/p>\n\n\n\n
Eine Qualit\u00e4tsstufe von beispielsweise \u201e80\u201c ist nicht zwischen allen Programmen, Codecs und Formaten direkt vergleichbar.<\/p>\n\n\n\n
Kontrolliere das fertige Bild visuell.<\/p>\n\n\n\n
Pay special attention to:<\/p>\n\n\n\n
unsch\u00f6ne Blockbildung\nverwaschene Details\nFarbstufen in Verl\u00e4ufen\nunsaubere Kanten\nText, der schwer lesbar wird\nsichtbare Artefakte<\/code><\/pre>\n\n\n\n
Warum gro\u00dfe Bilder die Ladezeit beeinflussen<\/h2>\n\n\n\n
Bilddateien m\u00fcssen vom Server zum Browser \u00fcbertragen werden.<\/p>\n\n\n\n
Je mehr Daten f\u00fcr eine Seite \u00fcbertragen werden m\u00fcssen, desto st\u00e4rker kann dies insbesondere bei langsameren oder mobilen Verbindungen ins Gewicht fallen.<\/p>\n\n\n\n
Angenommen, eine Seite enth\u00e4lt mehrere nicht optimierte Bilder:<\/p>\n\n\n\n
Bild 1: 4,0 MB\nBild 2: 3,2 MB\nBild 3: 2,5 MB\nBild 4: 3,8 MB\n\nGesamt: 13,5 MB<\/code><\/pre>\n\n\n\n
Allein diese vier Bilder verursachen dann bereits eine erhebliche Datenmenge.<\/p>\n\n\n\n
Wenn dieselben Bilder bei vergleichbarer sichtbarer Qualit\u00e4t deutlich effizienter bereitgestellt werden k\u00f6nnen, kann das die \u00fcbertragene Datenmenge wesentlich reduzieren.<\/p>\n\n\n\n
Keine pauschale maximale Dateigr\u00f6\u00dfe festlegen<\/h2>\n\n\n\n
Im Internet findest du Empfehlungen wie \u201ejedes Bild muss unter 100 KB sein\u201c oder \u201eBilder d\u00fcrfen maximal 200 KB gro\u00df sein\u201c.<\/p>\n\n\n\n
Solche festen Grenzwerte sind zu pauschal.<\/p>\n\n\n\n
Ein kleines Vorschaubild und ein gro\u00dfes, detailreiches Hero-Foto erf\u00fcllen v\u00f6llig unterschiedliche Aufgaben.<\/p>\n\n\n\n
Die Frage sollte deshalb nicht lauten:<\/p>\n\n\n\n
\u201eIst dieses Bild unter einer bestimmten KB-Grenze?\u201c<\/em><\/p>\n\n\n\n
Rather:<\/p>\n\n\n\n
\u201eIst diese Datei f\u00fcr ihren konkreten Einsatzzweck unn\u00f6tig gro\u00df?\u201c<\/em><\/p>\n\n\n\n
Was bedeutet Lazy Loading?<\/h2>\n\n\n\n
Lazy Loading bedeutet vereinfacht, dass bestimmte Bilder erst geladen werden, wenn sie ben\u00f6tigt werden beziehungsweise sich dem sichtbaren Bereich n\u00e4hern.<\/p>\n\n\n\n
Dadurch m\u00fcssen beim ersten Seitenaufruf nicht zwingend sofort alle weiter unten liegenden Bilder vollst\u00e4ndig geladen werden.<\/p>\n\n\n\n
sichtbarer Bereich\n[ Bild wird ben\u00f6tigt ]\n\nweiter unten\n[ Bild kann sp\u00e4ter geladen werden ]<\/code><\/pre>\n\n\n\n
Moderne Browser unterst\u00fctzen f\u00fcr geeignete HTML-Bilder beispielsweise das Attribut loading=\"lazy\"<\/code>.<\/p>\n\n\n\n
Nicht jedes Bild sollte blind verz\u00f6gert geladen werden<\/h2>\n\n\n\n
Ein Bild, das beim Seitenaufruf sofort im sichtbaren oberen Bereich ben\u00f6tigt wird, sollte nicht ohne Pr\u00fcfung unn\u00f6tig verz\u00f6gert werden.<\/p>\n\n\n\n
Das betrifft insbesondere wichtige visuelle Inhalte im ersten sichtbaren Bereich einer Seite.<\/p>\n\n\n\n
Lazy Loading ist deshalb eine Optimierungstechnik, die sinnvoll eingesetzt werden sollte, und kein Schalter nach dem Prinzip \u201eje mehr, desto besser\u201c.<\/p>\n\n\n\n
Bilder und Core Web Vitals<\/h2>\n\n\n\n
Bilder k\u00f6nnen auch die von Google verwendeten Core Web Vitals beeinflussen.<\/p>\n\n\n\n
Ein gro\u00dfes sichtbares Bild kann beispielsweise f\u00fcr den Messwert Largest Contentful Paint relevant sein.<\/p>\n\n\n\n
Fehlen f\u00fcr Bilder geeignete Gr\u00f6\u00dfeninformationen, k\u00f6nnen sich au\u00dferdem w\u00e4hrend des Ladens Layoutverschiebungen ergeben.<\/p>\n\n\n\n
Die Core Web Vitals behandeln wir ausf\u00fchrlich unter Core Web Vitals Explained: LCP, INP and CLS<\/a>.<\/p>\n\n\n\n
Breite und H\u00f6he im HTML k\u00f6nnen Layoutverschiebungen reduzieren<\/h2>\n\n\n\n
Wenn der Browser die Abmessungen eines Bildes bereits vor dem vollst\u00e4ndigen Laden kennt, kann er den ben\u00f6tigten Platz im Layout fr\u00fchzeitig ber\u00fccksichtigen.<\/p>\n\n\n\n
Bei einem normalen HTML-Bild k\u00f6nnen beispielsweise die Attribute width<\/code> and height<\/code> dabei helfen, das Seitenverh\u00e4ltnis beziehungsweise den ben\u00f6tigten Platz festzulegen.<\/p>\n\n\n\n
Moderne CMS und Website-Systeme \u00fcbernehmen dies h\u00e4ufig automatisch. Trotzdem lohnt es sich bei auff\u00e4lligen Layoutverschiebungen zu pr\u00fcfen, wie Bilder eingebunden werden.<\/p>\n\n\n\n
Bilder und SEO<\/h2>\n\n\n\n
Bildoptimierung f\u00fcr Suchmaschinen besteht nicht nur aus m\u00f6glichst kleinen Dateien.<\/p>\n\n\n\n
Suchmaschinen ber\u00fccksichtigen verschiedene Informationen, um den Inhalt und Zusammenhang einer Seite beziehungsweise eines Bildes zu verstehen.<\/p>\n\n\n\n
Dazu geh\u00f6ren unter anderem der umgebende Seiteninhalt, die technische Einbindung und beschreibende Informationen zum Bild.<\/p>\n\n\n\n
Use meaningful file names<\/h2>\n\n\n\n
Ein verst\u00e4ndlicher Dateiname kann helfen, eine Bilddatei organisatorisch und inhaltlich einzuordnen.<\/p>\n\n\n\n
Wenig aussagekr\u00e4ftig:<\/p>\n\n\n\n
IMG_847293.jpg<\/code><\/p>\n\n\n\n
Verst\u00e4ndlicher:<\/p>\n\n\n\n
webhosting-cpanel-dashboard.webp<\/code><\/p>\n\n\n\n
Der Dateiname sollte den tats\u00e4chlichen Bildinhalt beschreiben. Vermeide k\u00fcnstliche Aneinanderreihungen von Keywords.<\/p>\n\n\n\n
Was ist ein Alt-Text?<\/h2>\n\n\n\n
Das HTML-Attribut alt<\/code> stellt eine textliche Alternative f\u00fcr ein Bild bereit.<\/p>\n\n\n\n
A simplified example:<\/p>\n\n\n\n
<img\n  src="cpanel-dashboard.webp"\n  alt="Übersicht des cPanel Dashboards"\n><\/code><\/pre>\n\n\n\n
Alternativtexte sind insbesondere f\u00fcr die Barrierefreiheit wichtig, beispielsweise wenn ein Screenreader den Inhalt einer Seite vermittelt oder ein Bild nicht dargestellt werden kann.<\/p>\n\n\n\n
Wie schreibe ich einen guten Alt-Text?<\/h2>\n\n\n\n
Der Alternativtext sollte den relevanten Inhalt beziehungsweise Zweck des Bildes im jeweiligen Kontext knapp und verst\u00e4ndlich vermitteln.<\/p>\n\n\n\n
Schlecht:<\/p>\n\n\n\n
Image<\/code><\/p>\n\n\n\n
Ebenfalls schlecht:<\/p>\n\n\n\n
Webhosting Hosting Schweiz bestes Hosting g\u00fcnstiges Hosting cPanel<\/code><\/p>\n\n\n\n
Besser bei einem entsprechenden Screenshot:<\/p>\n\n\n\n
\u00dcbersicht des cPanel Dashboards<\/code><\/p>\n\n\n\n
Ein Alt-Text ist kein Feld zum Ansammeln m\u00f6glichst vieler Suchbegriffe.<\/p>\n\n\n\n
\n
Important:<\/strong> Schreibe Alternativtexte in erster Linie so, dass sie den Zweck beziehungsweise relevanten Bildinhalt sinnvoll vermitteln. Barrierefreiheit und Verst\u00e4ndlichkeit sind wichtiger als Keyword-Stuffing.<\/p>\n<\/blockquote>\n\n\n\n
Dekorative Bilder ben\u00f6tigen eine andere Behandlung<\/h2>\n\n\n\n
Nicht jedes Bild transportiert relevante Informationen.<\/p>\n\n\n\n
Bei rein dekorativen Bildern kann ein leerer Alternativtext technisch sinnvoll sein, damit assistive Technologien das Bild \u00fcberspringen k\u00f6nnen.<\/p>\n\n\n\n
Im HTML kann dies beispielsweise so aussehen:<\/p>\n\n\n\n
alt=\"\"<\/code><\/p>\n\n\n\n
Ob ein Bild dekorativ oder inhaltlich relevant ist, h\u00e4ngt von seiner Funktion im konkreten Seitenkontext ab.<\/p>\n\n\n\n
Text nicht unn\u00f6tig in Bilder einbauen<\/h2>\n\n\n\n
Wichtige Informationen sollten nach M\u00f6glichkeit als echter HTML-Text auf der Webseite vorhanden sein und nicht ausschlie\u00dflich innerhalb einer Grafik stehen.<\/p>\n\n\n\n
Das hat mehrere Vorteile:<\/p>\n\n\n\n
Text kann besser skaliert werden\nText kann kopiert werden\nScreenreader k\u00f6nnen ihn verarbeiten\n\u00dcbersetzungen sind einfacher\nInhalte k\u00f6nnen responsiver dargestellt werden\nSuchmaschinen erhalten direkten Textinhalt<\/code><\/pre>\n\n\n\n
Grafiken mit Text k\u00f6nnen selbstverst\u00e4ndlich sinnvoll sein. Kritische Informationen sollten aber nicht ausschlie\u00dflich darin versteckt werden.<\/p>\n\n\n\n
Bilder im richtigen Seitenkontext verwenden<\/h2>\n\n\n\n
Ein Bild sollte zum Inhalt der Seite passen.<\/p>\n\n\n\n
Ein Screenshot des cPanel Dashboards ist beispielsweise sinnvoll in einer Anleitung \u00fcber cPanel. Derselbe Screenshot liefert auf einer v\u00f6llig themenfremden Seite keinen zus\u00e4tzlichen Kontext.<\/p>\n\n\n\n
Auch Bildunterschriften k\u00f6nnen sinnvoll sein, wenn sie dem Besucher zus\u00e4tzliche Informationen vermitteln.<\/p>\n\n\n\n
Bildoptimierung und PageSpeed<\/h2>\n\n\n\n
Analysewerkzeuge k\u00f6nnen darauf hinweisen, dass Bilder effizienter kodiert, anders dimensioniert oder in einem moderneren Format bereitgestellt werden k\u00f6nnten.<\/p>\n\n\n\n
Solche Hinweise solltest du im Kontext der tats\u00e4chlichen Website beurteilen.<\/p>\n\n\n\n
Wie du Ladezeitmessungen richtig interpretierst, erkl\u00e4ren wir sp\u00e4ter unter Measure website loading time and evaluate it correctly<\/a>.<\/p>\n\n\n\n
Den Umgang mit Google PageSpeed Insights behandeln wir zus\u00e4tzlich unter How to use Google PageSpeed Insights correctly<\/a>.<\/p>\n\n\n\n
PageSpeed-Werte nicht blind optimieren<\/h2>\n\n\n\n
Ein Analysewerkzeug ist eine Diagnosehilfe und kein Selbstzweck.<\/p>\n\n\n\n
Es ist nicht sinnvoll, ein sichtbar wichtiges Bild so stark zu komprimieren, dass die Qualit\u00e4t deutlich leidet, nur um einen einzelnen Messwert zu verbessern.<\/p>\n\n\n\n
Bewerte immer den tats\u00e4chlichen Nutzen einer Optimierung.<\/p>\n\n\n\n
Metadaten in Bilddateien<\/h2>\n\n\n\n
Bilddateien k\u00f6nnen zus\u00e4tzliche Metadaten enthalten, beispielsweise Informationen zur Aufnahme oder zur verwendeten Software.<\/p>\n\n\n\n
Je nach Einsatzzweck k\u00f6nnen solche Metadaten unn\u00f6tige Daten enthalten oder Informationen offenlegen, die du nicht ver\u00f6ffentlichen m\u00f6chtest.<\/p>\n\n\n\n
Bei Bildern f\u00fcr eine \u00f6ffentliche Website kann es deshalb sinnvoll sein, zu pr\u00fcfen, welche Metadaten tats\u00e4chlich enthalten sind und ben\u00f6tigt werden.<\/p>\n\n\n\n
\n
Datenschutz-Tipp:<\/strong> Pr\u00fcfe insbesondere bei privaten oder mit Smartphones aufgenommenen Bildern, ob Metadaten enthalten sind, die du nicht \u00f6ffentlich bereitstellen m\u00f6chtest.<\/p>\n<\/blockquote>\n\n\n\n
Bildrechte und Lizenzen nicht vergessen<\/h2>\n\n\n\n
Technische Optimierung sagt nichts dar\u00fcber aus, ob du ein Bild rechtm\u00e4\u00dfig verwenden darfst.<\/p>\n\n\n\n
Verwende nur Bilder, f\u00fcr deren Ver\u00f6ffentlichung du die erforderlichen Rechte besitzt beziehungsweise deren Lizenz die geplante Nutzung erlaubt.<\/p>\n\n\n\n
Beachte gegebenenfalls erforderliche Urheber- oder Quellenangaben.<\/p>\n\n\n\n
Originaldateien separat aufbewahren<\/h2>\n\n\n\n
Wenn du ein hochwertiges Originalfoto f\u00fcr das Web verkleinerst und komprimierst, solltest du die Originaldatei nicht unbedingt durch die optimierte Version ersetzen.<\/p>\n\n\n\n
Bewahre hochwertige Ausgangsdateien separat auf, falls du sp\u00e4ter eine andere Gr\u00f6\u00dfe, einen anderen Ausschnitt oder eine h\u00f6her aufgel\u00f6ste Variante ben\u00f6tigst.<\/p>\n\n\n\n
Die Webversion ist eine f\u00fcr einen bestimmten Einsatzzweck optimierte Ausgabe \u2013 nicht zwingend dein Archiv-Original.<\/p>\n\n\n\n
Bilder nicht mehrfach unn\u00f6tig komprimieren<\/h2>\n\n\n\n
Bei verlustbehafteten Formaten kann wiederholtes \u00d6ffnen, Bearbeiten und erneutes starkes Komprimieren die Bildqualit\u00e4t schrittweise verschlechtern.<\/p>\n\n\n\n
Erzeuge neue Webversionen deshalb nach M\u00f6glichkeit aus einer hochwertigen Ausgangsdatei.<\/p>\n\n\n\n
Original\n   \u2193\nWebversion erzeugen\n\nbesser als:\n\nbereits stark komprimierte Datei\n   \u2193\nerneut komprimieren\n   \u2193\nerneut komprimieren<\/code><\/pre>\n\n\n\n
Screenshots f\u00fcr Anleitungen optimieren<\/h2>\n\n\n\n
Bei Screenshots ist vor allem wichtig, dass die relevanten Bedienelemente und Texte gut lesbar bleiben.<\/p>\n\n\n\n
Schneide unn\u00f6tige Bereiche weg, bevor du den Screenshot verkleinerst.<\/p>\n\n\n\n
Ein gezielter Ausschnitt ist h\u00e4ufig hilfreicher und kleiner als ein kompletter Bildschirm, auf dem der relevante Bereich kaum erkennbar ist.<\/p>\n\n\n\n
Achte au\u00dferdem darauf, keine vertraulichen Informationen, Kundendaten, Zugangsdaten oder andere sensible Inhalte versehentlich im Screenshot zu ver\u00f6ffentlichen.<\/p>\n\n\n\n
Hero-Bilder besonders beachten<\/h2>\n\n\n\n
Gro\u00dfe Bilder im oberen sichtbaren Bereich einer Seite verdienen besondere Aufmerksamkeit.<\/p>\n\n\n\n
Sie k\u00f6nnen einen erheblichen Teil der sichtbaren Fl\u00e4che einnehmen und bereits unmittelbar beim Seitenaufruf ben\u00f6tigt werden.<\/p>\n\n\n\n
Hier solltest du besonders sorgf\u00e4ltig zwischen Bildqualit\u00e4t, Abmessungen und Dateigr\u00f6\u00dfe abw\u00e4gen.<\/p>\n\n\n\n
Ein solches Bild einfach extrem klein zu komprimieren oder pauschal verz\u00f6gert zu laden, ist nicht automatisch die beste L\u00f6sung.<\/p>\n\n\n\n
Hintergrundbilder nicht vergessen<\/h2>\n\n\n\n
Bilder k\u00f6nnen nicht nur \u00fcber ein normales HTML-Bildelement eingebunden werden.<\/p>\n\n\n\n
Auch CSS-Hintergrundbilder k\u00f6nnen gro\u00dfe Datenmengen verursachen.<\/p>\n\n\n\n
Wenn ein Analysewerkzeug auf hohe Bild\u00fcbertragung hinweist, solltest du deshalb auch Hintergrundgrafiken, Slider und andere visuelle Elemente ber\u00fccksichtigen.<\/p>\n\n\n\n
Slider k\u00f6nnen mehrere gro\u00dfe Bilder laden<\/h2>\n\n\n\n
Ein Slider kann mehrere gro\u00dfformatige Bilder enthalten. Abh\u00e4ngig von seiner technischen Umsetzung k\u00f6nnen dadurch bereits beim Seitenaufruf mehrere Dateien geladen werden.<\/p>\n\n\n\n
Pr\u00fcfe deshalb, ob alle verwendeten Slider-Bilder tats\u00e4chlich ben\u00f6tigt werden und sinnvoll optimiert sind.<\/p>\n\n\n\n
Mehr Bilder bedeuten nicht automatisch eine bessere Website.<\/p>\n\n\n\n
Bildoptimierung f\u00fcr Online-Shops<\/h2>\n\n\n\n
Bei einem Online-Shop k\u00f6nnen Produktbilder einen erheblichen Anteil der \u00fcbertragenen Daten ausmachen.<\/p>\n\n\n\n
Gleichzeitig m\u00fcssen Kunden Produkte ausreichend detailliert beurteilen k\u00f6nnen.<\/p>\n\n\n\n
Zu starke Kompression kann deshalb ebenso problematisch sein wie unn\u00f6tig gro\u00dfe Originaldateien.<\/p>\n\n\n\n
Besonders bei vielen Produkten ist ein konsistenter Workflow f\u00fcr Abmessungen, Format und Qualit\u00e4t hilfreich.<\/p>\n\n\n\n
Bildoptimierung bei Blogs und Ratgebern<\/h2>\n\n\n\n
Bei l\u00e4ngeren Artikeln k\u00f6nnen sich viele einzelne Bilder zu einer erheblichen Gesamtgr\u00f6\u00dfe summieren.<\/p>\n\n\n\n
Das betrifft beispielsweise Schritt-f\u00fcr-Schritt-Anleitungen mit zahlreichen Screenshots.<\/p>\n\n\n\n
Hier lohnt es sich, jeden Screenshot auf den tats\u00e4chlich relevanten Bereich zuzuschneiden und eine passende Webversion zu verwenden.<\/p>\n\n\n\n
Vorher und nachher vergleichen<\/h2>\n\n\n\n
Bei wichtigen Bildern kannst du die urspr\u00fcngliche und optimierte Version vergleichen.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
Original:\n4000 \u00d7 2667 Pixel\n4,8 MB\n\nWebversion:\npassende Abmessungen\neffizientes Format\n420 KB\n\nsichtbare Qualit\u00e4t:\nf\u00fcr den vorgesehenen Einsatz vergleichbar<\/code><\/pre>\n\n\n\n
Die Zahlen sind nur ein Beispiel. Entscheidend ist nicht ein bestimmter Zielwert, sondern ob die optimierte Datei ihren Zweck bei deutlich effizienterer Datenmenge erf\u00fcllt.<\/p>\n\n\n\n
Website nach der Bildoptimierung testen<\/h2>\n\n\n\n
Nach \u00c4nderungen solltest du die Website tats\u00e4chlich aufrufen und kontrollieren.<\/p>\n\n\n\n
Check in particular:<\/p>\n\n\n\n
Bildqualit\u00e4t\nrichtiger Bildausschnitt\nDesktop-Darstellung\nSmartphone-Darstellung\nGalerien und Slider\nLinks auf Bilder\nLayoutverschiebungen\nLadeverhalten<\/code><\/pre>\n\n\n\n
Eine technisch kleinere Datei bringt keinen Vorteil, wenn danach beispielsweise der falsche Ausschnitt angezeigt wird oder wichtige Details kaum noch erkennbar sind.<\/p>\n\n\n\n
H\u00e4ufige Fehler bei der Bildoptimierung<\/h2>\n\n\n\n
Zu den typischen Problemen geh\u00f6ren:<\/p>\n\n\n\n
Originalfotos direkt vom Smartphone hochladen\n\nriesige Pixelabmessungen f\u00fcr kleine Darstellungen\n\nFotos unn\u00f6tig als gro\u00dfe PNG-Dateien speichern\n\nBilder zu stark komprimieren\n\nf\u00fcr jedes Bild denselben Qualit\u00e4tswert verwenden\n\nDateinamen wie IMG_12345 beibehalten\n\nAlt-Texte mit Keywords \u00fcberladen\n\njedes Bild pauschal lazy laden\n\nText ausschlie\u00dflich als Bild darstellen\n\ngro\u00dfe Hintergrundbilder \u00fcbersehen\n\nOriginaldateien nach der Optimierung l\u00f6schen<\/code><\/pre>\n\n\n\n
Praktischer Workflow f\u00fcr neue Website-Bilder<\/h2>\n\n\n\n
Bild ausw\u00e4hlen\n        \u2193\nEinsatzzweck bestimmen\n        \u2193\npassende Abmessungen festlegen\n        \u2193\ngeeignetes Format w\u00e4hlen\n        \u2193\nsinnvoll komprimieren\n        \u2193\nQualit\u00e4t kontrollieren\n        \u2193\nverst\u00e4ndlichen Dateinamen vergeben\n        \u2193\nauf Website hochladen\n        \u2193\nAlt-Text entsprechend dem Kontext setzen\n        \u2193\nDesktop und Smartphone pr\u00fcfen\n        \u2193\nLadeverhalten kontrollieren<\/code><\/pre>\n\n\n\n
Bestehende Website mit vielen Bildern optimieren<\/h2>\n\n\n\n
Wenn deine Website bereits viele Bilder enth\u00e4lt, musst du nicht zwingend jede Datei ohne Priorisierung gleichzeitig bearbeiten.<\/p>\n\n\n\n
Beginne mit den Seiten und Bildern, bei denen der gr\u00f6\u00dfte Nutzen zu erwarten ist.<\/p>\n\n\n\n
Das k\u00f6nnen beispielsweise h\u00e4ufig besuchte Seiten, besonders gro\u00dfe Hero-Bilder oder Seiten mit auff\u00e4llig hoher \u00fcbertragener Datenmenge sein.<\/p>\n\n\n\n
Eine Messung der Website kann dabei helfen, die tats\u00e4chlichen Problemstellen zu identifizieren.<\/p>\n\n\n\n
Wenn die Website trotz optimierter Bilder langsam bleibt<\/h2>\n\n\n\n
Bilder sind nur ein m\u00f6glicher Faktor f\u00fcr die Ladezeit.<\/p>\n\n\n\n
Eine Website kann trotz gut optimierter Bilder langsam sein, wenn beispielsweise andere Ressourcen, externe Dienste, JavaScript, Datenbankzugriffe oder die Anwendung selbst Probleme verursachen.<\/p>\n\n\n\n
We will cover systematic troubleshooting later under Slow website: systematically finding the causes<\/a>.<\/p>\n\n\n\n
\n
Important:<\/strong> Bildoptimierung ist ein wichtiger Bestandteil der Website-Performance, aber nicht die universelle L\u00f6sung f\u00fcr jedes Ladezeitproblem.<\/p>\n<\/blockquote>\n\n\n\n
Checkliste zur Bildoptimierung<\/h2>\n\n\n\n
Passt das Bild zum Inhalt?\n        \u2193\nSind die Abmessungen sinnvoll?\n        \u2193\nIst das Format geeignet?\n        \u2193\nIst die Kompression angemessen?\n        \u2193\nBleibt die Qualit\u00e4t ausreichend?\n        \u2193\nIst der Dateiname verst\u00e4ndlich?\n        \u2193\nIst ein sinnvoller Alt-Text vorhanden?\n        \u2193\nSind unn\u00f6tige Metadaten gepr\u00fcft?\n        \u2193\nFunktioniert das Bild responsiv?\n        \u2193\nIst Lazy Loading sinnvoll eingesetzt?\n        \u2193\nDesktop und Smartphone getestet?\n        \u2193\nLadeverhalten kontrolliert?<\/code><\/pre>\n\n\n\n
Summary<\/h2>\n\n\n\n
Gut optimierte Bilder k\u00f6nnen die \u00fcbertragene Datenmenge einer Website erheblich reduzieren und dadurch zu einer besseren Ladeperformance beitragen.<\/p>\n\n\n\n
Entscheidend sind dabei nicht nur die Dateigr\u00f6\u00dfe, sondern auch passende Pixelabmessungen, ein geeignetes Bildformat und eine sinnvolle Kompression.<\/p>\n\n\n\n
JPEG, PNG, WebP, AVIF und SVG besitzen unterschiedliche Eigenschaften. Das richtige Format h\u00e4ngt deshalb vom jeweiligen Bild und seinem Einsatzzweck ab.<\/p>\n\n\n\n
F\u00fcr SEO und Barrierefreiheit solltest du au\u00dferdem verst\u00e4ndliche Dateinamen, sinnvolle Alternativtexte und einen passenden inhaltlichen Kontext ber\u00fccksichtigen.<\/p>\n\n\n\n
Techniken wie responsive Bilder und Lazy Loading k\u00f6nnen die Auslieferung zus\u00e4tzlich optimieren, sollten aber nicht ohne R\u00fccksicht auf den konkreten Einsatzzweck angewendet werden.<\/p>\n\n\n\n
Die beste Bildoptimierung reduziert nicht einfach nur Kilobytes. Sie liefert dem Besucher die ben\u00f6tigte Bildqualit\u00e4t mit m\u00f6glichst wenig unn\u00f6tigen Daten.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
Bilder geh\u00f6ren auf vielen Websites zu den gr\u00f6\u00dften \u00fcbertragenen Dateien. Werden Fotos und Grafiken ohne Optimierung hochgeladen, k\u00f6nnen einzelne Bilder mehrere Megabyte gro\u00df sein und die Ladezeit einer Seite unn\u00f6tig erh\u00f6hen. Gute Bildoptimierung bedeutet jedoch nicht, Bilder einfach m\u00f6glichst stark zu komprimieren. Entscheidend ist ein sinnvoller Kompromiss zwischen Bildqualit\u00e4t, Abmessungen, Dateigr\u00f6\u00dfe und dem verwendeten Dateiformat. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[85],"doc_tag":[],"class_list":["post-22879","docs","type-docs","status-publish","hentry","doc_category-seo-monitoring"],"year_month":"2026-09","word_count":3422,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/en\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO & Monitoring","term_url":"https:\/\/www.curiaweb.ch\/en\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/comments?post=22879"}],"version-history":[{"count":4,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22879\/revisions"}],"predecessor-version":[{"id":22888,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22879\/revisions\/22888"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/media?parent=22879"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/doc_category?post=22879"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/doc_tag?post=22879"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}