Bilder für die Website optimieren: Grösse, Format, Qualität und Laden

Um Bilder für die Website zu optimieren, gehen Sie in dieser Reihenfolge vor: Bringen Sie jedes Bild auf die Breite, in der es tatsächlich angezeigt wird (für hochauflösende Bildschirme etwa das Doppelte), speichern Sie es in einem modernen Format wie WebP oder AVIF mit JPEG oder PNG als Rückfallformat, komprimieren Sie es mit einer Qualität, bei der kein Unterschied sichtbar ist, und entfernen Sie Metadaten, die niemand braucht. Danach übernimmt das HTML seinen Teil: mehrere Grössen in srcset, die Attribute width und height und Lazy Loading für Bilder weiter unten auf der Seite.

Diese Anleitung erklärt, warum jeder Schritt zählt, mit welchen Einstellungen Sie beginnen und wie Sie alles mit SchweizerIMG im Browser erledigen – für ein Bild oder einen ganzen Ordner.

Warum Bilder über die Ladezeit Ihrer Website entscheiden

Auf den meisten Websites machen Bilder einen grossen Teil der Daten aus, die ein Browser herunterladen muss. Jedes unnötige Kilobyte kostet auf einer Mobilverbindung Zeit, und das grösste Bild im oberen Seitenbereich ist häufig genau das Element, auf das Besucherinnen und Besucher warten. Suchmaschinen berücksichtigen die Ladegeschwindigkeit auf ihre eigene Weise; leichtere Bilder helfen also zuerst den Besuchern und dann der Sichtbarkeit. Die häufigsten Gründe für zu schwere Bilder:

• Zu viele Pixel. Ein Foto direkt aus dem Smartphone oder der Kamera ist mehrere tausend Pixel breit; eine Inhaltsspalte zeigt selten mehr als einen Bruchteil davon.
• Ein ungeeignetes Format. Ein als PNG gespeichertes Foto ist ein Vielfaches grösser als nötig; ein als JPEG mit niedriger Qualität gespeicherter Screenshot wirkt verschwommen.
• Eine zu hohe Qualitätsstufe. Ab einem gewissen Punkt fügt ein höherer Qualitätswert nur noch Bytes hinzu, die das Auge nicht sieht.
• Unsichtbare Zugaben. Kameradaten, GPS-Koordinaten, Bearbeitungsverlauf und eingebettete Vorschaubilder werden bei jedem Download mitgeliefert.

Welche Bildgrösse braucht eine Website?

Beginnen Sie mit einer Frage: Wie breit ist dieses Bild auf der Seite? Prüfen Sie das im Layout oder mit den Entwicklerwerkzeugen Ihres Browsers. Smartphones, Tablets und viele Laptops haben hochauflösende Bildschirme mit zwei oder mehr Gerätepixeln pro CSS-Pixel – ein Bild, das 800 Pixel breit angezeigt wird, wirkt also scharf, wenn die Datei etwa 1600 Pixel breit ist. Deutlich mehr als die doppelte Anzeigebreite verbessert selten, was Besucher sehen, macht die Datei aber immer schwerer. Typische Ausgangswerte:

In SchweizerIMG bringt Grösse ändern mit «Längste Seite» oder «In einen Rahmen einpassen» einen ganzen Stapel auf die gewünschte Grösse, mit hochwertiger Neuberechnung und optionalem Nachschärfen nach dem Verkleinern. Kleinere Bilder werden nicht vergrössert, ausser Sie erlauben es – Vergrössern fügt Pixel hinzu, keine Details.

Moderne Formate: WebP und AVIF mit Rückfallformat

Das Format bestimmt, wie effizient die Pixel gespeichert werden. Für Fotos im Web ergeben die beiden modernen Formate bei gleicher sichtbarer Qualität meist deutlich kleinere Dateien als JPEG:

• WebP – von allen aktuellen grossen Browsern unterstützt, mit Transparenz und Animation. Eine sichere Standardwahl für Fotos und Grafiken.
• AVIF – oft noch kleiner, besonders bei kleinen Dateigrössen, und von den aktuellen Versionen der grossen Browser unterstützt. Das Kodieren dauert länger, was Sie bei grossen Stapeln merken.
• JPEG – das Rückfallformat, das überall funktioniert, auch in älteren Browsern, in E-Mails und in fast jeder Software.
• PNG – für Screenshots, Oberflächengrafiken und Bilder, die exakte Pixel oder Transparenz brauchen; für Fotos zu gross.
• SVG – für Logos und Symbole, die gezeichnet statt fotografiert sind: in jeder Grösse scharf und meist winzig.

Mit dem HTML-Element <picture> nimmt der Browser das erste Format, das er unterstützt. So können Sie AVIF und WebP anbieten und JPEG als Sicherheitsnetz behalten. Stärken und Grenzen der einzelnen Formate vergleicht WebP, AVIF, JPEG und PNG: der Unterschied.

Welche Kompression für Bilder auf der Website?

Verlustbehaftete Formate tauschen ein wenig unsichtbares Detail gegen viel kleinere Dateien. Die richtige Einstellung hängt vom Bild ab: Eine detailreiche Landschaft braucht eine höhere Qualität als ein Porträt mit weichem Hintergrund (Hintergrund in Bildkomprimierung erklärt). Statt einen Wert zu raten, lassen Sie das Werkzeug messen. Bild komprimieren bietet vier Modi:

• Automatisch, mit den Stufen Leicht, Empfohlen oder Stark – es sucht die niedrigste Qualität, die für die gewählte Stufe noch eine gemessene Ähnlichkeit zum Original erreicht.
• Qualität wählen – ein fester Wert von 1 bis 100, wenn Sie bereits wissen, was für Ihre Website passt.
• Ziel-Dateigrösse – komprimiert, bis das Bild eine Grenze einhält, und verkleinert auf Wunsch auch die Abmessungen.
• Nur verlustfrei – für Screenshots und Grafiken, die pixelgenau bleiben müssen.

Steht «Speichern als» auf «Kleinstes aus WebP, AVIF und JPEG», probiert das Werkzeug diese Formate aus und behält das leichteste Ergebnis; das Ergebnis ist nie grösser als das Original. Zur Kontrolle zeigt Bilder vergleichen Original und Ergebnis mit einem Schieberegler oder nebeneinander, zusammen mit Ähnlichkeitswerten.

Entfernen Sie danach, was niemand sieht. Kameramodell, Seriennummern, GPS-Koordinaten, Bearbeitungsverlauf und eingebettete Vorschaubilder nützen Website-Besuchern nichts. Metadaten entfernen löscht sie verlustfrei, ohne die Pixel neu zu kodieren; Grösse ändern, Bild komprimieren, Format konvertieren und Für das Web optimieren haben zudem eine eigene Metadaten-Einstellung. Was diese Angaben verraten können, erklärt Was Ihre Fotos verraten.

Das HTML hilft mit: srcset, width und height, Lazy Loading

Optimierte Dateien sind die halbe Arbeit; die andere Hälfte ist, wie die Seite sie lädt – allgemeine Web-Praktiken für jedes Website-System:

• `srcset` und `sizes` bieten dasselbe Bild in mehreren Breiten an – ein Smartphone lädt eine kleine Version, ein grosser Bildschirm eine grosse.
• Die Attribute `width` und `height` teilen dem Browser die Proportionen des Bildes mit, bevor es ankommt. Er reserviert den Platz, und der Text darunter springt nicht, wenn das Bild erscheint.
• `loading="lazy"` lädt Bilder weiter unten erst, wenn der Besucher in ihre Nähe scrollt. Verwenden Sie es nicht für das Hauptbild oben: Dieses soll sofort laden.
• Ein grosses Bild oben, nicht fünf. Das grösste Element, das beim Öffnen der Seite sichtbar ist, nehmen Besucher als «geladen» wahr.

Dieser letzte Punkt hat einen Namen: Largest Contentful Paint (LCP), die Zeit, bis das grösste Bild oder der grösste Textblock im sichtbaren Bereich dargestellt ist. Er ist in einer W3C-Spezifikation definiert und gehört zu den Messgrössen, mit denen die Ladegeschwindigkeit üblicherweise beurteilt wird. Ein leichtes, richtig dimensioniertes Titelbild ohne Lazy Loading ist einer der direktesten Wege, ihn zu verbessern.

Website-Bilder mit SchweizerIMG optimieren

Jeder Schritt läuft in Ihrem Browser: Die Bilder werden auf Ihrem Gerät verarbeitet und nie zu uns hochgeladen, was bei noch nicht veröffentlichten Bildern zählt (mehr auf der Sicherheitsseite). Jedes Werkzeug verarbeitet einen ganzen Stapel in einem Durchlauf, und ein Durchlauf ist ein Vorgang, egal wie viele Dateien er enthält.

1. 1

   Auf die Anzeigegrösse bringen

   Öffnen Sie Grösse ändern, fügen Sie Ihre Bilder hinzu und wählen Sie «Längste Seite» oder «In einen Rahmen einpassen» mit der ermittelten Breite – für hochauflösende Bildschirme die doppelte Anzeigebreite.

2. 2

   Komprimieren oder konvertieren

   Verwenden Sie Bild komprimieren mit «Kleinstes aus WebP, AVIF und JPEG» oder Format konvertieren, wenn Sie ein bestimmtes Format brauchen. Mit einem anderen Werkzeug fortfahren gibt die Ergebnisse weiter, ohne sie zwischendurch herunterzuladen – siehe mit weiterem Werkzeug fortfahren.

3. 3

   Metadaten entfernen

   Schliessen Sie mit Metadaten entfernen ab, oder stellen Sie die Metadaten-Option im vorherigen Werkzeug auf «Entfernen».

4. 4

   Herunterladen und veröffentlichen

   Speichern Sie die Ergebnisse gleich nach dem Durchlauf – sie existieren nur im offenen Tab – und veröffentlichen Sie sie wie gewohnt.

Für die eigene Website erledigt Für das Web optimieren diese Schritte in einem einzigen Durchlauf: Es erstellt mehrere Breiten (standardmässig 480 bis 2400 Pixel, nie grösser als das Original) in AVIF, WebP und JPEG, entfernt standardmässig die Metadaten und schreibt ein einfügefertiges <picture>-Snippet mit srcset, sizes, width, height und verzögertem oder sofortigem Laden, dazu ein Manifest aller Dateien. Welche Pläne Für das Web optimieren enthalten, zeigt die Preisseite. Mehr zu Stapeln: viele Bilder auf einmal bearbeiten.

Häufige Fragen

Welche Bildgrösse ist für eine Website ideal?

Es gibt keine einzelne Zahl: Exportieren Sie jedes Bild in seiner Anzeigebreite und für hochauflösende Bildschirme etwa doppelt so breit. Ein Titelbild über die ganze Breite profitiert von mehreren Grössen in srcset.

Soll ich auf meiner Website WebP oder AVIF verwenden?

Beides ist eine gute Wahl. WebP ist der sichere Standard mit breiter Unterstützung; AVIF ergibt oft kleinere Dateien, braucht aber länger zum Kodieren. Wer beide in einem <picture>-Element mit JPEG als Rückfallformat anbietet, gibt jedem Browser das beste Format, das er darstellen kann.

Soll jedes Bild mit Lazy Loading geladen werden?

Nein. Lazy Loading hilft bei Bildern weiter unten auf der Seite. Das Hauptbild, das oben sichtbar ist, soll sofort laden – wird es verzögert, wirkt die Seite langsamer, nicht schneller.

Werden Bilder kleiner, wenn man die Metadaten entfernt?

Meist nur wenig: Bei den meisten Fotos machen Metadaten einen kleinen Teil der Datei aus. Eingebettete Vorschaubilder, grosse Farbprofile oder lange Bearbeitungsverläufe können mehr ausmachen. Der Hauptgrund, sie bei Website-Bildern zu entfernen, ist der Datenschutz, nicht die Grösse.

Bereit für leichtere Seiten? Öffnen Sie die Optimierungswerkzeuge, lesen Sie, wie Komprimieren und Konvertieren funktioniert, folgen Sie dem Ablauf für Produktfotos im Onlineshop oder erstellen Sie ein kostenloses Konto.