Grafiken für Websites komprimieren

Bilder sagen mehr als tausend Worte...

Jedoch nicht wenn Sie zu groß in einer Website eingebunden wurden und ewig brauchen bis sie geladen und dem Besucher angezeigt werden.

Für 'Responsive oder Adaptive Layouts' ist es ratsam verschiedene Bildabmessungen für verschiedene Geräte zu nutzen, und je nach CSS-Media Queries zu laden.

Das gewählte/bearbeitete Bild sollte vor der Einbindung in die Website komprimiert werden.

Online sind mehrere gute Kompressoren zur finden. An einem Beispiel habe ich mal die resultierenden Größen/Gewichte notiert.

Das Bild hat im Original Abmessungen von 6016 x 4000 px (Pixel) = 4,7 MB, dieses habe ich in Gimp proportional auf die Abmessung 2560 x 1702 px = 2,9 MB geschmälert. Ab in den Kompressor ...

//tinyjpg.com

Vorher: 2,9 MB // Nachher: 203.0 KB // Kompressionsrate: −93% (Websiteangabe)

//imageoptim.com/online

Vorher: 2,9 MB // Nachher: 305,3 KB // ohne Angaben der Kompressionsrate

//imagecompressor.com

Vorher: 2,9 MB // Nachher: 345.5 KB // Kompressionsrate: −88% (Websiteangabe)

//imageresize.org/compress-images

Vorher: 2,9 MB // Nachher: 142.0 KB // Kompressionsrate: −95% (Websiteangabe)

//compressor.io/compress

Vorher: 2,9 MB // Nachher: 309.0 KB // Kompressionsrate: −89% (Websiteangabe)

Man kann also auch große Bilder sehr viel schneller ausliefern da die Downloadzeit drastisch verringert wird.

Auch SVG-Grafiken kann man in der Größe reduzieren, aber Obacht beim Ergebnis und der Darstellung im Browser:

//vecta.io/nano

Es gibt noch einige viele andere Kompressoren im Netz, die Entscheidung steht jedem frei, Hauptsache man reduziert die Ladezeiten ;-)