Bilder sagen mehr als tausend Worte. Das Sprichwort kennt womöglich jeder und genauso ist es auch. Die Bilderwelt ist ein wesentlicher Bestandteil einer jeden Website, denn Bilder wirken schneller, wie jedes geschriebene Wort. Gerade aus diesem Grund sind sie von einer Website überhaupt nicht wegzudenken. Stell dir nur mal vor du gelangst auf einen Online Shop oder eine Website und siehst nur Text? Würde dich diese Seite ansprechen? Wohl kaum.
Doch es ist nicht nur essentiell, dass du Bilder auf deiner Website platzierst, sondern sie auch entsprechend skalierst und komprimierst, denn in der heutigen, digitalen Welt ist die Ladegeschwindigkeit ein entscheidender Faktor für den Erfolg deiner Website. Und da kommen wir auch schon zum springenden Punkt. Denn eine der Hauptursachen für langsame Ladezeiten sind in den meisten Fällen nicht optimierte Bilder.
Wir möchten dir deshalb in diesem Blogbeitrag eine Step by Step Anleitung mit auf den Weg geben wie du Bilder fürs Web optimieren kannst, damit sich nicht nur die Ladegeschwindigkeit deiner Website verbessert, sondern du damit auch das Nutzererlebnis positiv beeinflussen und verbessern kannst.
4 Gründe, warum du deine Bilder fürs Web optimieren solltest
Bevor wir dir eine genaue Anleitung für die Optimierung deiner Bilder für deine Website mit auf den Weg geben, möchten wir erstmal die vier wichtigsten Gründe nennen, warum es überhaupt so essentiell ist, dass du deine Bilder fürs Web optimierst. Zwei Gründe haben wir ja bereits am Rande angesprochen und das sind die Verbesserung der Ladegeschwindigkeit und natürlich auch die positiven Auswirkungen auf das Nutzererlebnis. Doch schauen wir uns alle vier Punkte mal kurz im Detail an:
Nicht optimierte Bilder können die Ladezeit einer Website erheblich verlangsamen. Langsame Ladezeiten führen zu einer schlechten Nutzererfahrung und können dazu führen, dass Besucher die Seite vorzeitig verlassen. Durch die Optimierung der Bilder wird die Ladezeit verkürzt und die Website reagiert schneller.
Schnelle Ladezeiten sind entscheidend für ein positives Nutzererlebnis auf deiner Website. Wenn Bilder schnell geladen werden, können deine Website-Besucher:innen ohne lange Wartezeiten und Unterbrechungen durch deine Website navigieren und finden schneller, wonach sie suchen.
Doch nicht nur deine Website Besucher:innen lieben eine schnelle Ladegeschwindigkeit, sondern auch Suchmaschinen wie Google legen viel Wert darauf, dass Bilder fürs Web optimiert werden. Da große Bilddaten zu längeren Ladzeiten führen, wirkt sich das wiederum schlecht auf dein Suchmaschinenranking aus, denn die Ladegeschwindigkeit deiner Website gehört zu einer der wichtigsten Rankingfaktoren von Google.
Bilder, die eigentlich nicht zwingend auf der Website benötigt werden oder auch riesige Datenmengen verursachen, verbrauchen nicht nur das Datenvolumen deines Besuchers, sondern haben auch Auswirkungen auf deinen ökologischen Fußabdruck im Internet.
Du kennst nun die Gründe warum du deine Bilder fürs Web optimieren solltest, dann schauen wir uns jetzt mal an, warum es auch überhaupt keinen Sinn macht ein hochauflösendes Bild auf deiner Website einzubinden. Dafür tauchen wir kurz ein in die Welt der Pixel.
Die Welt der Pixel
Was sind denn eigentlich diese Pixel? Das Wort Pixel kommt aus dem Englischen und ist die Abkürzung für "picture element", was übersetzt Bildpunkt bedeutet. Pixel sind also Bildpunkte, die in einem Rasterformat angeordnet werden. Jeder Pixel besteht aus den drei Grundfarben Rot, Grün und Blau (den sogenannten Subpixeln). Pixel bestimmen im Endeffekt die Schärfe eines Bildes. Was im Umkehrschluss so viel bedeutet, dass je höher die Pixelanzahl, desto schärfer das Bild.
Das bedeutet aber nicht, dass wir nur Bilder verwenden können, die eine enorm große Anzahl an Pixel haben. Denn es kommt immer darauf an, wo das Bild dargestellt werden soll und welche Auflösung das Endgerät hat. Die meisten Bildschirme besitzen die Auflösung 1920x1080 Pixel (die Angabe ist hier immer Breite mal Höhe). Hast du ein Bild von deiner Digitalkamera mit einer Auflösung von 6000x4000 Pixel (oder mehr), dann kann dein Bildschirm dieses Foto nicht schärfer als seine eigene Auflösung anzeigen. Deshalb macht es auch keinen Sinn, dass du dein Bild von deiner Kamera in dieser hohen Auflösung auf deiner Website einbindest, denn diese Auflösung kann im Endeffekt auf dem Bildschirm gar nicht dargestellt werden.
Geeignete Bildformate für deine Website
Bevor du deine Bilder fürs Web optimieren kannst, solltest du erstmal einen Blick auf die geeigneten Bildformate legen. Wir stellen dir hier die 3 gängigsten Bildformate für deine Website vor und wie du sie einsetzt:
JPEG (Joint Photographic Experts Group)
Das am häufigsten verwendete und bekannteste Bildformat ist JPEG. Dieses Format eignet sich besonders für sehr detailreiche Bilder mit vielen Farben. Dieses Format wirst du zu 90% auf deiner Website verwenden.
PNG (Portable Network Graphics)
Das Bildformat PNG wird überwiegend eingesetzt für Grafiken und Bilder mit einem transparenten Hintergrund. Bilder im PNG-Format lassen sich verlustfreier komprimieren, haben aber im Vergleich zu JPEG eine höhere Datenmenge und sollten deshalb nur bedingt eingesetzt werden.
GIF (Graphics Interchange Format)
GIF’s sind kurze Videoclips oder auch Bewegtbilder. Sie eignen sich besonders gut, um Dynamik und Lebendigkeit in deine Website zu bringen. Da GIF’s oftmals eine sehr hohe Datenmenge haben und sehr schwer verlustfrei komprimiert werden können, solltest du vom inflationären Einsatz auf deiner Website unbedingt absehen.
SVG (Scalable Vector Graphics)
Ein weiteres Bildformat, welches fast immer Einsatz auf einer Website findet ist das SVG-Format. Dieses Format ist nicht wie die anderen Bildformate Pixelbasiert sondern vektorbasiert. Sie können nahezu ohne Qualitätsverlust komprimiert werden und besitzen in den meisten Fällen eine sehr kleine Dateigröße.
Bilder fürs Web optimieren: Unsere 6 Schritte Anleitung
Mit unserer 6-Schritte Anleitung hast du den perfekten Fahrplan um deine Bilder fürs Web optimieren zu können und so deine Websiteladegeschwindigkeit deutlich zu verbessern. Mache auch gerne den Vorher-Nachher Test und überprüfe die Ladgeschwindigkeit deiner Website vor und nach der Optimierung. Das mitunter bekannteste Tool ist hierzu der Page Speed Insights Test von Google. Ein weiteres Tool, auf das ich erst kürzlich gestoßen bin, ist der Page Speed Test von Experte.de. Auch hier hast du die Möglichkeit die Ladegeschwindigkeit deiner Seiten zu überprüfen. Ein klarer Pluspunkt ist hier, dass du deine einzelnen Unterseiten nicht einzeln testen musst, sondern der Page Speed Test direkt alle URL's einer Website analysiert. Die Ergebnisse sind dabei übrigens identisch zu den Daten von Google. Probiere es gerne mal aus und überzeuge dich selbst.
Step 1: Sichere deine Originaldatei
Sichere dir immer deine Originaldatei bzw. bearbeite immer nur eine Kopie deines Originalbildes. So kannst du jederzeit auch wieder auf deine Originaldatei zurückgreifen.
Step 2: Dateinamen anpassen
Behalte nicht den automatisch generierten Namen wie AM312345.jpg bei. Gebe deinen Bildern sinnvolle Namen, indem du den Inhalt des Bildes beschreibst. Dies ist für Google und für dein späteres Suchen in der Medienbibliothek sehr hilfreich.
Step 3: Zuschnitt wählen
Nachdem du deine Bilder richtig umbenannt hast, kannst du jetzt den richtigen Zuschnitt wählen. Für die Bilder auf deiner Website solltest du darauf achten, dass du diese Bilder in einem einheitlichen Seitenverhältnis zuschneidest. Möchtest du beispielsweise ein Bild im Hochformat auf deiner Website im Querformat einbinden, dann solltest du vor dem Hochladen bereits den richtigen Zuschnitt wählen. Dies kannst du entweder über Bildbearbeitungsprogramme wie z.B. Photoshop / Lightroom oder auch über das Online Tool “iloveIMG” vornehmen.
Step 4: Bildmaße anpassen
Nachdem du den richtigen Zuschnitt gewählt hast, kannst du jetzt dein Bild skalieren. Je nach Einsatzort deines Bildes, brauchst du unterschiedliche Bildmaße. Willst du Bilder in der vollen Breite des Bildschirms anzeigen, so sollte deine maximale Bildbreite nicht höher als 1920 Pixel sein. Willst du das Bild nur in deinem Blogeintrag verwenden, der z.B. nur 1200 Pixel breit ist, so reicht auch eine maximale Bildbreite von 1200 Pixeln aus. Auch die Anpassung der Bildmaße kannst du mit dem kostenfreien Online Tool „iloveIMG“ ganz einfach vornehmen
Step 5: Upload deiner Medien in WordPress
Hast du deine Bilder skaliert und heruntergeladen kannst du jetzt in dein WordPress Backend gehen und diese in deiner Medienbibliothek hochladen. Gehe hierzu in WordPress auf den Navigationsreiter “Medien” und dann auf “Dateien auswählen”. Du kannst aber auch über Drag & Drop die Bilder hochladen.
Step 6: Komprimierung deiner Bilder
Im letzten Step geht es nur an die Komprimierung. Für die Komprimierung deiner Bilder empfehlen wir dir das kostenfreie Plugin „Shortpixel“**. Dies kannst du ganz unkompliziert in deinem WordPress Backend installieren und aktivieren. Mit dem Plugin hast du die Möglichkeit eine Sammelverarbeitung zu starten und alle deine hochgeladenen Bilder auf einmal zu komprimieren. Du hast pro Monat 100 Credits für die Bildkomprimierung zur Verfügung, die sich auch jeden Monat wieder neu aufladen. Möchtest du mehrere Bilder in deiner Medienbibliothek komprimieren und die Anzahl der Credits reicht nicht aus, dann kannst du dir auch einmalig Credits kaufen.
Alternativen zum Shortpixel Plugin
Du möchtest deine Bilder ohne Plugin komprimieren. Dann kannst du Shortpixel auch in der Browservariante verwenden. Hierzu musst du deine Bilder vor dem Upload in deiner Medienbibliothek hochladen und komprimieren. Neben Shortpixel gibt es auch noch Plattformen wie z.B.
Fazit
Es ist, wie du siehst, unfassbar essentiell, dass du deine Bilder fürs Web optimierst, denn nur so profitierst du von einer schnellen und benutzerfreundlichen Website, die dir nicht nur ein besseres Ranking in den Suchmaschinen verspricht, sondern dir auch glückliche Besucher:innen und mehr potentielle Kunden beschert. Investiere deshalb Zeit in die Optimierung deiner Bilder, denn deine Website ist das digitale Zuhause deines Business und sollte einladend, schnell und benutzerfreundlich sein.
Hast du noch Fragen? Dann stelle sie uns gerne in den Kommentaren oder schreibe uns eine Nachricht.
