Es dauert nur Sekunden, in denen ein Nutzer entscheidet, ob er auf einer Webseite bleibt oder auf die nächste wechselt, ob er sich den Blog näher anschaut oder ihn wegklickt. Webseiten und Blogs müssen deshalb grafisch ideal aufbereitet sein, damit sie den Nutzer überzeugen. Bilder stechen dabei zuerst ins Auge: Sie sind neu und eindrucksvoll, laden in Sekundenschnelle – allerdings nur, wenn sie optimal eingebunden sind.
Eine Auseinandersetzung mit dem Thema Bildoptimierung hilft Dir dabei, auch für deine Webseite Bilder zukünftig optimal einzubinden und keine Nutzer mehr aufgrund von langen Ladezeiten zu verlieren. Wenn Du verhindern möchtest, dass Besucher auf andere Webseiten abspringen, um nach Informationen zu suchen, solltest Du Faktoren wie das Dateiformat, die Bild- und Dateigröße und auch die Komprimierung nicht außer Acht lassen.
Dateiformat
Zuerst entscheidest Du dich als Webseitenbetreiber für ein Dateiformat. Die Endung am Dateinamen verrät dieses. Das Format ist kein unwichtiger Faktor, wenn es darum geht Bilder korrekt einzubinden. Dabei gibt es drei hauptsächlich genutzte Formate in der Online-Welt: JPG, PNG und GIF.
JPGs oder auch JPEGs (Joint Photographic Experts Group) werden in Digitalkameras genutzt, bei professionellen Druckdateien verwendet, in E-Mails verschickt und sind das meistbenutzte Format im Internet. Das Format verfügt über ein hohes Farbspektrum. Mit den 16,7 Millionen umfassten Farben ist das JPG das optimale Format, um Fotografien darzustellen. Auch überzeugt das JPG durch eine gute Komprimierung, die einfach in der Handhabung ist und wenige Probleme für die Bildqualität mit sich zieht.
PNG (Portable Network Graphic) ist ein ebenfalls vielfach im Internet verwendetes Format, das transparente Grafiken anzeigen und speichern kann. Das JPG-Format hingegen kennt diese Option nicht. PNG ist das einzige Bildformat, welches verlustfrei komprimiert werden kann. Zu beachten ist jedoch, dass die Menge der verwendeten Farben bei der Komprimierung reduziert wird. Ein stark komprimiertes Bild im PNG-Format hat also ein kleineres Farbspektrum. Das PNG-Format bietet sich somit bei Grafiken mit wenig Farben, Schriften und transparenten Bildern besonders an.
Beim GIF (Graphics Interchange Format) handelt es sich um ein Grafikformat, welches für Cartoons, Zeichnungen und Schwarz-Weiß-Fotografien eingesetzt wird. Es unterstützt Transparenz, verfügt aber nur über ein Farbspektrum von 256 Farben, was Fotos unnatürlich aussehen lässt. Dafür kann das GIF mehrere Einzelbilder in einer Datei abspeichern. Diese Fähigkeit ermöglicht 2D-Animationen. Beim Öffnen einer animierten GIF-Datei wiederholt sich die Animation – je nach Einstellung – immer wieder, ein paar Mal oder nur einmalig.
Bild- und Dateigröße
Ein weiterer Bereich der Bildoptimierung für das Web betrifft die Bild- und Dateigröße. Durch eine optimal gewählte Bildgröße mit entsprechendem Dateivolumen kannst Du die Ladegeschwindigkeit der Webseite erheblich reduzieren. Das hat einen großen Vorteil für die Nutzerfreundlichkeit deiner Webseite und wirkt sich auch positiv auf das Webseiten-Ranking aus, denn die Ladegeschwindigkeit ist ein von Google bestätigter Ranking-Faktor.
Bild- und Dateigröße sind voneinander abhängig. Während die Dateigröße den verbrauchten Speicherplatz in Bytes (KB, MB oder GB) beschreibt, umfasst die Bildgröße die Anzahl der Pixel. Dabei gilt: Je mehr Pixel, desto größer das Bild. Je mehr Pixel pro Zoll, desto höher die Auflösung.
Für den Webseitenbereich bietet eine Dateigröße von etwa 200 KB eine gute Orientierung – je nach Anwendungsbereich kann hier natürlich auch eine größere Datei genutzt werden. Die Nachteile wie eine längere Ladezeit sollte dabei aber bewusst in Kauf genommen werden. Richtwert für die Bildgröße bei großen Bildern ist eine Maximalgröße von 1920 x 1280 Pixel, da sich sonst auch hier die Ladezeiten unnötig verlängern.
Kommen die Fotos „frisch“ aus der Kamera, so sind sie meistens tausende Pixel groß. Der wohl häufigste Fehler, der bei der Einbindung von Bildern gemacht wird, besteht darin, dass Bilder unbearbeitet auf den Webserver geladen werden. Für die optimale Einbindung bedarf es einer Bildoptimierung.
Bildoptimierung durch Komprimierung
Das Ziel bei der Einbindung von Bilddateien im Webseitenbereich ist es, einen guten Kompromiss zwischen maximaler Komprimierung, also kleinen Dateigrößen, und optimaler Bildqualität zu finden. Zu stark komprimierte Bilder weisen den bekannten Effekt des „Verpixelns“ auf. Bilder können unscharf aussehen, wenn die Komprimierung falsch angegangen wird. Am einfachsten gestaltet sich eine Bildoptimierung mit Bildbearbeitungsprogrammen wie Photoshop. Dort gibt es die Funktion „für Web speichern“, die die Bildkomprimierung übernimmt. Über „Datei“ und „Exportieren“ lässt sich die Funktion aufrufen und Sie entscheiden nur noch im Menü über Dateiformat und Bildgröße. Wichtig: Das Bild muss mit einem neuen Dateinamen versehen werden, sodass das Original nicht überschrieben wird.
Dateiname
Der Dateiname spielt eine wichtige Rolle für die Suchmaschinenoptimierung. Damit die Suchmaschinen nicht nur das Bild an sich, sondern auch den Inhalt dieses erkennt, muss das Bild mit ausreichend Informationen durch den Dateinamen versehen werden. Eine webkonforme Betitelung folgt diesen einfachen Regeln:
• keine Leerzeichen (stattdessen Bindestriche)
• keine Großbuchstaben
• keine Umlaute (ä, ö, ü)
• keine Sonderzeichen (ß, ?, !, /)
Ein Bild, welches in diesen Blogeintrag eingebunden ist, könnte beispielsweise so betitelt werden: „Die-optimale-Bildgroesse-fuer-Webseite-und-Blog.jpg“
Auch sollte eine kurze Beschreibung im alt-Attribut eingefügt werden, welche angezeigt wird, falls ein Nutzer ohne Bildanzeige die Webseite besucht. Auch diese Beschreibungstexte werden von den Suchmaschinen mit einbezogen.
Fazit
Entscheide dich für das richtige Dateiformat, wähle die ideale Bildgröße und komprimiere deine Bilder, bevor Du sie auf den Server lädst – kleine aber wichtige Schritte, mit denen Du die Ladezeit deiner Webseite deutlich verkürzen und mit einem für den Internetnutzer kaum erkennbaren Unterschied zur Optimierung deiner gesamten Webseite beitragen kannst.
