Bilder sind auf jeder Website wichtig. Du baust mit Fotos Emotionen auf und kannst, richtig eingesetzt, Qualität zeigen und somit Vertrauen in deine Webseite aufbauen. Das ist besonders wichtig, wenn du versuchst Neukunden zu gewinnen. In diesem Artikel erfährst du, wie du deine Bilder so optimierst, dass sie auf allen Geräten gut aussehen, ohne gleich deine Performance zu killen.
Warum du überhaupt Bilder für deine Webseite optimieren sollst?
Im Web geht es immer um Geschwindigkeit. Wie schnell ist man genervt, wenn eine Webseite im Schneckentempo öffnet. Dauert es zu lange, klickt man weiter, denn der User ist kein geduldiges Wesen. Als Webseitenbetreiber will man vermeiden, dass der User die eigene Website zu früh verlässt. Deshalb sorgen wir dafür, dass jede Website eine gute Performance hat. Viele kleine Stellhebel machen es möglich, dass eine Website schnell lädt. Einer davon sind optimierte Bilder. Im Endeffekt ist es wichtig, für den User ein positives Erlebnis auf deiner Website zu erzeugen und das ist nunmal eine gute Ladezeit. Das berücksichtigen Suchmaschinen bei ihrer Bewertung von Webseiten. und das bedeutet auch, dass du eine gute Performance brauchst, wenn du ein gutes Ranking möchtest.
Website Bilder und gute Ladezeiten im Web – ein Widerspruch?
Wenn du Fotomaterial für deine Webseite hast, ist das optimal. Denn Bilder sprechen den User emotional außerordentlich gut an. Der Nachteil ist, dass sie wesentlich mehr Datenvolumen als Text benötigen. Das ist jetzt aber kein Grund, um auf Fotos zu verzichten. Es gibt die Möglichkeit Bilder zuzuschneiden und zu komprimieren. Das ist State-of-the-Art im Web und somit ein üblicher Kompromiss zwischen Ladezeit und Design. Wir zeigen dir hier die einfachsten Methoden, um zu optimieren. Und das ausschließlich mit Online-Tools. Du musst also weder Software kaufen, noch installieren.
Website Bilder optimieren – der Ablauf:
- Das Bild auf DPI 72 bringen
- Den Bildbereich auswählen
- Die Dimension des Bildes festlegen
- Die Datei komprimieren
- Die Bilddaten hinterlegen
1. Reduktion der DPI
Zuerst mal eine Erklärung, damit jeder versteht, was dieser Schritt bedeutet. Jedes Bild besteht aus Bildpunkten, die nennt man DPI (dots per inch). Diese geben an, wieviel Bildpunkte auf einem Inch enthalten sind. Je mehr DPI ein Bild enthält, umso höher ist ist die Qualität und umso speicherintensiver ist es. Wenn du Stock-Images kaufst, haben diese meist 300 DPI. Für das Web werden 72 DPI empfohlen.
Du kannst ganz einfach die DPI von deinem Bild reduzieren. Klicke auf den DPI Converter und stelle auf 72 DPI ein. Dann lade dein Bild hoch. Als nächstes kannst du dein konvertiertes Bild downloaden.
Was ist eigentlich, wenn mein Bild zu wenig DPI hat? Du kannst online bei dem DPI Converter dein Bild auf mehr DPI zu ändern.
2. Den Bildbereich ausschneiden
Dann nimmst du deine reduzierte Datei und schneidest dir den gewünschten Ausschnitt zu. Auf ILoveImage kannst du ganz einfach und schnell dein Foto zuschneiden. Wir suchen uns hier die Dame aus, die wir zuschneiden. Da wir ein quadratisches Bild benötigen, achten wir darauf, dass Höhe und Breite den gleichen Wert aufweisen.
Danach schneidest du das Bild zu und speicherst es auf deinem Computer.
3. Dimension des Bildes wählen
Du hast nun den richtigen Bildausschnitt. Jetzt benötigst du noch die richtige Bildgröße. Normalerweise hat jedes Bild, das auf einer Website verwendet wird, eine vorgegebene Bildgröße. Frage hier deinen Webdesigner, falls du keine Angaben dazu bekommen hast. Ein perfektes Tool für das Festlegen der richtigen Bildgröße findest du wieder auf ILoveImage. Wir verkleinern das Bild nun auf 600px mal 600px.
4. Komprimierung des Bildes
Unser Bild hat nun 44KB. Das ist schon recht gut, zur Sicherheit schicken wir es noch durch eine Komprimierung. Wir können somit noch ein wenig einsparen und es auf 41 KB reduzieren (7% weniger). Bei der Komprimierung kannst du online Tools verwenden oder auch ein Plugin für WordPress verwenden. Hier zwei Empfehlungen:
- das Online-Tool Compress Image oder
- das WordPress Plugin Imagify
Wenn du regelmäßig auf der Website Bilder änderst, dann ist das Plugin Imagify die bessere Wahl, da du direkt in in deinem Admin Bereich von WordPress die Komprimierung vornehmen kannst, oder auch automatische Optimierung in den Einstellungen hinterlegen kannst. Das ist natürlich komfortabler.
4. Meta Daten bei den Bildern hinterlegen
Bei jedem Bild das du in WordPress hochlädst, kannst du auch Daten hinterlegen. Du solltest dir die Mühe machen und dies auch tun. Denn Suchmaschinen mögen diese Daten, aber auch für User sind diese natürlich von Nutzen.
Alt-Text: Der Alt-Text beschreibt das Bild. Wenn dein Bild auf der Website einmal nicht angezeigt werden kann, dann erscheint statt dessen der Alt-Text. Er sollte also nicht an den Haaren herbeigezogen sein. Wenn du dennoch Keywords unterbringen kannst, ist das zum Vorteil deiner Seite.
Titel: Der Titel wird verwendet, um dem Bild einen Namen zu geben. Wenn du über einem Image auf einer Website stehen bleibst, erscheint ein Text, das ist der Titel Text.
Beschriftung: Die Beschriftung ist der Untertitel des Bildes. Manchmal wird dieser auch angezeigt, das hängt ganz von deinem Theme ab. Meist kommt dies in Bildergalerien vor.
Online-Tools sind nicht so deines?
Wenn du häufig für das Web Inhalte produzierst und für deine Website Bilder optimieren musst, dann ist Affinity Photo eine Überlegung wert. Es ist eine kostengünstige Alternative zu Adobe Photoshop. Affinity Photo ist für die Optimierung von Bilder für das Web perfekt geeignet. Falls du gar kein Geld ausgeben möchtest, dann kommt das kostenlose Grafikprogramm Gimp in Frage.
