Bilder für die Website komprimieren
Bilder sind oft die schwersten Dateien, die eine Seite lädt, und schwere Seiten fühlen sich langsam an, besonders auf dem Handy. Die Lösung ist meist einfach: Liefere kein 4000 px breites Foto in einem 800 px breiten Platz aus. Hier eine schnelle Routine, die das in deinem Browser erledigt, ohne Upload.
1. Das Bild auf die angezeigte Größe bringen
Finde heraus, wie breit das Bild maximal angezeigt wird, etwa in einer 800 px breiten Artikelspalte oder als Banner in voller Breite. Trage im Feld „Max. Breite/Höhe (px)“ ungefähr diese Breite ein, oder bis zum Doppelten, wenn das Bild auf Bildschirmen mit hoher Pixeldichte scharf aussehen soll. Die längste Seite wird verkleinert, die Proportionen bleiben erhalten, und Bilder werden nie vergrößert. Pixel wegzulassen, die du nie anzeigst, spart am meisten.
Ein Handyfoto mit 4000 px Breite, das in einer 800 px breiten Spalte erscheint, kannst du zum Beispiel auf 1600 px setzen. Es wirkt auf einem Bildschirm mit hoher Pixeldichte weiterhin scharf und hat trotzdem weit weniger Pixel als das Original. Wirf einen Blick auf das Layout deiner Seite oder in den Inspektor deines Browsers, wenn du nicht sicher bist, wie breit ein Platz wirklich ist.
2. Die Qualität einstellen
Beginne bei Fotos in JPG oder WebP mit 75 % und vergleiche die Größen vorher und nachher. Die meisten Fotos sehen bei 70–80 % fast genauso aus wie bei 100 %, bei einem Bruchteil der Dateigröße. Senke den Wert Schritt für Schritt; jeder Durchgang startet bei deinem Original, du kannst es also erneut versuchen, ohne etwas zu verlieren. PNG ignoriert den Regler, weil es verlustfrei ist, deshalb ist Verkleinern dort die einzige Stellschraube.
3. Das Format wählen
- Fotos: WebP ist bei ähnlicher Qualität meist kleiner als JPG, und alle aktuellen großen Browser unterstützen es. JPG ist der sichere Ausweg.
- Screenshots, Text und Logos: PNG hält Kanten scharf und unterstützt Transparenz; WebP unterstützt Transparenz ebenfalls.
- Hero- und Bannerbilder: Die kostenlose Version gibt bis zu 2000 px an der längsten Seite aus, das reicht für die meisten Layouts.
Die Umwandlung zwischen Formaten und unbegrenzte Stapel gehören zu Pro (29 $ pro Jahr oder 4 $ pro Monat). Die kostenlose Version verarbeitet bis zu 5 Bilder auf einmal mit einer Qualität bis 80 %.
4. Den Rest im Code deiner Seite erledigen
- Füge jedem
<img>die Attributewidthundheighthinzu, damit das Layout beim Laden nicht springt. - Setze
loading="lazy"bei Bildern unterhalb des sichtbaren Bereichs, aber nicht beim Hauptbild ganz oben. - Verwende aussagekräftige Dateinamen und
alt-Texte.
Lade die Seite dann neu und sieh sie dir in einem Fenster in Handygröße an. Fühlt sie sich immer noch schwer an, sind die größten verbliebenen Bilder die, die du weiter verkleinern solltest.
Foto wird geteilt? Entfernen Sie auch Standort und Kameradaten: Photo Scrubber
Weiterlesen: JPG, PNG oder WebP · Bild online komprimieren · Bild online verkleinern · PNG online komprimieren · Foto-Dateigröße verringern