So optimierst du deine Fotos BEVOR du sie auf deine Website lädst

Du bist dir unsicher, wie du deine Fotos bearbeiten solltest, bevor du sie auf deine Website hochlädst? Welche Grösse sollten sie haben? Wie sollen sie benannt sein? Und ist das Ganze die Mühe wert?

Gute Fragen – und gar nicht so unwichtig für deine Website. Ich zeig dir, wie du das Ganze in 5 Schritten strukturiert und einfach erledigst.

Wieso du deine Fotos optimieren solltest

Ladezeit deiner Website

Für Ladeschwierigkeiten deiner Website sind oft zu große Fotos oder Videos verantwortlich. Und klar ist auch – wenn deine Kunden online auf deine Bilder “warten” müssen, sind sie ganz schnell wieder weg. Und die Schnelligkeit deiner Seite ist ein wichtiger Faktor für dein Google Ranking. Schnelle Website = gutes Surferlebnis = empfiehlt Google gern weiter.

Dein Google Ranking nach Suchwörtern

Dein Google Ranking ist im Prinzip Google’s Einschätzung, wie passend und qualitativ hochwertig deine angezeigte Unterseite die eingetippte Suchanfrage beantwortet. Je besser deine Website diese Suchanfrage beantwortet – desto höher ist dein Ranking. Und Google möchte nicht nur, dass du Texte präsentierst – sondern mit Bildern, Auflistungen und z.B. Videoinhalte. Google erkennt den Inhalt der Fotos durch deinen Titel und sogenannte Alt-Texte oder Beschreibungen der Bilder. Wenn du also den Klassiker “IMG_123545.jpg” verwendest, verschwendest du wertvolles SEO Potential.

Das ganze muss nicht kompliziert sein. Wenn du Pilateslehrerin bist, dann macht das einen Unterschied ob dein Foto mit dir in einer Pilatesübung “sarakern_IMG12345.jpg” heißt oder aber “Pilates-fuer-Schwangere-in-Zurich.jpg”.

Zeit sparen und mehrere Bilder gleichzeitig optimieren

Und noch eine wichtig Sache: Dein zukünftiges Ich wird es dir danken, wenn du deine Bilder von Anfang an richtig für deine Website vorbereitest. Denn die Schritte bleiben die Gleichen – ob du das für alle gleichzeitig oder für jedes Foto einzeln machst. Aber das ganze im Nachhinein zu säubern und nachzuholen braucht so viel mehr Zeit und Mühe – und fällt dann eben doch hinten über.

5 einfache Schritte wie du deine Fotos für deine Website vorbereitest

Was du brauchst

Eine Keyword-Liste. Du solltest wissen, für welche Suchwörter du bei Google gefunden werden möchtest. Und dann macht es Sinn einzuteilen, welche Keywörter du mit welcher Unterseite verfolgst. Und vergiss’ nicht: Die Keywörter sind Suchwörter. Stell dir immer vor, was Kunden eingeben könnten, um dich zu finden. Das bedeutet auch, dein Firmenname ist kein gutes Keyword (wenn du unbekannt bist). Wenn jemand nach dir sucht, bist du ja sowieso schon die Beste Lösung die Google anzeigen kann. Das passiert also automatisch. Bessere Suchwörter sind, was du machst (z.B. “Pilateskurse für Schwangere”) und wo du das örtlich anbietest (in “Zürich Altstetten”)

Schritt 01: Fotos in Unterordner organisieren

Sammle alle Fotos, die auf einer bestimmten Seite einsetzen willst und speichere sie in einem Unterordner.

Also Home, About me, Leistungen, Portfolio Projekt Nummer 1, Nummer 2 und so weiter.

Warum Unterordner? Weil du pro Unterseite deiner Webseite unterschiedliche Keywörter verfolgst (oder verfolgen solltest 😉 ). Und so hast du es später ganz einfach, alle Fotos für eine Unterseite deiner Website mit deinen 2-3 wenigen Keywords zu benennen.

Und was, wenn du ein Bild auf mehreren Seiten einsetzen möchtest? Dann erstelle Duplikate!

Schritt 02: Fotos umbennen (und zwar alle auf einmal!)

Mit deinem Mac kannst du direkt im Finder auf die Funktion “Umbenennen” zugreifen:

1. Öffne einen deiner Ordner
2. Markiere alle Fotos (Tastenkombination: “Command” + “A”)
3. Rechte Maustaste → “Umbenennen”
4. Wähle bei Format des Names: “Name mit Index” und Tippe untendrunter deinen neuen Bildtitel ein
5. Speichere das ganze mit “Umbenennen”

Du kannst natürlich detaillierter vorgehen und deinen Fotos auch unterschiedliche Namen geben. Dafür kannst du entweder neue Titel eintippen oder mit der Funktion “Text ersetzen” ganz bestimmte Wörter austauschen.

Und verwende bei deinen Bildtiteln keinen Unterstrich (“_”), sondern immer einen Bindestrich bzw. Minuszeichen (“-“).

Schritt 03: Fotogrösse verkleinern

Bevor du deine Bilder auf deine Website hochlädst, solltest du sie verkleinern. Das reduziert die Länge der Ladezeit und sorgt damit für eine bessere Erfahrung für die Nutzer. Für deine Website brauchst du eigentlich nur zwei unterschiedliche Grössen:

• Grosse Version: Für Hero und vollflächige Bilder. Lange Kante 3500 Pixel.
• Kleine Version: Für Bilder, die nur Teile des Bildschirms füllen, deine mobile Website und Blogfotos. Lange Kante 1500 Pixel

Wenn du Bilder grössflächig einsetzt, und nur etwa 3-6 Fotos pro Seite nutzt, reicht es, nur eine grosse Variante zu nutzen. Wenn du allerdings mehr Fotos nutzt, Fotos übereinander legst, Collagen machst oder auch viele Gallerien schaffst, dann lohnt es sich, auch eine kleine Variante zu schaffen. Bei Showit Speziell, kannst du Foto für deine Mobile Website separat auswählen, und da zeigt sich dann natürlich ein grosser Unterschied bei der Ladezeit. Am Ende gibt es keine EINE Lösung für alle. Probiere aus, teste das Ganze und / oder sprech’ dich mit deiner Webdesignerin ab.

So änderst du die Fotogrösse auf deinem Mac mit dem Programm “Vorschau”:

1. Markiere alle Fotos (Tastenkombination: “Command” + “A”)
2. Rechte Maustaste → “Öffnen mit Vorschau”
3. Nun öffnet sich das Vorschau Programm mit all den Fotos. Markiere wieder alle (Tastenkombination: “Command” + “A”)
4. Werkzeuge → Größenkorrektur
5. Danach kannst du deine Pixelvorgabe einstellen und das ganze mit OK ausführen.
6. NICHT VERGESSEN: alles abspeichern. “Ablage” → “Sichern” (oder drücke Tastenkombination: “Command” + “S”) Gib’ der Sache dann einen Moment, bis alles abgeschlossen ist.

Schritt 04: Dateigrösse komprimieren

Fast geschafft! Jetzt komprimieren wir die Bilderdateien. Es gibt viele Bildoptimierungs-Tools, die dir helfen können, die Größe deiner Bilder drastisch zu reduzieren, ohne dass sie an Qualität verlieren. Folgende zwei Tools nutze ich persönlich.

1. Für den Webbrowser: TinyPNG.com

Ich nutze meistens folgende Website und lade dort die grossen Dateien hoch – und komprimiert wieder herunter. Für diese Website gibts eine Grenze von 20 Fotos zur gleichen Zeit, und die Bilderdateien dürfen nicht mehr als 5GB haben. Funktioniert dafür problemlos, einfach und schnell.

2. Open Source Anwendung zum Herunterladen: ImageOptim

Für Mac ist auch folgendes Programm richtig cool. Funktioniert sogar einfacher, weil du die Fotos einfach nur in das Fenster ziehst und sie dann automatisch aktualisiert werden. Du musst die Fotos also nicht erst wieder herunterladen und dann in deinem Ordner austauschen. Ausserdem gibts keine Begrenzung wieviel Fotos du zur gleichen Zeit bearbeiten kannst. Allerdings bekomm ich meine Bilder nie ganz so klein, wie mit Tinypng.

Dafür muss das ganze als Programm runtergeladen werden. Informier dich also unbedingt nochmal, ob das ganze “Sicher” und “Vertrauenswürdig” ist bevor du er herunterlädst. Aktuell funktioniert das ganze super und problemlos (Juni 2023).

Schritt 05: Bilder auf deine Website laden

Es kann losgehen.

Die perfekte Ordnerstruktur hast du ja bereits – und so kannst du die Bilder auf deine Website hochladen.

Ich nenne meine Ordner immer nach der Zielseite (z.B. Home), und schreibe zusätzlich die Bildgrösse dazu (z.B. 1500px).

SEO & Bildfeatures in Showit

Bei Showit gibt es ein besonderes Bild-Verarbeitungsfeature. Damit werden Bilder dynamisch angepasst, je nachdem wie gross sie dargestellt werden. Und damit sparen sie Datenmengen die geladen werden müssen. Das rührt aus den Anfängen von Showit, also sie hauptsächlich für Fotografen gedacht waren.

Daneben hast du zusätzlich die Option, Bildtitel und Alt-Texte (Bildbeschreibungen) manuell einzugeben, wenn du ein Foto einsetzt. Wenn du die Bilder vorher benannt hast, wird der Bildname automatisch genutzt. Wenn du das ganze hinterher aber verändern oder verfeinern willst, kannst du das innerhalb der Plattform für jedes Bild einzeln anpassen.

So – das wär’s mit meiner Schritt für Schritt Anleitung für optimierte Website Fotos. Schreibe mir gerne, wenn du Fragen hast oder Unterstützung benötigst!