Bilder für die Website optimieren
Wähle die Fotos. Das Tool erstellt Versionen in mehreren Breiten, als WebP, und baut das responsive HTML: Der Browser lädt nur die Größe, die der Bildschirm braucht.
So geht’sLeichte und responsive Bilder
Verfügbar auf: 
Bilder für die Website optimieren: wofür es gut ist
Wähle ein oder mehrere Fotos und lege die Breiten fest (standardmäßig 480, 800, 1200 und 1600 px), das Format (WebP oder JPG) und die Qualität. Das Tool erstellt jede Version, ohne das Foto über die Originalgröße zu vergrößern, zeigt das Gewicht jeder einzelnen und baut das responsive HTML mit srcset, sizes, width und height und loading=lazy oder fetchpriority=high für das Bild oben.
So geht’s
- Wähle die Bilder der Website.
- Passe Breiten, Format, Qualität und den Ordner an.
- Lade die .zip herunter und kopiere das HTML in die Seite.
Wann nutzen
- Die Website am Handy schneller machen.
- LCP und CLS der Core Web Vitals verbessern.
- Produktfotos und Galerien vorbereiten.
Häufige Fragen
Warum mehrere Breiten erzeugen?
Ein Handy muss nicht das 1600-px-Foto für große Monitore herunterladen. Mit srcset wählt der Browser die kleinste Version, die auf dem Bildschirm noch scharf ist, und die Seite lädt schneller, was auch den Core Web Vitals (LCP) hilft.
Funktioniert WebP in allen Browsern?
Ja, in allen aktuellen Browsern (Chrome, Safari seit Version 14, Firefox und Edge). Wenn du Kompatibilität mit sehr alten Geräten brauchst, wähle JPG.
Wozu dienen width, height und loading=lazy?
Width und height reservieren den Platz des Bildes, bevor es lädt, und verhindern, dass die Seite springt (CLS). Loading=lazy verschiebt Bilder, die außerhalb des Bildschirms liegen. Nutze lazy nicht beim Hauptbild oben auf der Seite.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.