Das richtige Bildformat fürs Web – Mach deine Website zum Turbo

Du kommst auf eine Website, die befüllt ist mit etwa 10’000 Wörtern, eine regelrechte Textwüste. Spannend, oder? Falls du den besagten Text nicht brennend interessiert, liest du bis zum Ende?
Ohne Bilder, Grafiken, Videos und sonstigen Animationen ist eine Website ganz schön langweilig. Erst durch aussagekräftige visuelle Effekte kann die Website ihre volle Wirkung entfalten und den dargestellten Text auflockern. Der Leser wird animiert, sich mit Text und Bild auseinanderzusetzen. Mit vielen Bildern kann der Schuss aber nach hinten losgehen. Nicht nur, dass die Bilder den Lesern einen Nutzen bieten müssen, sie können durch ein falsches Format oder einer viel zu grossen Datenmenge deine Website ins Schneckentempo versetzen, solltest du sie unbearbeitet hochladen.

Du fragst dich jetzt, welches Bildformat fürs Web das geeignetste ist, wie groß die Datenmenge der Bilder maximal sein darf und vor allem, wie du ohne Qualitätsverlust deine Bilder verkleinern kannst? Dann darfst du jetzt gespannt weiterlesen. Wir zeigen dir, mit welchen kostenlosen Tools du deine Bilder bearbeiten kannst.
Mach deine Website jetzt zum Turbo!

In der heutigen Zeit ist zwischen den Smartphone-Herstellern ein richtiger Wettkampf um die Pixelanzahl ausgebrochen. In der Zwischenzeit sind Smartphones mit 108 Megapixeln keine Rarität mehr. Dadurch, dass die Kameras immer besser und hochwertiger werden, wird aber auch die Dateigröße eines einzelnen Bildes immer größer. Oftmals hat ein einzelnes unbearbeitetes Bild eine Dateigröße von 3 bis 4 Megabytes. Würdest du deine Bilder – und wir gehen davon aus, dass du nicht nur ein Bild auf deine Website lädst – unbearbeitet hochladen, wäre es um deine schnelle Website geschehen. Wir empfehlen, Bilder mit einer maximalen Dateigröße von 50 bis maximal 100 Kilobytes hochzuladen. Die Frage stellt sich nun, wie du ein Bild mit einer Größe von 3 Megabytes so bearbeiten kannst, dass das gleiche Bild ohne größeren Qualitätsverlust schlussendlich eine Größe von weniger als 100 Kilobytes hat.

Zunächst müssen dir 3 verschiedene Begriffe verständlich sein, wenn es um die Bearbeitung eines Bildes geht:

Zunächst werden wir uns um die Dateigröße kümmern. Diese sollte dringend reduziert werden, da unser Bild noch immer ca. 3 MB groß ist. Um das zu erreichen, werden wir das Bild komprimieren. Bei der Komprimierung geht es darum, die Dateigröße so klein wie möglich zu halten. Wir unterscheiden dabei zwischen einer verlustfreien Komprimierung und einer verlustbehafteten Komprimierung. Da dein Bild nach wie vor ohne Qualitätsverlust dargestellt werden sollte, entscheiden wir uns für die verlustfreie Komprimierung. Dabei wird versucht, Pixel gleicher oder ähnlicher Farbtöne zusammenzufassen und sonstige Redundanzen, die für die Bilddatei nicht dringend notwendig sind, zu entfernen. Dadurch wird die Dateigröße um einiges geringer. Nach der Komprimierung hat unser Bild noch eine Dateigröße von etwa 600 KB. Für die Website ist das natürlich noch immer zu groß, aber die Dateigröße hat sich bereits auf ein Fünftel reduziert. Wir benutzen dazu das Tool von ILOVEIMG. Das Tool ist kostenlos, sofern du nicht viele Bilder gleichzeitig komprimiert haben oder in Teams arbeiten möchtest und liefert hochwertige Ergebnisse.
Selbstverständlich gibt es noch viele weitere Tools, unter anderem auch PhotoShop, die aber oftmals kostenpflichtig sind.

Die Dateigröße haben wir jetzt auf ein Fünftel reduziert, aber unser Bild hat noch immer die Bildgröße von 4000×3000 Pixel. Für eine Website ist das unnötig groß. Nun gilt es, die Bildgrösse zu verkleinern. Dabei müssen wir uns zuvor Gedanken machen, wofür wir das Bild auf unserer Website verwenden und wie groß es auf dem Screen dargestellt werden soll. Wünscht du die volle Bildbreite auf deinem Screen, dann empfehlen wir die Bildbreite von 1920px. Achte darauf, dass die Bildgröße nicht kleiner ist, ansonsten werden die Bilder unscharf. Möchtest du das Bild nicht über die volle Breite, sondern beispielsweise nur auf die Standardbreite, dann reichen 1080px. Schließlich soll die Bildgröße nur so groß sein, wie das Bild auf der Website schlussendlich abgebildet wird.

Um das zu erreichen, müssen wir das Bild skalieren. Dazu verwenden wir das kostenlose Bildbearbeitungsprogramm von GIMP. Sobald du das Bild skaliert hast und es exportieren möchtest, kannst du die Qualität und somit die Dateigrösse verändern. GIMP schlägt dir dabei die Qualitätseinstellung des Originalbildes vor. Mittels dem Schieberegler kannst du die Dateigröße noch weiter verkleinern. Anhand des Vorschaubilds siehst du, wann die Qualität des Bildes merklich abnimmt. Zeitgleich wird die Dateigröße angegeben.
Mit dem optimalen Mittelweg sollte die Datei jetzt nicht größer als 100 bis 150 KB groß sein.

Im letzten Punkt der Bearbeitung geht es um das Bildformat. Unser Bild ist aktuell im JPG gespeichert und weist eine Dateigröße von etwa 150 KB auf. Wenn du damit zufrieden bist, kannst du dein Bild nun hochladen. Möchtest du allerdings das optimale Ergebnis erzielen, solltest du noch einen Blick auf die verschiedenen Bildformate werfen.

JPG und PNG sind zweifelsohne die bekanntesten Bildformate. Beide sind sogenannte Pixelformate und eignen sich gut für die Einbindung auf Websites. Besonders das JPG-Format eignet sich gut für Bilder, da es einen relativ guten Kompromiss zwischen Dateigröße und Bildqualität gewährleistet. Transparenz via Alphakanal wird von JPG, im Gegensatz zum PNG-Format, nicht unterstützt. Das Grafikformat PNG eignet sich dagegen gut für Illustrationen, Icons oder eben wenn Transparenz erforderlich ist. Da die PNG-Datei mehr Informationen speichert als die JPG-Datei, sollten Sie normale Bilder nicht im PNG-Format auf Ihre Website laden.

Google ist eine exzellente Nutzererfahrung sehr wichtig. Bekanntlich gehört zur Nutzererfahrung auch, dass eine Website zügig lädt. Daher ist es nicht verwunderlich, dass sich der Suchmaschinenriese Gedanken über ein hauseigenes und lizenzfreies Bildformat gemacht hat. Am 24. September 2010 war es dann so weit und das WebP-Format wurde veröffentlicht. Laut Google ist die Dateigrösse von Bildern im WebP-Format rund 30% kleiner als bei JPG-Dateien mit gleicher Bildqualität. Selbstverständlich haben wir das getestet und waren positiv überrascht. Bei vielen Bildern war die Ersparnis sogar bei 40-50%. Unser Bild im Beispiel hat nun also eine Dateigröße von nur noch etwa 75 KB und die Qualität ist noch immer gleich.

Schau selbst, indem du den Schieberegler hin und her bewegst. Auf der linken Seite ist das Bild im JPG-Format abgespeichert und auf der rechten Seite im WebP-Format. Merkst du einen Unterschied?

Nun also nichts wie los und alle Bilder im WebP-Format speichern? Vorsichtig, denn das WebP hat einen entscheidenden Nachteil. Es wird nicht von allen Web-Browsern gleichermaßen unterstützt. Wenn du nun alle Bilder im WebP hochlädst, kann es vorkommen, dass gewisse Nutzer deine Bilder nicht angezeigt bekommen. Für ein positives Nutzererlebnis auf deiner Website wäre das natürlich fatal. Aktuell nutzen nämlich noch immer ca. 5% aller Internetnutzer einen Browser, der das WebP-Format nicht unterstützt. Von diesem Problem betroffen sind hauptsächlich die Safari-Nutzer. Safari unterstützt WebP vollumfänglich erst seit der Version 16.0, welche das Release-Datum im September 2022 hatte. Nutzer von älteren Versionen können Bilder im WebP nicht sehen.

Daher ist es nicht ratsam, Bilder einfach so im WebP auf deine Website zu laden. Aber auch hier gibt es Hilfe.

Falls du WordPress nutzt, empfehlen wir dir das Plugin von Imagify. Das Tool ist ebenfalls kostenlos, sofern du pro Monat nicht mehr als 20MB Bildmaterial bearbeitet haben möchtest. Für einen monatlichen Preis von $4.99 kannst du bis zu 500MB Bildmaterial pro Monat verarbeiten und für $9.99/Monat kannst du das Tool unbegrenzt nutzen.

Nebst dem, dass Imagify deine Bilder weiter komprimiert und in der richtigen Größe bereitstellt, kann es dir auch helfen, die Bilder in WebP zu konvertieren und diese Versionen den Besuchern mit Browsern, die dies unterstützen, zur Verfügung zu stellen. Trifft ein Nutzer mit einer älteren Browserversion auf deine Website, werden die Bilder nach wie vor im JPG-Format (oder eben in diesem Format, in welchem du deine Bilder ursprünglich hochgeladen hast) angezeigt. Allen anderen Nutzern wird das Bild im WebP-Format angezeigt und aufgrund der geringeren Datenmenge deutlich schneller geladen.
Somit kannst du allen Besuchern ein wunderbares Surferlebnis bieten.