Darf ich dich fragen, was du mit deinen Bildern machst, die du auf deiner Website verwendest? Optimierst du die Bilder vor und nach dem Upload für das bestmögliche Ergebnis?
Viele Menschen laden ihre Bilder so wie sie sind auf ihre Website. Der Dateiname wird nicht angepasst und die Größe bleibt einfach so wie sie ist. Fühlst du dich ertappt? Dann solltest du auf jeden Fall weiterlesen. Denn du verschwendest ein großes Potential. Du könntest deutlich mehr organischen Traffic auf deine Seite bekommen, wenn du nur etwas mehr Zeit in die Optimierung deiner Bilder steckst.
Warum Weboptimierung von Bildern wichtig ist
Es gibt zwei Hauptgründe, warum eine Weboptimierung von Bildern so wichtig sind und ein paar „kleinere“ Gründe, auf die ich aber gar nicht eingehen möchte. Denn die Hauptgründe sind schon Grund genug, warum du sofort anfangen solltest, deine Bilder zu optimieren.
Grund 1: Seitengeschwindigkeit
Wenn deine Bilder riesengroß sind, dann dauert es natürlich auch länger, um deine Website vollständig zu laden. Es gibt Bilder, die sind mehrere MB groß, ein optimiertes Bild befindet sich im KB-Bereich und das nicht im oberen Bereich, sondern möglichst deutlich unter 500 KB. Das ist ein himmelweiter Unterschied.
Stell dir jetzt mal vor, du hast 100 oder mehr Bilder auf deiner Seite. Das hat unglaubliche Auswirkungen auf deinen Pagespeed. Aber warum ist die Geschwindigkeit deiner Seite so wichtig? Zum einen gibt es viele Menschen, die eine Seite ganz schnell wieder verlassen, wenn sie nicht schnell genug lädt – beobachte dich da am besten mal selbst. Und zum anderen beeinflusst die Geschwindigkeit deiner Seite dein Suchmaschinen-Ranking. Google bestraft langsame Seite und belohnt leichte und schnelle Seiten.
Grund 2: Suchmaschinenoptimierung
Nicht nur die Größe und somit die Geschwindigkeit deiner Seite beeinflussen dein Ranking bei Google und anderen Suchmaschinen. Auch die Optimierung des Titels deines Bildes kann dein Ranking verbessern. Was denkst du mit welchem Titel Google besser arbeiten kann: „DSC_0001“ oder „WeboptimierungBilder“? Ich denke, die Frage kannst du dir selbst beantworten. Auf was du hierbei achten musst, erkläre ich dir unten in der Schritt für Schritt Anleitung.
Schritt-für-Schritt: So optimierst du deine Bilder für deine Website
1. Bildgröße anpassen
Wie eingangs bereits erwähnt, ist die Größe deiner Bilder entscheidend für die Schnelligkeit deiner Seite. Fotos, die du selbst gemacht hast, sind oftmals 4000 Pixel groß. Auch Bilder von Stockfoto-Anbietern laden wir häufig in zu großen Größen herunter. Das ist alles gar nicht notwendig, denn niemand wird deine Website in so einer Größe ansehen.
Bevor du die Größe festlegst, überlege dir zunächst, wofür du das Bild verwendest. Ein Full-Width Bild (also ein Bild, das die volle Breite deines Bildschirms einnimmt), wie das auf meiner Startseite, muss natürlich größer sein, als ein Bild in deinem Blog oder das vielleicht nur klein auf einem Drittel deiner Seite angezeigt wird.
Ein guter Anhaltspunkt sind hierbei die Einstellungen von WordPress. Gehe auf Einstellungen – Medien. Hier siehst du die Größen von Vorschaubildern, mittelgroßen- und großen Bildern. Diese Dimensionen kannst du als Anhaltspunkte nehmen, es gibt aber noch eine andere Möglichkeit, die ich persönlich besser finde.
Nun hältst du deine Maus über dein gewünschtes Bild und du siehst, die Bildgröße. Du kannst auch auf das Bild klicken und rechts mit der Maus über die URL gehen (s. 2. Screenshot). In meinem Fall siehst du also 792×526 px. Bei Bildern für meinen Blog, muss und sollte ich somit niemals die 800 px Breite überschreiten.
Anpassen kannst du diese Bildgrößen mit jedem einfachen Bildbearbeitungsprogramm wie Photoshop, Gimp, aber auch der Bildvorschau für den Mac (s. Screenshot unter der Überschrift Reduzierung der Auflösung).
2. Reduzierung der Auflösung
Im nächsten Schritt reduzieren wir die Auflösung deiner Bilder. Für ein Bild auf einer Website sind 72 oder 96 ppi (= Pixel per inch) vollkommen ausreichend. Einstellen kannst du das mit einem Fotobearbeitungsprogramm wie Photoshop oder aber, wenn du mit dem Mac arbeitest ganz einfach in der Bildvorschau.
Klicke auf Werkzeuge Größenkorrektur und es öffnet sich das Fenster in dem du die Auflösung festlegen kannst. Im unteren Bereich siehst du sogar direkt, in welchem Maße du die Speichergröße deines Bildes im Vergleich zum Original reduzieren konntest.
3. Reduzierung der Bildqualität
Die Reduzierung der Bildqualität erkläre ich dir am Beispiel von Photoshop, aber auch mit kostenlose Software wie z.B. mit Photoscape X kannst du die Bildqualität deiner Bilder in Prozent reduzieren.
In Photoshop öffnest du hierzu das Bild und öffnest Datei – Exportieren – Für Web speichern. Nun öffnet sich ein Fenster, in dem du alle wichtigen Komponenten siehst, die Einfluss auf die Speichergröße deines Bildes haben – wie z.B. das Bildformat und die Größe in Pixel auf der rechten Seite. Unten links unter dem Bild siehst du die Speichergröße deines Bildes unter den aktuellen Einstellungen.
Um die prozentuale Qualität des Bildes zu verringern, änderst du die Prozentzahl des Feldes Qualität (unter dem Formatfeld rechts oben). Welche Prozentzahl die Richtige ist, hängt auch hier von der Verwendung ab. Du kannst am besten ein bisschen mit der Prozentzahl spielen und ausprobieren. In der Vorschau siehst du immer das Bild in der entsprechenden Einstellung. Und unten drunter die dazugehörige Dateigröße. Je nach Verwendungszweck des Bilds kannst du z.B. eine Qualität von 60-80% festlegen.
Schau dir mal mein Beispielbild an und die Veränderung der Dateigröße. Im ersten Screenshot habe ich die Qualität auf 100% gelassen. Das Bild hat eine Größe von 465,8 KB. Im Anschluss habe ich die Qualität auf 60% heruntergesetzt (Screenshot 2). Die Bildgröße reduzierte sich auf 132,2 KB. In der Vorschau ist auch klar der Verlust der Qualität zu sehen, aber für ein normales Bild auf der Website ist es noch nutzbar und es soll in dem Fall auch nur als Beispiel dienen, damit du siehst, wie extrem diese Einstellungen die Größe deines Bildes beeinflussen.
4. Dateiname anpassen
Das ein spezifischer Titel wichtig für dein Bild ist, habe ich schon in der Einleitung erwähnt. Wenn du deine Bilder nicht benennst, weiß Google nicht, was es damit machen soll und um was es in dem Bild geht. Wenn du den Bildern spezifische Namen gibst, kannst du dann auch über die Google Bildersuche gefunden werden, so dass du dank deiner Bilder mehr organischen Traffic auf deine Website erhältst.
Benutze also passende Keywords in den Dateinamen deiner Bilder, so dass du die Chance bekommst auch über Google Bilder gefunden zu werden. Verwende möglichst keine Sonderzeichen und Leerzeichen und definitiv keine Umlaute in deinem Dateinamen. Wenn du die Dateinamen angepasst hast, kannst du nun deine Bilder hochladen.
5. Alternativer Text & Beschreibungen
Nein, du bist immer noch nicht fertig mit der Optimierung. Beim Upload deiner Bilder sind dir bestimmt schon die Felder „Beschriftung“, „alternativer Text“ und „Beschreibung“ aufgefallen.
Die Beschriftung ist die Caption des Bildes, was also direkt im Artikel unter dem Bild angezeigt wird. Alternativer Text und Beschreibung werden nicht direkt angezeigt, können aber für Google eine große Rolle spielen. Besonders wichtig ist der alternative Text, denn damit arbeitet Google besonders. Wenn Bilder auf deiner Seite nicht geladen werden, wird dieser alternative Text angezeigt. Wenn deine Website von einem Screenreader vorgelesen wird, liest dieser die alternativen Texte vor, wenn ein Bild auftaucht. Nutze also das volle Potential dieseralternativen Texte.
6. Plugins zur Bildkomprimierung
Im letzten Schritt, empfehle ich dir die Nutzung von Plugins, die deine Bilder für deine Website noch weiter optimieren. Es gibt zahlreiche Plugins, die dir dabei helfen. Probier am besten mehrere aus und schau mit welchem du am Besten zurecht kommst. Ich persönlich habe mit den folgenden bereits gearbeitet und kann sie empfehlen:
Und das ist auch schon alles. Dein Bild ist nun perfekt in Größe und Benennung für Suchmaschinen und deinen Pagespeed optimiert. Wenn du weitere Fragen zur Optimierung deiner Bilder hast, kannst du mich gerne jederzeit kontaktieren. Ich freue mich auch über Input und Feedback, wenn du die Optimierung deiner Bilder anders umsetzt.