Das richtige Bildformat fürs Web
Bevor du ein Bild auf deine Website lädst, musst du auf die Dateigrösse, die Bildgrösse und aufs richtige Bildformat achten. Unbearbeitete Bilder machen deine Website langsam. Alles, was du über das optimale Bildformat wissen musst, erfährst du in diesem Artikel.
Warum müssen Bilder bearbeitet werden?
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.
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össe eines einzelnen Bildes immer grösser. Oftmals hat ein einzelnes unbearbeitetes Bild eine Dateigrösse 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össe von 50 bis maximal 100 Kilobytes hochzuladen. Die Frage stellt sich nun, wie du ein Bild mit einer Grösse von 3 Megabytes so bearbeiten kannst, dass das gleiche Bild ohne grösseren Qualitätsverlust schlussendlich eine Grösse 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:
Datei- oder Bildformat
Gängige Formate sind JPG, PNG, GIF, usw.
Dateigrösse
Bildgrösse
Die Bildgrösse ist häufig in Pixel angegeben (z.B. 4000x3000px).
Das Bild richtig komprimieren
Zunächst werden wir uns um die Dateigrösse kümmern. Diese sollte dringend reduziert werden, da unser Bild noch immer ca. 3 MB gross ist. Um das zu erreichen, werden wir das Bild komprimieren. Bei der Komprimierung geht es darum, die Dateigrösse 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össe um einiges geringer. Nach der Komprimierung hat unser Bild noch eine Dateigrösse von etwa 600 KB. Für die Website ist das natürlich noch immer zu gross, aber die Dateigrösse 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 richtige Bildgrösse
Die Dateigrösse haben wir jetzt auf ein Fünftel reduziert, aber unser Bild hat noch immer die Bildgrösse von 4000×3000 Pixel. Für eine Website ist das unnötig gross. 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 gross 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össe 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. Schliesslich soll die Bildgrösse nur so gross 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össe noch weiter verkleinern. Anhand des Vorschaubilds siehst du, wann die Qualität des Bildes merklich abnimmt. Zeitgleich wird die Dateigrösse angegeben.
Mit dem optimalen Mittelweg sollte die Datei jetzt nicht größer als 100 bis 150 KB gross 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 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 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össe 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 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?
Das richtige Bildformat mit dem Plugin "Imagify"
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.
Weitere Beiträge, die dich interessieren könnten
10 Gründe für eine eigene Website
Ohne Website? Keine Existenz! Von verpassten Chancen bis zum Unsichtbar sein im Internet – hier sind 10 explosive Gründe, warum du jetzt eine eigene Website brauchst.
Unser CMS Vergleich – Die 5 beliebtesten CMS auf einen Blick
Lerne die Vor- und Nachteile der führenden Content Management Systeme in unserem CMS Vergleich kennen! Ob WordPress, Joomla oder Drupal – Wir nehmen alle unter die Lupe!
Was ist ein Content Management System
Wenn du dich für Webdesign interessierst oder dich mit einer eigenen Website beschäftigst, bist du garantiert auch schon über den Begriff „CMS“ oder „Content Management System“ gestolpert. Was das genau ist und wozu es verwendet wird, werden wir dir in diesem Artikel anhand von einigen Beispielen erklären.