🗜️
← Zurück zu Anleitungen

So optimieren Sie Bilder für die Web-Performance

· Tags: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

So optimieren Sie Bilder für die Web-Performance

Bilder machen 50 bis 60 Prozent der gesamten heruntergeladenen Bytes einer typischen Webseite aus. Jedes nicht optimierte Bild verlängert Ihre Ladezeit um Sekunden, erhöht Ihre Absprungrate und schadet Ihrem Suchmaschinen-Ranking. Die Core Web Vitals von Google – insbesondere Largest Contentful Paint (LCP) – messen direkt die Ladeleistung von Bildern, was die Bildoptimierung zu einer der Änderungen mit der größten Wirkung macht, die Sie an Ihrer Website vornehmen können.

Dieser Leitfaden behandelt eine vollständige Bildoptimierungsstrategie, von den Grundlagen der Komprimierung bis hin zu fortgeschrittenen Auslieferungstechniken.

1. Komprimieren Sie jedes Bild vor der Veröffentlichung

Laden Sie niemals ein unbearbeitetes Bild direkt von Ihrer Kamera, Ihrem Telefon oder Ihrem Design-Tool hoch. Die Komprimierung sollte der erste Schritt in Ihrem Veröffentlichungsworkflow sein.

Wichtige Grundsätze:

  • Fotos vertragen aggressive verlustbehaftete Komprimierung. Beginnen Sie mit Qualität 80 für JPEG und WebP und passen Sie dann nach unten an, wenn es die Dateigrößenziele erfordern.
  • Screenshots, Logos und Grafiken profitieren von verlustfreier Komprimierung. PNG und verlustfreies WebP erhalten die scharfen Kanten und den Text, die die verlustbehaftete Komprimierung verwischen würde.
  • AVIF bietet die besten Komprimierungsverhältnisse, erfordert aber mehr Encodierungszeit. Verwenden Sie es für Bilder, die häufig heruntergeladen und selten aktualisiert werden.
  • Komprimieren Sie im ursprünglichen Format, um Generationsverluste durch unnötige Formatkonvertierungen zu vermeiden.

Erwartete Einsparungen:

Ein typischer Workflow, der Bilder vor dem Hochladen komprimiert, reduziert das Gesamtgewicht der Bilder um 40 bis 80 Prozent bei minimal wahrnehmbarem Qualitätsverlust.

2. Liefern Sie die richtigen Abmessungen

Ein 4000 Pixel breites Foto in einem 300 Pixel breiten Container auszuliefern, ist der häufigste Performance-Fehler im Web. Der Browser lädt alle 4000 Pixel herunter und skaliert sie dann herunter, was Bandbreite und Speicher verschwendet.

Erstellen Sie mehrere Größenvarianten:

  • 320 bis 480 Pixel breit für Mobilbildschirme
  • 768 bis 1024 Pixel breit für Tablets
  • 1200 bis 1920 Pixel breit für Desktop-Displays
  • 2560 Pixel breit für hochauflösende Retina-Displays (2x)

Passen Sie die größte Variante an die maximale Breite an, in der das Bild in Ihrem Layout angezeigt wird, multipliziert mit 2 für hochauflösende Bildschirme (High-DPI).

3. Verwenden Sie responsive Bilder mit Srcset

Die Attribute srcset und sizes in HTML teilen dem Browser mit, welche Bildgröße basierend auf der Viewport-Breite und dem Geräte-Pixelverhältnis des Benutzers heruntergeladen werden soll.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

Dieses einzelne Muster kann die Bildbandbreite auf Mobilgeräten um 40 bis 60 Prozent reduzieren, ohne sichtbaren Qualitätsunterschied.

4. Optimieren Sie für Largest Contentful Paint (LCP)

LCP misst die Zeit, die das größte sichtbare Element – in der Regel das Hero-Bild – zum Rendern benötigt. Google betrachtet ein LCP von 2,5 Sekunden oder weniger als gut.

So optimieren Sie LCP für Bilder:

  • Laden Sie das Hero-Bild vor, damit der Browser es früh erkennt. Fügen Sie <link rel="preload" as="image" href="hero.webp"> in den Kopf Ihres Dokuments ein.
  • Komprimieren Sie das Hero-Bild aggressiv – es ist in der Regel das erste und größte Asset, das der Browser herunterlädt.
  • Liefern Sie WebP oder AVIF für das Hero-Bild mit einem JPEG-Fallback aus.
  • Dimensionieren Sie das Hero-Bild richtig. Liefern Sie kein 4000-Pixel-Bild in einem 1200-Pixel-Hero-Bereich aus.
  • Verwenden Sie kein Lazy Loading für das Hero-Bild oder ein anderes Bild oberhalb der Falz. Lazy Loading verzögert den Download, was LCP schadet.

5. Aktivieren Sie Lazy Loading für Bilder unterhalb der Falz

Bilder, die auf dem ersten Bildschirm nicht sichtbar sind, müssen nicht sofort geladen werden. Das Attribut loading="lazy" teilt dem Browser mit, das Laden des Bildes zu verschieben, bis das Bild nahe daran ist, in den Viewport zu gelangen.

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

Lazy Loading reduziert das anfängliche Seitengewicht bei bildlastigen Seiten um 30 bis 50 Prozent. In Kombination mit Komprimierung ist die Wirkung transformativ.

6. Entfernen Sie Bildmetadaten

EXIF-Daten – Kameraeinstellungen, GPS-Koordinaten, Zeitstempel – fügen jedem Bild unnötige Bytes hinzu. Das Entfernen von Metadaten spart typischerweise 5 bis 15 Prozent der Dateigröße bei null visueller Veränderung. Machen Sie das Entfernen von Metadaten zu einem Standard-Schritt in Ihrem Komprimierungsworkflow.

7. Verwenden Sie ein Content Delivery Network (CDN)

Ein CDN verteilt Ihre Bilder auf Server weltweit und reduziert so die physische Distanz zwischen dem Benutzer und dem Bild. Dies verbessert die Time to First Byte für Bildanfragen.

Einige CDNs bieten auch Bildtransformationen in Echtzeit an:

  • Automatische Formataushandlung (WebP oder AVIF ausliefern, wenn unterstützt)
  • Dynamische Größenanpassung basierend auf Gerät und Viewport
  • Echtzeit-Komprimierungsanpassungen

Wenn ein dediziertes CDN keine Option ist, verwenden Sie mindestens HTTP/2 oder HTTP/3, um mehrere Bild-Downloads in einer einzigen Verbindung zu ermöglichen.

8. Berücksichtigen Sie die Dekodierungsleistung von Bildern

Große Bilder benötigen nicht nur Zeit zum Herunterladen, sondern auch zum Dekodieren. Der Browser muss JPEG-, PNG-, WebP- oder AVIF-Daten dekomprimieren, bevor er sie rendert. JPEG und WebP dekodieren auf den meisten Geräten schnell, während die AVIF-Dekodierung rechenintensiver ist – eine Überlegung für leistungsschwächere Mobilgeräte.

Verwenden Sie das Attribut decoding="async" für nicht kritische Bilder, damit der Browser sie dekodieren kann, ohne andere Inhalte zu blockieren:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

Aufbau Ihres Optimierungsworkflows

Eine End-to-End-Bildoptimierungspipeline sieht so aus:

  1. Komprimieren Sie Bilder in ihrem ursprünglichen Format mit einem qualitätsgerechten Tool.
  2. Entfernen Sie Metadaten während der Komprimierung.
  3. Skalieren Sie auf die erforderlichen Anzeigeabmessungen und erstellen Sie mehrere Varianten.
  4. Implementieren Sie srcset und sizes in Ihren HTML-Vorlagen.
  5. Laden Sie das Hero-Bild vor, verwenden Sie Lazy Loading für alles unterhalb der Falz.
  6. Liefern Sie über ein CDN für globale Leistung aus.
  7. Messen Sie LCP und das Gesamtgewicht der Bilder mit Lighthouse oder PageSpeed Insights.
  8. Iterieren Sie über die Qualitätseinstellungen, bis Sie Ihr Performance-Budget einhalten.

Beginnen Sie noch heute mit der Optimierung Ihrer Bilder mit unserem kostenlosen Online-Bildkomprimierer. Laden Sie Bilder im PNG-, JPEG-, WebP- oder AVIF-Format hoch und laden Sie komprimierte Versionen herunter, die für die Produktion bereit sind – keine Formatkonvertierung, keine Qualitätseinbußen.