Spare Ladezeiten und optimiere Bilder und Fotos
Um
Bilder weboptimiert zu speichern und Ladezeiten zu sparen, muss man oft verschiedene Tools probieren oder diese aufwändig mit einer Bildbearbeitung verändern. Unser kleines, aber feines Tool nimmt die Arbeit ab und verkleinert das Foto, optimiert es und speichert es zusätzlich in einem modernen Format in webp ab. Das Ursprungsformat wird aber auch komprimiert und optimiert, so dass beide eingesetzt werden können. So können Sie
Bilder kostenlos fürs Web optimieren.
Bilder weboptimiert speichern: Wozu der Aufwand der Foto-Optimierung?
Die Optimierung von Fotos für die Verwendung im Web ist wichtig, um die Ladezeiten von Websites zu verkürzen und damit auch die Benutzerfreundlichkeit zu verbessern. Das bedeutet, die Fotos zu komprimieren und
fürs Web zu optimieren. Die größten Ladezeit-Probleme sind durch nicht optimierte Fotos verursacht und es sind meist mehr als 10 Sekunden Ladezeit drin.
Fotos kostenlos fürs Web optimieren - wie kann ich sie verkleinern?
Bei den JPEG- und PNG-Formaten ist oft noch ein großes Potential. Es kommt nicht selten vor, dass diese viel zu groß sind - manchmal sogar direkt in voller Auflösung von der Digitalkamera hochgeladen werden.
- BILDER AUF DIE GRÖSSTE ANSICHT DER WEBSEITE REDUZIEREN: Hat man das Foto zum Beispiel in der Auflösung 3872 x 2592 vorliegen, weil es so mit der Kamera gemacht wurde, solltest man schauen, was die größte Auflösung der Website ist. Oft ist das nicht mehr als 1024x768 oder vielleicht bei einem Hintergrundfoto 1920x1080. Das ist dann eine Orientierung und man kann das Foto mit einem Grafikprogramm verkleinern. Wenn das viele Fotos sind, ist das Tool Irfanview zu empfehlen
- BILDER FÜRS WEB OPTIMIEREN UND WEBOPTIMIERT SPEICHERN: Ist das Bild nun verkleinert, ist es aber noch nicht weboptimiert, das bedeutet so weit komprimiert, dass die Datei kleiner wird und trotzdem die Qualität nicht leidet. TIPP: Versuche Bilder möglichst unter 200kb zu bekommen
- BILDER IN MODERNEN DATEIFORMATEN SPEICHERN: Das Format .webp erzeugt noch kleinere Dateien und wird von den modernen Browsern unterstützt ( genaue Liste hier https://caniuse.com/webp ) Es gibt da auch online-Dienste, die die Datei ins neue Format bringen können: convertio ( https://convertio.co/de/jpg-webp/) Das kann eine ganze Menge ausmachen.
Möchte man auch alte Browser unterstützen, kann das Foto in einen picture-Tag gepackt werden. Alte Browser lesen dann das alternative img-Tag aus:
<picture>
<source src="/pfad/picture.webp" type="image/webp">
<img src="/pfad/picture.jpg">
</picture>
- Fotos SOLLTEN MITTELS LAZYLOAD GELADEN WERDEN: Das bedeutet einfach, dass diese erst dann nachgeladen werden, wenn sie durch das Scrollen ins Blickfeld gelangen. Dazu gibt es die lazyload- Javascript -Bibliothek: https://github.com/verlok/vanilla-lazyload Dort ist genau beschrieben, welches Script eingebunden werden muss. Dann muss nur noch die css-Klasse lazy zugefügt werden und das Ganze funktioniert.
