Das optimale Bildformat fürs Web
Bilder sind für Ihre Website essenziell, können Ihren PageSpeed aber stark ausbremsen. Wie Sie Ihre Bilder verkleinern, welches Bildformat von Vorteil ist und was es sonst zu beachten gibt, erfahren Sie in diesem Artikel.
Sie gelangen auf eine Website, die befüllt ist mit etwa 10’000 Wörtern, eine regelrechte Textwüste. Spannend, oder? Falls Sie den besagten Text nicht brennend interessiert, lesen Sie 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 auf der Website 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 Ihre Website ins Schneckentempo versetzen, sollten Sie sie unbearbeitet auf Ihre Website laden.
Sie fragen sich jetzt, welches Bildformat das geeignetste ist, wie groß die Datenmenge der Bilder maximal sein darf und vor allem, wie Sie ohne Qualitätsverlust Ihre Bilder verkleinern können. Dann dürfen Sie gespannt weiter lesen. Wir zeigen Ihnen, mit welchen kostenlosen Tools Sie Ihre Bilder für die Website bearbeiten.
Das unbearbeitete Bildformat
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ürden Sie Ihre Bilder – und wir gehen davon aus, dass Sie nicht nur ein Bild auf Ihrer Website laden – unbearbeitet hochladen, wäre es um Ihre schnelle Website geschehen. Wir empfehlen, Bilder mit einer maximalen Dateigröße von 100 bis maximal 150 Kilobytes hochzuladen. Die Frage stellt sich nun, wie Sie ein Bild mit einer Größe von 3 Megabytes so bearbeiten können, dass das gleiche Bild ohne größeren Qualitätsverlust schlussendlich eine Größe von weniger als 100 Kilobytes hat.
Zunächst müssen Ihnen 3 verschiedene Begriffe verständlich sein, wenn es um die Bearbeitung eines Bildes geht:
Welche Begriffe für die Bildbearbeitung gibt es?
Bildformat, Dateigröße und Bildgröße
Datei- oder Bildformat
gängige Formate sind JPG, PNG, GIF, usw.
Dateigröße
Die Dateigröße ist immer in Kilobyte (KB) oder Megabyte (MB) angegeben.
Bildgröße
Die Bildgröße ist immer in Pixel angegeben (z.B. 4000x3000px).
Das Bild richtig komprimieren
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 Ihr 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 Sie nicht viele Bilder gleichzeitig komprimiert haben oder in Teams arbeiten möchten und liefert hochwertige Ergebnisse.
Selbstverständlich gibt es noch viele weitere Tools, unter anderem auch PhotoShop, die aber oftmals kostenpflichtig sind.
Die richtige Bildgröße
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ünschen Sie die volle Bildbreite auf Ihrem Screen, dann empfehlen wir die Bildbreite von 1920px. Achten Sie darauf, dass die Bildgrösse nicht kleiner ist, ansonsten werden die Bilder unscharf. Möchten Sie 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 Sie das Bild skaliert haben und es exportieren möchten, können Sie die Qualität und somit die Dateigrösse verändern. GIMP schlägt Ihnen dabei die Qualitätseinstellung des Originalbildes vor. Mittels dem Schieberegler können Sie die Dateigröße noch weiter verkleinern. Anhand des Vorschaubilds sehen Sie, 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.
Das richtige Bildformat
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 Sie damit zufrieden sind, können Sie Ihr Bild nun auf Ihre Website laden. Möchten Sie allerdings das optimale Ergebnis erzielen, sollten Sie noch einen Blick auf die verschiedenen Bildformate werfen.
JPG oder PNG Bildformat?
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.
WebP – Das Bildformat von Google
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 soweit 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.
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 Sie nun alle Bilder im WebP hochladen, kann es vorkommen, dass gewisse Nutzer Ihre Bilder nicht angezeigt bekommen. Für ein positives Nutzererlebnis auf Ihrer 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 Ihre Website zu laden. Aber auch hier gibt es Hilfe.
Falls Sie WordPress nutzen, empfehlen wir Ihnen das Plugin von Imagify. Das Tool ist ebenfalls kostenlos, sofern Sie pro Monat nicht mehr als 20MB Bildmaterial bearbeitet haben möchten. Für einen monatlichen Preis von $4.99 können Sie bis zu 500MB Bildmaterial pro Monat verarbeiten und für $9.99/Monat können Sie das Tool unbegrenzt nutzen.
Nebst dem, dass Imagify Ihre Bilder weiter komprimiert und in der richtigen Größe bereitstellt, kann es Ihnen 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 Ihre Website, werden die Bilder nach wie vor im JPG-Format (oder eben in diesem Format, in welchem Sie Ihre Bilder ursprünglich hochgeladen haben) angezeigt. Allen anderen Nutzern wird das Bild im WebP-Format angezeigt und aufgrund der geringeren Datenmenge deutlich schneller geladen.
Somit können Sie allen Besuchern ein wunderbares Surferlebnis bieten.