Bilder optimieren: Scharf genug, klein genug

Ein hochauflösendes Original ist für das Archiv gut. Auf einer kleinen Beitragskarte muss es nicht in voller Größe geladen werden. Bildoptimierung beginnt deshalb bei der tatsächlichen Darstellung: Wie groß wird das Bild, welche Details müssen erkennbar bleiben und wann wird es gebraucht?

1. Größe wählen
2. →
3. Format prüfen
4. →
5. Darstellung testen

Dateigröße und Bildgröße unterscheiden

Die Abmessungen beschreiben die Pixelzahl. Die Dateigröße beschreibt, wie viele Daten übertragen werden. Beides hängt zusammen, ist aber nicht identisch. Ein kleines PNG kann für eine Grafik passend sein; für ein Foto kann ein anderes Format deutlich sinnvoller ausfallen.

Mehrere Varianten statt ein riesiges Bild

Responsive Bilder erlauben dem Browser, eine passende Quelle auszuwählen. WordPress kann für Medien verschiedene Größen bereitstellen. Dein Theme muss diese Informationen sinnvoll ausgeben. Kontrolliere im echten Frontend, welche Datei auf einem schmalen Bildschirm geladen wird. Wenn Änderungen dort nicht erscheinen, prüfe auch die Cache-Schichten.

Lege Bildbreite und -höhe im Markup fest, damit der Platz früh bekannt ist. Das hilft, überraschende Verschiebungen beim Laden zu vermeiden. Ein fester Ausschnitt braucht außerdem eine bewusste Positionierung, besonders bei Menschen und wichtigen Details.

Formatwahl anhand des Motivs

WebP oder AVIF können für viele fotografische Motive passend sein. Prüfe jedoch Details, Transparenz und Browseranforderungen deines Projekts. Ein Diagramm mit scharfem Text stellt andere Ansprüche als eine weiche Symbolillustration. Behalte das unveränderte Original getrennt von den Websitevarianten.

Wichtige Bilder früh, spätere Bilder später

Lazy Loading kann Bilder außerhalb des ersten sichtbaren Bereichs später laden. Das große Einstiegsbild sollte dadurch nicht unnötig warten. Prüfe die Position und die wirkliche Ladefolge. Ein pauschales „alle Bilder lazy“ kann den sichtbaren Einstieg verschlechtern.

Alternativtexte beschreiben den Zweck eines informativen Bildes. Dekorative Bilder können einen leeren Alternativtext erhalten. Bei KI-Bildern erklärt eine sichtbare Bildunterschrift die Herkunft; ein Alternativtext allein ist für diese Transparenz nicht genug.

• Original separat archiviert.
• Varianten für die verwendeten Größen erstellt.
• Ausschnitt auf Desktop und Mobil geprüft.
• Platz durch Dimensionen reserviert.
• Ladeverhalten passend zur Bildposition.
• Alternativtext und Herkunft verständlich.

Ob die Änderung die Ladezeit tatsächlich verbessert, prüfst du mit einer vergleichbaren Messung.

Passendes Hosting bei webhoster.de.

Werbung · Angebote der webhoster.de AG

Starter und Pro enthalten laut Anbieter LiteSpeed Cache Optimierung. Kleine Bilddateien helfen in beiden Tarifen. Wenn mehrere bildreiche Websites zusammenkommen, bietet Pro mit 75 Gigabyte mehr Speicher als Starter.

Starter

1 WordPress-Website · 10 GB NVMe · 10 IMAP-Postfächer

LiteSpeed Cache Optimierung ist genannt; kleine Bilddateien schonen die 10 GB Speicher.

Starter ansehen

Pro

5 WordPress-Websites · 75 GB NVMe · 100 IMAP-Postfächer

75 GB Speicher können bei mehreren bildreichen Projekten relevant sein.

Pro ansehen

Anbieterstand: 7. Oktober 2026. Aktuelle Preise, Laufzeiten und Vertragsbedingungen findest du im jeweiligen Tarifkonfigurator.

Quellen & Einordnung

Recherche geprüft am 7. Oktober 2026. Eigene Erläuterungen und beispielhafte Abläufe; keine eigenen Anbieter- oder Leistungstests.

• web.dev: Responsive Bilderhttps://web.dev/learn/images/responsive-images
• web.dev: Lazy Loadinghttps://web.dev/articles/browser-level-image-lazy-loading
• MDN: Bildformatehttps://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types

Die Inhalte entstehen mit KI-Unterstützung. Die Redaktion der iSearch GmbH verantwortet das Angebot. Die redaktionelle Methode wird auf der Seite „Redaktion & Methode“ erläutert.