Es ist ein Trend, dessen Ende noch lange nicht in Sicht ist: Wir lieben Bilder im Web. Je größer und eindrucksvoller, desto besser. Doch das Laden großer Bilddaten sorgt zugleich für lange Ladezeiten – was ungeduldigen Nutzern oft als Grund dient, die Webseite zu verlassen. Auch für Suchmaschinen gehören kurze Ladezeiten zu den wichtigsten Kriterien für das Ranking der Webseiten.
Die Qualität der Bilder zu mindern, kommt jedoch für viele nicht infrage. Schließlich ist die Bildqualität für den Nutzer oft gleichbedeutend mit der Qualität der Webseite im Allgemeinen. Dennoch ist das Optimieren und Komprimieren der Webinhalte sowohl notwendig als auch machbar. Wir zeigen Ihnen, wie Sie die Bilder für Ihre Webseite so anpassen können, dass Sie die Ladezeiten schonen und dabei die beeindruckende Wirkung beibehalten, die Sie auf den Besucher haben sollen.
Das Dateiformat: Die Fähigkeiten des Bildes
Grundsätzlich sollten Sie bei der Optimierung Ihrer Bilder und Grafiken zwischen diesen drei Begriffen unterscheiden: Dateiformat, Dateigröße und Bildgröße. Das Dateiformat bezeichnet die Art Ihres Bildes und kann über die Endung am Dateinamen eingesehen werden. Die meistgenutzten Bildformate für Webinhalte sind:
Das JPEG (Joint Photographic Experts Group) überzeugt durch eine sehr gute Komprimierung, die vergleichsweise wenig Probleme für die Bildqualität und Handhabung bedeutet. Es verfügt außerdem über ein sehr hohes Farbspektrum und wird daher gerne für die Darstellung von Fotografien verwendet. JPEG ist das geläufigste Format für Internetbilder.
Das PNG (Portable Network Graphic) kann ebenso Bilder komprimieren, dies wird jedoch dadurch bewerkstelligt, dass es die Menge der verwendeten Farben reduziert. Je stärker also ein Bild komprimiert ist, desto kleiner wird auch das Farbspektrum. Allerdings ist das PNG (im Gegensatz zum JPEG) in der Lage, Bilder mit transparentem Hintergrund zu stellen, was eine begehrte Eingliederung auf der Webseite erzeugt. Daher wird PNG hauptsächlich für Grafiken mit wenig Farben und für transparente Bilder benutzt.
Beim GIF (Graphics Interchange Format) handelt es sich mittlerweile um ein überholtes Format, das nur noch wenig Anwendung findet. Es unterstützt zwar ebenfalls Transparenz, verfügt aber nur über ein geringes Farbspektrum von 256 Farben, was bei Fotos oft unnatürlich wirkt. Dennoch hat es einen entscheidenden Vorteil: Es kann Bilder animieren. Das Format ist daher besonders für Animationen und kleine Grafiken, zum Beispiel in Newslettern, geeignet.
Die Bildgröße: Das Volumen des Bildes
Bildgröße und Dateigröße sind insgesamt stark voneinander abhängig. Die Dateigröße legt fest, über wie viele Bytes (KB, MB oder GB) ein Bild verfügt, also wie viel Speicherplatz es verbraucht. Die Bildgröße beschreibt hingegen die Anzahl der Pixel. Je mehr Pixel, desto größer das Bild. Je mehr Pixel pro Zoll, desto höher die Auflösung.
Viele Bilder, die direkt aus der Kamera kommen, sind unkomprimiert viele tausend Pixel groß. Der Webseitenbereich auf dem Computer-Monitor ist aber meist nur ca. 1280 px breit. Man braucht also eigentlich gar nicht so große Bilder.
Wer mit platzfüllenden Bildern überzeugen will, wählt am besten eine Bildgröße von 1920 x 1280 Pixel. Dies sollte jedoch die Maximalgröße sein. Sonst treiben Sie die Ladezeit nur unnötig in die Höhe. Außerdem sollten Sie keine übergroßen Bilddateien hochladen, um diese dann verkleinert auf der Webseite darzustellen – das beeinflusst die Bilddarstellung massiv und sorgt für eine unnötige Datenmenge.
„Auch für Suchmaschinen gehören kurze Ladezeiten zu den wichtigsten Kriterien für das Ranking der Webseiten.“
Die Bildoptimierung: Weniger ist mehr
Die Bildkomprimierung ist ein sehr guter Weg, um die Ladezeiten einer Webseite zu verkürzen. Das Ziel ist, gute Bilder und Grafiken bei geringer Dateigröße zu erhalten. Da Komprimierung jedoch auch Qualitätsverlust bedeutet, müssen Sie einen Kompromiss finden. Zu stark komprimierte Bilder werden oft unscharf und „verpixelt“. Hochauflösende Bilder (zum Beispiel 1920x 1080 Pixel) können übrigens stärker komprimiert werden als kleinere Bilder (zum Beispiel 600 x 400 Pixel).
Sie können Ihre Bilder mit vielen verschiedenen Bildbearbeitungsprogrammen komprimieren. Am einfachsten funktioniert es mit Photoshop: Einfach auf „Datei“, „Exportieren“ und „Für Web speichern“ klicken. Anschließend können Sie im Menü das Dateiformat und die Bildgröße in Pixeln auswählen. Um einen guten Wert zwischen Ladezeit und Qualität zu erzielen, wählen Sie bei JPG „Hoch (60)“ aus. Speichern Sie das Bild anschließend unter einem anderen Namen, damit Ihnen das Originalbild erhalten bleibt.
Beim Skalieren von Bildern ist Vorsicht angebracht: Es kann leicht passieren, dass Bilder ihre ursprünglichen Proportionen verlieren und dadurch verzerrt werden. Diese müssen unbedingt erhalten bleiben. Allgemein sollten Sie darauf achten, dass Sie die Bilder auf Ihrer Webseite immer möglichst mit demselben Bildverhältnis hochladen und nicht zu stark variieren. Einheitlichkeit schafft Übersichtlichkeit und wirkt weniger willkürlich.
Im Online-Bereich bietet sich für übrigens Neueinsteiger ein Bildverhältnis von 9:6 an. Dies sind gängige Proportionen, mit denen Sie erstmal nichts falsch machen können.
Der Dateiname: Die Stütze der Suchmaschinenoptimierung
Zum Schluss gibt es noch einen kurzen Exkurs in den SEO-Bereich. Suchmaschinen erkennen zwar Bilder, aber deren Inhalt nicht. Dabei helfen die Dateinamen weiter, die den Suchmaschinen sagen, was auf dem Bild zu sehen ist. Es gibt einige Regeln, die Sie für die webkonforme Benennung beachten sollten:
- keine Leerzeichen (stattdessen Bindestriche)
- keine Großbuchstaben
- keine Umlaute (ä, ö, ü)
- keine Sonderzeichen (ß, ?, !, /)
Ein Beispiel für einen optimalen Bildtitel könnte so aussehen: agentur-anmut-schreibt-ueber-bilder.jpg
Weiterhin hilft eine kleine Beschreibung im alt-Attribut weiter, falls sich doch mal ein Besucher ohne Bildanzeige auf Ihre Webseite begibt. Auch die Suchmaschinen berücksichtigen diese kleinen Texte.
Das Maximum herausholen
Wenn Sie Ihre Bilder bereits optimal aus Photoshop gespeichert haben, können Sie mit der Software TinyJPG noch zusätzlich eine verstärkte Komprimierung ohne Qualitätsverlust herausholen.
„Dennoch ist das Optimieren und Komprimieren der Webinhalte sowohl notwendig als auch machbar.“
Halbieren Sie Ihre Ladezeiten!
Mit den vorhergehenden Informationen sollten Sie keinerlei Probleme damit haben, die Bilder Ihrer Webseite so zu optimieren. Denn was für den Internetnutzer kaum einen erkennbaren Unterschied macht, kann die Ladezeit rapide verkürzen. Nutzen Sie also Ihre Möglichkeiten! Und falls Sie doch noch Fragen zur Inhaltserstellung haben, kontaktieren Sie uns – wir beraten Sie gerne in allen Belangen der Webseitengestaltung.