Basic-Tipps

Wie du deine Fotos fürs Web verkleinerst

Die neuesten Smartphones machen wirklich tolle Bilder.

Der einzige Wermutstropfen: Sie sind riesengroß. Viel zu groß für den Einsatz auf deiner Webseite.
Wir wollen schließlich, dass deine Webseite schlank bleibt und schnell lädt.

Es gibt viele Programme im weiten Web – vor allem viele unbrauchbare.

Mein langjähriger Favorit ist: fotor.com

Fotor gibt’s auf Deutsch, für PC und Smartphone und es ist übersichtlich zu bedienen.

Ich zeige dir in diesem Artikel eine einfache Bildbearbeitung auf einem Windows-PC mit fotor.com.

Exkurs: Bildeigenschaften

Weißt du, dass die Größe eines Fotos mit mehreren Parametern angegeben werden kann?

Wenn dir die Begriffe „Abmessung in Pixel“, „Dateigröße“ und „Dateiformat“ geläufig sind, lies weiter.

Falls du damit nicht vertraut bist, lies bitte zuerst meinen Blogartikel

„Bildbearbeitung & Bildgrößen“

Schritt 1: Bild auswählen

Ich wähle im Windows Explorer ein Fotos aus und sehe, dass:

es ein Bild vom Dateityp jpg ist
die Datei 3,9 MB groß ist
die Abmessungen 5184 x 3456 Pixel betragen

Meine persönlichen Zielgrößen für Fotos liegen bei maximal 400kb und 1500 Pixel an der langen Kante.
Für ein seitenfüllendes Bild (z.B. im Header) verwende ich 2560 Pixel an der langen Kante.

Auf diese Werte werden wir nun unser Foto mit dem Online-Tool fotor.com verkleinern.

Schritt 2: fotor.com

Öffne im Webbrowser deines Vertrauens (z.B. Google Chrome) die Webseite von fotor.com

Erstelle am besten auch gleich einen kostenlosen Benutzer. Du brauchst diesen, um dein verkleinertes Foto nach der Bearbeitung auf deinen Computer herunterzuladen.

Klicke anschließend auf „Edit image now“ oder geh direkt zum PhotoEditor.

Lade nun das gewünschte Bild in fotor.com hoch.

Schritt 3: konkrete Einstellungen

Wir ändern nun zuerst die Bildabmessungen in Pixel in fotor.com

Wähle dazu im linken Menü den Punkt „Größe ändern“.
Klicke auf das Schloss-Symbol. Es sollte geschlossen sein, um das Seitenverhältnis beizubehalten.
Ändere die lange Kante (also den größeren Wert) auf die Zahl 1500 (oder 2560 für seitenfüllende Bilder)
Klicke auf Anwenden.

Schritt 4: Bild herunterladen

Die Dateigröße ändern wir nun im letzten Schritt während des Downloads.

Klicke rechts oben auf „Lade es herunter“.
Im erscheinenden Pop-up-Fenster kannst du den Dateinamen ändern (wenn du willst).
Wähle im Bereich „Qualität“ die kundenspezifische Qualität und bewege den Regler leicht nach links bis ungefähr 90%.
Du kannst überprüfen, wie groß deine Datei nun ist. Ist sie unter 400kb? Perfekt.
Sollte dein Ausgangsbild sehr groß sein, dann kann es nötig sein, den Regler noch weiter nach links zu verschieben.
Aber keine Sorge: Bis zu 50% Qualität wirst du keine nennenswerten Einbußen feststellen (für normale Deko-Bilder).

fotor.com kann noch viel mehr…

Du hast sicher gesehen, dass du auf fotor.com noch viel mehr mit deinen Bildern machen kannst.
De facto spart dir fotor.com eine komplette Bildbearbeitungssoftware.

Wenn du Lust hast, probier die vielen Möglichkeiten aus und bearbeite neben der Größe auch den Look deines Bildes.

Viel Erfolg!

Praxis-Tipps:

Bearbeite alle benötigten Fotos auf einmal. Dann musst du dich nicht jedes Mal gedanklich neu orientieren und läufst nicht Gefahr, trotzdem ein zu großes Foto hochzuladen.
Achte auf sprechende Dateinamen. Das erleichtert dir selbst die Orientierung und es ist auch für Google / Stichwort: SEO optimal.
Verwende bevorzugt das Dateiformat jpg für Fotos. Die Bilder können so besser verkleinert werden.
Überprüfe eventuell in der WordPress-Mediathek nochmal die Abmessungen und Dateigrößen. Setze hier auch einen Eintrag für den Alternativtext. Das ist wichtig für Screenreader / Stichwort: Barrierefreiheit.