So optimierst du deine Fotos richtig!
Bilder, Grafiken und Fotos beleben deine Website, visualisieren deine Aussage und bekräftigen deine Worte. Ohne Fotos wäre deine Website leer und eintönig, die Verweildauer würde massiv sinken.
- Wie geht es weiter, wenn du die Bilder gefunden hast, die zu dir passen
- Oder wenn du deine eigenen Fotos von deinem Fotografen erhalten hast
- Wie ladest du diese am besten auf deine Website, damit die Ladezeit nicht verlangsamt wird
- Wie du SEO technisch das Maximale von jedem einzelnen Bild rausholst
Hier kommen meine Antworten, die deine Bildoptimierung für deine (WordPress) Website mit Sicherheit erleichtern werden.
# 1
Welche Bildformate empfehle ich?
Grundsätzlich solltest du die zwei gängigsten Bildformate für deine Website verwenden: JPEG und PNG. Mit diesen zwei Dateiformaten kannst du fast alles abdecken.
Fotos sind am besten als JPEG abgespeichert und hochgeladen. JPEGs verfügen über eine geringere Dateigröße, das die Ladezeit deiner Website begünstigt, können aber leicht pixelig werden, wenn sie zu sehr verkleinert werden.
Grafiken speicherst du am besten als PNG ab, sowie Bilder ohne Hintergrund müssen auch PNG sein, denn bei JPEG hast du immer einen Hintergrund. PNGs sind viel Pixel dichter, also scharfer, dafür aber auch viel größer, das deine Ladezeit senken kann.
Logos empfehle ich für deine Website auch als PNG hochzuladen, ohne Hintergrund für die beste Verwendung.
# 2
Welche Dateigröße ist am vorteilhaftesten?
Hier musst du aufpassen nicht zu kleine oder zu große Bilder zu verwenden. Damit deine Website schnell genug ladet, solltest du alle deiner Bilder und Fotos unter 1 MB haben.
Es kann einige wenige Ausnahmen für größere Dateien geben, wenn du z.B. eine große Grafik anzeigen möchtest, die sehr detailliert ist und eine Verkleinerung ein sehr pixeliges Aussehen verleihen würde.
Bereits kleine Bildformate – unter 100 KB würde ich nicht mehr verkleinern.
# 3
Wie komprimierst du deine Bilder am besten?
Am einfachsten und schnellsten geht die Bildverkleinerung über die Website Tinypng. Hier ziehst du deine Bilder einfach mit Drag and Drop in das Fenster in der Mitte der Website, deine Bilder werden innerhalb von Sekunden verkleinert und du kannst sie wieder runterladen.
Hier musst du aber aufpassen, dass die Bildergröße maximal 5 MB sein darf und durch die Komprimierung die Farbentreue eventuell nicht mehr gegeben sein wird. Das ist wichtig, wenn du z.B. Produktbilder für dein Webshop erstellst, wo du überall die gleiche Hintergrundfarbe einfügst, du aber nur manche Bilder mit Tinypng verkleinerst und manche nicht. Beim Aufladen auf deine Website wird der Unterschied deutlich zu sehen sein.
Bei Fotos von dir kann es vorkommen, dass deine Haut durch die Verkleinerung des Bildes blasser erscheint und die Farbe deines Lippenstifts auf einen „nude“ Ton wechselt.
Insgesamt ist diese Website aber wirklich zu empfehlen, denn sie funktioniert ohne Vorkenntnisse, schnell, einfach und kostenlos.
Hole das meiste aus deiner Website!
In meinem 0€ Leitfaden zeige ich dir, wie du:
- deine Website strategisch aufbaust
- deine Expertise und Professionalität zeigst
- deine Websitebesucher als zahlende Kunden gewinnst
- Jetzt herunterladen
# 4
Wie verkleinerst du deine Fotos / Grafiken, wenn sie über 5 MB haben?
Du kannst klassisch in Photoshop deine Dateien verkleinern, wenn du ein Adobe Abo hast oder mit Canva kannst du leicht die Dateigröße reduzieren. Du ladest das große, originale Foto in Canva hoch und als benutzerdefinierte Größe nimmst du die Maße deines Originalbildes. Du ziehst das Bild als Hintergrund ein und ladest das so erstellte Foto wieder runter.
Canva empfiehlt dir die Qualität bereits hier zu reduzieren, jedoch empfehle ich dir 100% als Qualität einzustellen und das so gewonnene Bild in Tinypng zu verkleinern. So erhältst du garantiert ein qualitativ hochwertiges Bild, das aber die kleinstmögliche Dateigröße hat.
# 5
Solltest du deine Bilder zuschneiden?
Hier gebe ich ein klares Ja. Du kannst die Maße deiner Fotos beliebig ändern, also die Länge und Breite neu bestimmen, einen neuen Ausschnitt wählen, von einem liegenden Foto ein Stehendes erstellen oder umgekehrt.
Am einfachsten nutzt du dafür Canva oder Befunky.
# 6
Wie findest du die perfekten Bildverhältnisse?
Wenn du ein ungefähres Layout deines Menüpunktes mit Texten hast, kannst du die Größe des Bildes einfach am Bildschirm mit einem Lineal Browser Extension ausmessen.
Hierfür nutze ich den Chrome Extension „Page Ruler“ mit dem du am Desktop den Platz für dein Foto einfach in Pixel ausmessen kannst.
Wenn du z.B. eine Größe von 400 x 600 Pixel gemessen hast, empfehle ich dir immer ca. die dreifache Größe des Bildes zu nehmen, also 1200 x 1800 Pixel, damit es nicht pixelig wird.
# 7
Was solltest du SEO technisch bei deinen Bilder beachten?
Speichere deine Bilder mit aussagekräftigen Keywords ab, damit der Dateiname bereits zeigt, worum es sich auf der jeweiligen Unterseite geht, wo du diese aufladest. Also benenne das Bild als „websitebilder_optimieren_in_wordpress.jpg“ und nicht als „bild0123.jpg“
In der Mediathek füge immer einen Alternativtext mit deinen relevanten Keywords hinzu, ohne Striche und Punkte (mache nicht einfach Copy und Paste der Dateiname), denn anhand diesen Text kann Google dein Bild richtig zuordnen und deine Website für relevante Keywords noch mehr vorne in den Google Suchergebnissen reihen.
# 8
Bilder optimieren mit PlugIn
Diese Option habe ich bewusst als Letzte gelassen, denn bereits aufgeladene Bilder mit einem PlugIn zu verkleinern ist nur für Websites zu empfehlen, die sehr viele große Bilddateien haben und diese nicht einzeln wieder verkleinert aufladen können.
Die Schwäche dieser PlugIns besteht darin, dass du kaum Einstellmöglichkeiten hast und der Prozess automatisch abläuft. Manche Bilder, die verkleinert werden könnten, werden nicht verkleinert und manche Bilder werden zu stark verkleinert, so dass das Ergebnis pixelig wird. Daher empfehle ich nach Möglichkeit die Bildoptimierung vor dem Hochladen manuell zu machen oder bestehende Dateien manuell zu ersetzen.
Zusammenfassung
Das klingt zwar viel auf einmal, aber wenn du deine Website oder deinen Webshop selbstständig betreust, wirst du diese Punkte nach ein wenig Übung automatisch, ohne darüber nachzudenken anwenden können.
Zusammengefasst solltest du vor allem die Dateigröße beachten und deine Bilder je nach Platzbeschaffenheit optimal zuschneiden. Vergiss nicht die Datei sinnesgemäß zu benennen und den Alternativtext mit Keywords zu versehen.
So werden deine Fotos und Grafiken für den Web optimiert und die Geschwindigkeit deiner Website leidet nicht unter der Größe der Bilder.
