Bilder optimieren bewahrt dich vor dem häufigsten Grund, warum viele Webseiten sehr lange Ladezeiten aufweisen. Glaub mir, eine Webseite mit einer Ladezeit von über 2 Sekunden mag weder Google noch deine BesucherIn. Google antwortet durch ein schlechteres Ranking und die BesucherIn ist genervt und weg, noch bevor sich die Seite komplett aufgebaut hat!
„Jedes eingesparte Bild, ist ein gutes Bild!“ könnte ich jetzt provokativ sagen. Ja, es stimmt schon, dass das World Wide Web ohne Bilder in einer rasenden Geschwindigkeit unterwegs wäre. Aber Bilder haben wichtige Aufgaben und sind - gezielt eingesetzt und gut optimiert - ein wichtiger Bestandteil jeder Website!
Wissenswertes zu Bildern im Web
Warum brauche ich Bilder?
Wir denken, träumen und speichern Erinnerungen in Bildern. Sie leiten unser Auge, lösen Emotionen aus, werden schneller erfasst, verstanden und bleiben in Erinnerung. Nicht ohne Grund gibt es die bekannte Aussage „Ein Bild sagt mehr als tausend Worte!“
In manchen Bereichen erleichtern Bilder die Bedienbarkeit und sie sind auf alle Fälle wichtig für die Nutzererfahrung (User Experience). Es gibt also viele gute Gründe, Bilder auf deiner Webseite einzusetzen. Vorausgesetzt du beachtest neben einer guten Motivwahl ein paar grundlegende Dinge, überwiegen also eindeutig die Vorteile.
Wie beeinflussen Bilder die Suchmaschinenoptimierung?
Zur Suchmaschinenoptimierung gehört viel mehr, als nur Keyword-Optimierung! Unter anderen die Ladezeit einer Webseite. Einer der größten Faktoren dabei sind die Bilder.
Natürlich kann man mit so Dingen wie „Lazy load“ und „Caching Tools“ einiges wett machen. Grundsätzlich macht es aber natürlich Sinn, etwas bereits in optimalem Zustand auf die Webseite zu packen, statt es nachher mit Tools schneller zu laden. 
Bildformate PNG, JPG, GIF & WebP – was nehm ich jetzt?
Ich werde mich hüten, dich hier jetzt mit den Beschreibungen von Bildformaten zu langweilen. Denn zum ersten kennst du wahrscheinlich den Unterschied und außerdem bringt es dir rein gar nichts, die Definition eines PNGs zu kennen. Dich interessiert doch viel mehr, ob und wann du es auf deiner Webseite einsetzt, oder?
Trotzdem lass mich kurz etwas zu WebP (umgangssprachlich „Weppy“ ausgesprochen) sagen, denn das ist ein eher noch wenig geläufiges Format. Es ist ein Format für statische und animierte Bilder, das von Google entwickelt wurde. Ein großer Vorteil ist, dass es sozusagen die Fähigkeiten von JGP, PNG und GIF vereint und das bei rund 25% geringerer Dateigröße. Trotzdem hat es sich noch nicht wirklich breitflächig durchgesetzt und wird auch noch nicht von allen Browsern unterstützt.
Grundsätzlich solltest du dich bei Bildern auf deiner Webseite für JPGs entscheiden. Mit wenigen Ausnahmen, wie z.B. beim Favicon oder beim Logo, wenn du eine Grafik ohne Hintergrund brauchst, denn das kann nur ein PNG.
GIFs nutze und empfehle ich persönlich nicht, da diese sehr schnell sehr große Dateigrößen erreichen und man Animationseffekte wunderbar mit einem guten Pagebuilder einbauen kann.
Drei Schritte zur Vorbereitung vor dem Hochladen
Die „richtigen“ Maße
Eine Herausforderung, die mir in der Praxis immer wieder begegnet ist, dass meine Kundinnen wissen, dass ein Bild zum Beispiel 1.280 x 540 Pixel groß sein soll, das Originalbild dann aber z.B. von Depositfotos mit 6.720 x 4.480 Pixel heruntergeladen wurde. Es hat also weder die richtige Größe noch das richtige Seitenverhältnis. Was jetzt?
Ein wenig hier weg schnippeln und ein wenig da. Ach, jetzt ist ein Teil weg, der aber wichtig wäre.
Mach es dir einfach. Lege dir in Canva – dafür reicht auch das kostenlose Konto – ein neues Bildformat mit den Größen (bzw. um 30-50% größer, damit sie überall gut und nicht verpixelt aussehen) an, die du brauchst. Dann lade das Bild hoch und ziehe es auf den Arbeitsbereich. Durch Doppelklicken kannst du es dann auch noch umpositionieren oder vergrößern.
Damit schlägst du gleich mehrere Fliegen mit einer Klappe! Denn du kannst es gleich als JPG herunterladen und die Qualität ist bezüglich der Auflösung gleich auf 80% voreingestellt.
Das Komprimieren - Was passiert da?
Bei jedem Bild gibt es im Hintergrund sogenannte Metadaten, die können ganz schön umfangreich sein und erhöhen wiederum die Dateigröße. Was das für Infos sind? Na z.B. wenn du das Bild mit deinem Mobiltelefon aufgenommen hast, dann findet man in den Metadaten, welches Telefon, Infos über die Kamera, das Aufnahmedatum usw.
Also los zur Datei-Diät. Hier helfen dir kostenlose Tools, wie z.B. Tinypng oder iloveimg. Datei hochladen, komprimieren und wieder runterladen. Ruck zuck!
Vergib einen sinnvollen Dateinamen
Mir stellen sich immer bildlich gesprochen die Nackenhaare auf, wenn ich mich auf einer Webseite einlogge und Bilder dann so Namen wie DSC4517 haben.
Das ist aus mehreren Gründen nicht sinnvoll:
- Wenn du dieses Bild unter 190 anderen Bildern in der Mediathek von WordPress suchst, weil du es vielleicht mal austauschen möchtest, wirst du dich ärgern.
- Wenn das Bild nicht geladen werden kann, wird der Dateiname angezeigt!
- Google liebt es im Namen schon zu erfahren, worum es geht.
- Du kannst im Dateinamen auch gleich dein Keyword unterbringen, wenn du Suchmaschinenoptimierung machst!
Hier sei der Vollständigkeit halber noch erwähnt: Bitte nutze keine Umlaute und keine Leerschritte. Du kannst Wörter aber mit Bindestrich (keine Grundstriche!) verbinden, dieser wird von Google als Leerschritt gesehen.
Jetzt geht‘s endlich ans Hochladen! Noch ein paar Tipps.
Scharrst du schon mit den Hufen? 
Jetzt hast du dein Bild nach allen Regeln der Kunst „aufgehübscht“ und kannst es in die Mediathek deiner Webseite hochladen.
Ich habe als Frischling zugegeben auch nicht an Bildoptimierung gedacht. Dann hatte ich so „Brummer“ mit 1 MB auf der Seite. Ich kann mich noch zu gut erinnern, wie ich alle Bilder überarbeitet, ausgetauscht und neu verlinkt habe. 
Heute gibt’s glücklicherweise dazu einige Helferlein.
Noch ein paar Tipps damit du am Ende nicht draufkommst, dass du gleich noch etwas optimieren hättest können.
Alternativtext und Beschreibung nicht vergessen
Beim Hochladen deiner Bilder hast du in WordPress die Möglichkeit sowohl einen alternativen Text als auch eine Beschreibung deines Bildes anzugeben. Ich lege dir ans Herz diese zu nutzen, warum erkläre ich dir gleich. Die Beschriftung kannst du frei lassen. Außer du möchtest, dass unter deinem Bild ein bestimmter Text erscheint.
Alternativer Text und Beschreibung werden z.B. Menschen mit Seheinschränkung vorgelesen und das mag Google. Wenn du also die NutzerInnen unterstützt, steigst du im Ansehen und damit auch im Ranking bei den Suchmaschinen.
Außerdem sind diese Bereiche SEO – technisch gesehen gute Orte, um dein Keyword unterzubringen, wie auch der Dateiname.
Plugin Tipp, wenn du einzelne Bilder tauschen willst
Wie sieht es nun aus, wenn du ein bestehendes Bild auf deiner Webseite optimiert hast und es nun tauschen willst?
Meistens wissen wir ja nicht, wo Bilder überall auf unserer Seite verlinkt sind. Wenn du es also nun löscht und einen Link auf das neue Bild zu ändern vergisst, kann das unschöne Bildfehler zur Folge haben.
Wie könnte es anders sein, diesem Problem hat sich netterweise schon jemand angenommen. Dafür gibt es ein Plugin namens Enable Media Replace. Da kannst du ganz bequem sagen, welches Bild mit welchem ersetzt werden soll und den Rest erledigt das Plugin. 
Wenn du Dateigröße aller Bilder in einem Schwung verbessern möchtest
Geht es noch bequemer? Ja, es geht. Auch wenn ich dir empfehle, so Schwergewichte mit einem Megabyte Dateigröße händisch zu bearbeiten. Es gibt es auch die Möglichkeit alle Bilder deiner Mediathek gesammelt zu optimieren. Hierbei unterstützt dich das PlugIn ShortPixel Image Optimizer. Bis zu einer kleinen Bildanzahl kostenlos und für viele Bilder kannst du dir „Credits“ günstig als Paket kaufen.
Meine Checkliste inklusive bewährte Bildmaße und Dateigrößen
Wenn du jetzt denkst „Boah, das ist aber viel!“ dann kann ich dich beruhigen. In Wirklichkeit sind es ein paar wenige Schritte.
Um dir das Leben zu erleichtern, habe ich diese hier als Checkliste übersichtlich für dich zusammengefasst und um meine aus der Praxis bewährten Bildmaße sowie Dateigrößen als Richtwert ergänzt. Dazu bekommst du oben drauf noch eine kleine Mailserie mit Tipps und meinen 14-tägig erscheinenden „Technik-Boten“.
Sie kostet dich übrigens lediglich ein Lächeln, ein paar Klicks und deine Mailadresse.
Deine
