Zieh deine Fotos und Grafiken hinein und erhalte WebP-, AVIF- und JPG-Kopien in den Breiten, die deine Seiten brauchen, ohne Kameradaten. Sieh, wie viel kleiner jede ist, lade alle als .zip herunter und füge den srcset-Code ein. Deine Bilder verlassen nie dieses Gerät. Kostenlos.
Bilder für eine Website optimieren, Schritt für Schritt
- Wähle Bilder aus oder zieh sie auf die Seite. JPG-, PNG-, WebP-, AVIF- und GIF-Dateien funktionieren.
- Hake die gewünschten Breiten an, von 480 bis 2560. Bilder werden nie größer als das Original.
- Wähle die Formate: AVIF, WebP, ein JPG als Fallback und PNG für transparente Bilder.
- Lege Qualität, das sizes-Attribut und den Bildordner auf deiner Website fest und tippe auf „Mit diesen Einstellungen neu erstellen“, wenn du etwas änderst.
- Vergleiche Vorher und Nachher und tippe dann auf „Alle herunterladen (.zip)“.
- Kopiere den picture-Code für jedes Bild und füge ihn in deine Seite ein.
Warum mehrere Breiten?
Ein Handy braucht nicht dasselbe 2000 Pixel breite Foto wie ein großer Monitor. Mit srcset listest du mehrere Breiten auf, und der Browser wählt die kleinste, die auf diesem Bildschirm noch scharf aussieht. Das sizes-Attribut sagt ihm, wie breit das Bild angezeigt wird, damit er wählen kann, bevor das Layout der Seite fertig ist.
AVIF, WebP oder JPG?
AVIF ist meist am kleinsten, WebP liegt knapp dahinter und funktioniert in jedem aktuellen Browser, und JPG ist die sichere Rückfalloption. Der picture-Code bietet sie in dieser Reihenfolge an, sodass jeder Browser das beste Format nimmt, das er versteht. Transparente Bilder bekommen PNG statt JPG als Rückfalloption, damit die Transparenz erhalten bleibt. Ist ein Format ausgegraut, kann dieser Browser es nicht erstellen; die anderen Formate funktionieren trotzdem.
Was entfernt wird
Jedes Bild wird neu gezeichnet und frisch gespeichert, Kameradetails, GPS-Standort, Bearbeitungsverlauf und eingebettete Farbprofile fallen also weg. Hochkant aufgenommene Fotos werden zuerst aufgerichtet. Eine Qualität von etwa 75 bis 82 ist ein guter Kompromiss für Fotos; Grafiken mit scharfen Kanten sehen etwas höher oft besser aus.
Warum das wichtig ist
- Kleinere Bilder lassen Seiten schneller laden, besonders auf Handys.
- Schnellere Seiten sind angenehmer zu nutzen und schneiden in der Suche oft besser ab.
- Das Entfernen von Standortdaten schützt die Privatsphäre der Menschen und Orte auf deinen Fotos.
- Bilder in passender Größe sparen Bandbreite für dich und deine Besucher.
Für wen
Blogger, Shop-Betreiber, Fotografen und Entwickler, die Bilder wollen, die scharf aussehen und schnell laden. Für ein einzelnes Bild mit einer bestimmten Dateigröße nutze den Bildkomprimierer, und zum Ändern des Dateityps den Bildkonverter.
Fragen
Welche Qualität soll ich wählen?
Etwa 75 bis 82 ist für Fotos ein guter Kompromiss. Bei Grafiken mit scharfen Kanten etwas höher.
Brauche ich AVIF, wenn ich schon WebP habe?
AVIF ist meist kleiner, und der Bildcode greift auf WebP und JPG zurück, wenn ein Browser AVIF nicht anzeigen kann.
Werden meine Bilder hochgeladen?
Nein. Sie werden in deinem Browser verarbeitet.