Heute möchte ich mal ein Thema ansprechen welches mich eigentlich täglich betrifft. Ich betreue ja für meine Kunden von einfachen Webseiten bis ganz grosse Online Shops und überall brauch ich Bilder. Auch wenn ich jetzt bereits seit 1996 aktiv im Internet bin – also fast 27 Jahre – ok jetzt fühl ich mich alt, ist dieses Medium für viele immer noch ein absolutes Mysterium. Und nein ich bashe hier jetzt nicht auf Anfänger ein, denn ich erlebe selbst angebliche Grafiker die den selben Fehler machen.

Ich bekomme eigentlich fast wöchentlich ein Datenpaket von Grafikern die mir entweder Bilder oder PDFs schicken, damit ich sie für ihre Kundenwebeiten hochlade und dann sind das nicht selten Bilder so ab 300mb bis mehrere GB gross. Oder Bilder als Word Dokument… Und das Beste ist ja, dass wenn ich diese Grafiker darauf anspreche sie hoch und heilig versprechen, dass diese Bilder weboptimiert sind…. was absoluter Blödsinn ist 🙂

Aush diesem Grund werde ich heute mal zeigen was verschiedene Format und Optimierungsgrade mit den Bilder anstellen. Und nein ich werde hier nicht alle Bilderformate zeigen die ich kenne 🙂

Das Problem

Also zuerst müssen wir uns das Problem überhaupt bewusst machen, was bedeutet eigentlich Bildoptimierung? Nun stellt euch vor, ihr habt eine Webseite die lädt auf der Startseite 10 Bilder. Jedes dieser Bilder ist unoptimiert und hat 10MB an Gewicht – da muss die Webseite beim Laden als 10 x 10MB zum laden also sind das 100MB die geladen werden müssen. Das dauert nicht nur sehr lange, sondern dann gibts Kunden von euch die surfen auf dem Smartphone mit einem Datenvolumen von 1GB und zack sind bereits 1/100 des Datenvolumens verbraucht…. da wird er sich bedanken. Und nicht nur er wird sich bedanken, sondern auch euer Hoster und ihr selbst – denn so schrumpft euer Hosting Speicherplatz ziemlich schnell.

Wenn wir jetzt aber dafür sorgen das es keine 100MB sind sondern nur 1MB für alles… dann spart der Kunde viel Geld und Zeit und nebenbei ist die Ladezeit auch ein SEO Rankingfaktor für Google. Wenn eine Webseite schneller lädt wird sie besser gerankt….

Es gibt Studien die sagen, wenn der Kunde länger als 3s warten muss bis eine Webseite geladen ist, dann ist er weg….

Die verschiedenen Bilderformate im Vergleich

Ich nehme hier jetzt immer das gleiche Startbild einfach unterschiedlich optimiert.

Tiff

Das Tiff ist eines der ältesten digitalen Bilderformate die es gibt. Auch wenn wir normalos das selten bis nie verwenden, es gibt immer noch Druckereien die wollen das so und kein PDF… hier in meinem Beispiel ist das Bild nun 1MB gross. Und so nebenbei unterstützen viele Browser dieses Format gar nicht oder gar nicht mehr. https://www.chefblogger.me/images/bilder-optimieren-2023.tiff

PNG

PNG ist ein schönes Format für Bilder – denn damit kann man durchsichtige Bilder machen. Also wen ihr ein Teil eines Bildes durchsichtig haben möchtet, dann ist das euer Format. Dumm nur ist, dass es auch kein Leichtgewicht ist. Hier habe ich ein Bild mit transparentem Bereich für euch und es ist 885kb gross. Der leere Bereich ist nämlich nicht einfach leer sondern immer noch da.

Wenn ich nun das Bild aber mit einem normalen Hintergrund verwende, dann ist es „nur“ noch 771kb also knapp 100kb leichter.

GIF

Wir alle kennen Gifs und ja auch dieses Format wird heute gerne verwendet. Und zwar ist es ein Format mit dem man auch bewegte Bilder erstellen kann.

Dieses bewegte WOW Gif – das ich übrigen von Giphy habe – verbraucht auch 1.6MB. Es ist also wie man sehen kann kein Leichtgewicht. Selbst wenn es sich nicht bewegt ist es in meinem Beispiel auch bereits 467kb gross.

Also kurz gesagt man verwendet Gif nur wenn man ein bewegtes Bild haben möchte – denn das ist oft auch kleiner als direkt ein Video 🙂

JPG

Nun kommen wir zum JPG oder JPEG Format und das ist das zur Zeit am meist verwendete Format der Welt. Damit kann man selbst hochkomplexte Fotografien abspeichern und sie sehen sehr schön aus. Leider kann das Format keine Transparent.

Im Original ist das Bild knackige 759kb gross und sind wir ehrlich das ist eine Menge.

Aber das schöne an JPG ist, dass man es in den meisten Bildbearbeitungssoftware optimieren kann – ja Photoshop kann es, Affinity Photo und selbst Gimp kann es. Damit lässt sich ein Bild sehr viel leichter machen. Aber es gibt hier keinen Wert der überall funktioniert – man muss halt hier immer selbst ausprobieren. Ihr seht am nächsten Bild sehr schnell, dass wenn man es übertreibt – dann merkt man das – hier ein Beispiel mit 10%

Das Bild hier, sieht also sehr verpixelt aus und selbst die Farben sind nicht mehr die schönste. Aber das Bild hat nur noch 40kb und ist somit sehr sehr viel kleiner.

Ich persönlich habe gemerkt, dass der wert zwischen 55 und 65 am Besten funktioniert. Das nächste Beispiel ist das Bild mit 55 und es hat knapp 116kb

Es kommt immer ein wenig drauf an, wofür man ein Bild verwenden möchte und wie gross in Länge und Breite es ist. Auch ein 10% optimiertes Bild in klein kann hübsch aussehen aber dafür in gross total widerlich.

Webp

Nun hat Google vor langer Zeit das Problem erkannt und selbst an einem Format mitgearbeitet und veröffentlicht und daraus ist Webp entstanden. Dieses Bilderformat gibt es eigentlich seit 2010 – aber da viele Browser langezeit dieses Bilderformat nicht unterstützt haben und somit nicht angezeigt werden konnte, konnte es sich nie wirklich durchsetzen. Und heute 2023 muss man sagen, dass ältere Browser dieses Format nicht können aber da man eh nur mit aktualisierten Browser surfen sollte – sollte das kein Problem mehr sein.

Trotzdem auch 2023 wissen ca 90% der Menschen nicht was webp ist und das es sowas gibt.

Nun webp ist ebenfalls ein Format das man optimieren kann im Bildbearbeitungsprogramm.

Ich habe natürlich auch hier ein Beispiel – in diesem Beispiel habe ich es auf 100 gelassen – trotzdem ist es nur noch 226kb gross. Denkt zurück das 100% JPG kam immer noch auf 759kb. Man sieht also hier schon, dass es sehr viel leichter geworden ist.

Wenn ich dann das ganze auf 55 runterdrehe sind wir bei 40kb

und wenn ich es auf 10 runterdrehe sind es nur noch 23kb

Es gibt noch einen kleinen Bonus mit WebP und zwar er kann durchsichtige Bereiche darstellen. Und diesem Beispiel habe ich es mit leerem Hintergrund und 55% Optimierung gemacht und es braucht nur noch 78kb. Denkt daran das entsprechende PNG hatte 885kb…

Auch hier gilt, dass je nachdem wo und wie man die Bilder einsetzen möchte, man mit einem verlust der Bildqualität leben kann. Schaut man sich zb das letzte Bild an – hier im Artikel – wenn man das Bild aber in voller Grösse anschaut (es hat das Format 1920x1080px) dann sieht man sofort das es überoptimiert ist.

Wie man hier sehen kann sind sind so 96% also die meisten Browser ab 2018 in der Lage WebP zu verarbeiten.

Fazit

Nun haben wir also viele Bilderformate und Optimierungsgrade angeschaut. Manchmal sah man sofort einen Unterschied manchmal gar nicht.

Jetzt fragt ihr euch sicher – Ja Eric wie lautet die Zauberformel für die Bildoptimierung.

Leider kann ich euch keine allgemeingültige Zauberformel für alles geben.

Ich sage meinen Kunden immer, dass es eine Faustgrenze gibt. Schaut das ein Bild maximal 150kb schwer ist. Also wenn wir meine Beispiele nehmen, dann ist das ein JPG mit 55% Optimierungsgrad – das waren 116kb. Denn damit eine Ausgewogenheit erreicht zwischen Platz sparen und guter Qualität.

Aber eben ihr müsst selbst testen ob das Bild das ihr optimiert habt, noch gut aussieht. Milchige Bilder sind kein Augenschmaus für eure Kunden. Es ist also immer ein Abwägen was man haben möchte und wie man es verwendet.

So zum Schluss empfehle ich euch wirklich, dass ihr auch langsam euch mit webp beschäftigt. Ich weiss viele kennen es noch nicht oder haben Angst weil man es auf älteren Browsern nicht sieht oder euer CMS es gar nicht verwenden kann

Jetzt gibts aber noch ein kleines Problem mit webp und zwar ab wann wird dieses Format normal akzptiert – also das man kein spezielles Plugin / Erweiterung dafür installieren muss. Und hier habe ich euch mal die Liste der CMS zusammengetragen.

Kann mein CMS WebP?

Ich habe mal geschaut seit wann die verschiedenen CMS das WebP können.

WordPress kann WebP seit der Version 5.8 und die ist im Juli 2021 herausgekommen.
Drupal kann WebP seit Versio 8.8 und die ist im Dezember 2019 herausgekommen
Typo3 kann ebenfalls WebP seit Version 10.4 und die ist im Mai 2020 herausgekommen.
Joomla kann es seit Version 3.9 das ist im Jahr 2018 veröfentlicht worden.
Magento kann es seit 2.3.3 und die kam im Ende 2019 heraus.
Shopify kann es seit 2020 und Wix seit 2018

Also ihr seht, dass es jetzt im Jahr 2023 eigentlich keinen Grund mehr gibt, sich nicht mehr mit WebP zu beschäftigten. Man muss sich einfach umgewöhnen

Ja ich muss zugeben, hier in diesem Blog muss ich mich auch langsam umgewöhnen und in den letzten Monaten habe ich angefangen hin und wieder dieses WebP Format zu verwenden – aber der Automatismus ist stark in mir 😛 So muss ich mich auch zwingen, dass ich die Bilder als WebP rauslasse und nicht als Jpg. Ich denke für mich wird dieses Jahr auch das Jahr werden wo ich umsteigen werde.

Wenn ihr also 2023 auf webp umsteigt, dann gehört ihr immer noch zu den Early Adopter.

Meine Empfehlung zusammengefasst

Kurz gesagt – JPG mit 55%
oder WebP mit 60-80.

So ich hoffe ihr konntet was lernen und baut jetzt keine Bilder mehr ein die 98239847987239487293840283TB Gross sind 🙂 und wenn doch dann habe ich komplett versagt oder ihr habt diesen Artikel nicht gelesen oder nicht verstanden (was wieder ein Fehler für mich wäre).

p.s wie ich beim Veröffentlichen dieses Beitrags gerade gesehen habe, kann xing immer noch kein webp 😛