Fotografie

Bilder für Web-Galerien optimieren

Von RAW zu Web-ready

Serienverarbeitung mit Photoshop, XnConvert und anderen Tools: saubere Dateinamen, optimale Qualität und Performance.

1. Zielwerte für schnelle Galerien

↑ Zur Kapitelübersicht

Große Originalfotos (69 MB) machen Webseiten träge. Diese Zielgrößen liefern optimale Qualität bei minimaler Dateigröße, die Seite lädt bis zu 15× schneller.

Bildtyp Auflösung Qualität Dateigröße Einsatz
Full-Size 1920 × 1280 px 5/7 250–300 KB Lightbox
(bei Klick)
Thumbnail 600 × 400 px 4/7 80–120 KB Galerie
-Übersicht

Ergebnis: Seiten laden in 2 Sekunden statt 30 Sekunden.

2. Photoshop: Schritt-für-Schritt

↑ Zur Kapitelübersicht

Ziel: Originalfotos in zwei Auflösungen mit optimalen Export‑Einstellungen für Web und Galerie‑Vorschau speichern.

Full-Size (1920 px)

Für Bildschirmanzeige und Print-Vorbereitung

  1. Original öffnen
    Datei → Öffnen (RAW oder JPG)
  2. Größe einstellen
    Bild → Bildgröße
    • Breite: 1920 px
    • Seitenverhältnis: ☑ verkettet
    • Resampling: Bicubic Sharper (für Verkleinerung)
  3. Exportieren
    Datei → Exportieren als…
    • Format: JPEG
    • Qualität: 5 von 7
    • Optionen: ☑ Optimiert + ☑ Progressiv
  4. Speichern
    Dateiname: motiv_01.jpg
    Zielgröße: 250–300 KB

Thumbnail (600 px)

Für Galerie-Vorschaubilder und mobile Ansicht

  1. Original erneut öffnen
    Datei → Öffnen (frische Kopie ohne Bearbeitungen)
  2. Größe einstellen
    Bild → Bildgröße
    • Breite: 600 px
    • Seitenverhältnis: ☑ verkettet
    • Resampling: Bicubic Sharper
  3. Exportieren
    Datei → Exportieren als…
    • Format: JPEG
    • Qualität: 4 von 7
    • Optionen: ☑ Optimiert + ☑ Progressiv
  4. Speichern
    Dateiname: motiv_01_thumb.jpg
    Zielgröße: 80–120 KB

Häufige Fehler

  • Seitenverhältnis vergessen: Bilder wirken gestaucht. Aktiviere Seitenverhältnis (das Kettensymbol-Icon neben Breite und Höhe muss verkettet sein).
  • Zu hohe Qualität beim Thumbnail: Unnötig große Dateigröße. Qualität 4 reicht völlig.
  • Progressiv nicht aktiviert: Bilder laden langsamer auf mobilen Geräten.
  • Original nicht mehrfach bearbeiten: Nachdem du motiv_01.jpg (1920 px) exportiert hast, gehe nicht zu Bild → Bildgröße auf dieser Datei. Öffne stattdessen die Original-RAW/JPG erneut. Grund: Jede Größenanpassung in Photoshop verfälscht die Bildqualität kumulativ.

📋 Checkliste

Datei Breite Qualität Zielgröße
motiv_01.jpg 1920 px 5 / 7 250–300 KB
motiv_01_thumb.jpg 600 px 4 / 7 80–120 KB

3. Dateibennenung & Struktur

↑ Zur Kapitelübersicht

Pro Motiv 2 Dateien speichern:

motiv_01.jpg ← 1920px Full-Size
motiv_01_thumb.jpg ← 600px Thumbnail
motiv_02.jpg
motiv_02_thumb.jpg
  • Schema: motiv_NN.jpg (NN = 01, 02, 10, …)
  • Automatisch verknüpft: Das Galerie-Script findet das passende Thumbnail
  • Natürlich sortiert: 01, 02, 03 … 10 (nicht 1, 10, 2)

4. Qualitätskontrolle

↑ Zur Kapitelübersicht

✅ Akzeptabel ❌ Zu komprimiert
• Scharfe Kanten
• Natürliche Farben
• Keine Blockmuster 		• Blockrauschen sichtbar
• Farbbänder
→ Qualität +1 Stufe erhöhen

Test: Bild auf 100% zoomen – sind Details klar erkennbar?

5. Wichtige Einstellungen bei jedem Export

↑ Zur Kapitelübersicht

  • Optimiert ☑: kleinere Datei ohne Qualitätsverlust
  • Progressive ☑: Bild baut sich schrittweise auf (Web-freundlich)
  • Seitenverhältnis ☑: verhindert Verzerren

6. Vorher vs. Nachher

↑ Zur Kapitelübersicht

Metrik Original Optimiert
Dateigröße 69 MB 250 KB / 100 KB
Ladezeit Seite ~30s ~2s
Qualität Übertrieben groß Perfekt für Web

276× kleiner | 15× schneller – bei gleicher Bildqualität!

7. Checkliste pro Foto

↑ Zur Kapitelübersicht

  • ☐ Full-Size: 1920px | Qualität 5 | 250–300 KB
  • ☐ Thumbnail: 600px | Qualität 4 | 80–120 KB
  • ☐ Dateinamen: motiv_01.jpg + motiv_01_thumb.jpg
  • ☐ Hochgeladen: Beide Dateien in img/ Ordner
  • ☐ Test: Galerie schnell, Lightbox scharf

8. Alternativen zu Photoshop

↑ Zur Kapitelübersicht

Für Batch-Konvertierung, um RAW-Bilder zum Beispiel in motiv_01.jpg und motiv_01_thumb.jpg umzuwandeln, gibt es neben Photoshop spezialisierte Batch-Tools, Desktop-Bildbearbeitung und Browser-Alternativen. Jede Lösung hat ihre Stärke.

9. Batch-Konvertierung: Tools im Vergleich

↑ Zur Kapitelübersicht

⭐ XnConvert

Batch-Spezialist

  • Ein Job für beide Varianten
  • RAW-Unterstützung native
  • Schnellster Durchsatz
  • Kostenlos (privat) | €15 (gewerblich)

Beste Wahl für: Massenverarbeitung

Photoshop

Aktionen + Batch

  • Profi-Werkzeuge
  • Zwei Durchläufe nötig
  • Umständliche Dateinamen
  • €/Monat (Abo)

Beste Wahl für: Profi-Bildbearbeitung

Photopea

Browser-Photoshop

  • Identische Oberfläche
  • Kein Download nötig
  • Wie Photoshop: Zwei Durchläufe
  • Kostenlos + Werbung | €5/Monat werbefrei

Beste Wahl für: Sofort testen (kein Download)

GIMP + Affinity Photo

Desktop-Alternativen

  • GIMP: Script-Fu/Python-Fu für Automatisierung (lernen erforderlich)
  • Affinity: Batch-Prozess vorhanden, aber nur einfache Aufgaben
  • Beide: Kostenlos (GIMP) oder €70 einmalig (Affinity)
  • Für 2-in-1-Jobs (Full-Size + Thumbnail): zu mühsam

Für Batch-Konvertierung (30+ Bilder): XnConvert ist die beste Wahl. Ein Job, beide Varianten, fertig in Minuten. Kostenlos, fokussiert, schnell.

Für einzelne Bilder oder Bearbeitung: Photopea
(kein Download, Photoshop-Oberfläche) oder GIMP (kostenlos, vollständig).

Für einzelne Bilder oder Bearbeitung: Photoshop
(wenn das Abo ohnehin vorhanden ist).

Hinweis: Es gibt weitere Tools (z. B. ImageMagick, FastStone, Lightroom). Diese Anleitung zeigt fünf ausgewählte praktische Lösungen mit grafischer Oberfläche für unterschiedliche Budgets, von kostenlos (XnConvert, GIMP) bis Abo-basiert (Photoshop, Lightroom). Fortgeschrittene automatisieren zusätzlich mit Kommandozeilen-Tools.

10. Vorteile von XnConvert

↑ Zur Kapitelübersicht

  • Einfacher Batch-Workflow Drag & Drop, Profil wählen, starten.
  • RAW-Unterstützung Viele RAW-Formate ohne zusätzliche Module.
  • Flexible Dateinamen Automatische Benennung wie nn_01.jpg und nn_01_thumb.jpg.
  • Mehrere Ausgabevarianten Original und Thumbnails gleichzeitig in einem Job.
  • Hohe Geschwindigkeit Optimiert für Massenverarbeitung.
  • Kosten Privat kostenlos, gewerblich einmalig ca. 15.00 €

11. Vergleich: XnConvert vs. Photoshop

↑ Zur Kapitelübersicht

Aufgabe XnConvert Photoshop
RAW → JPG Direkt, sehr schnell Über Camera RAW, mehr Schritte
30 Bilder in 2 Varianten Ein Batch-Job Aktion + Stapelverarbeitung, meist zwei Durchläufe
Dateinamen automatisch Sehr flexibel Umständlich (Bridge, Skript oder Aktionen)
Thumbnails erzeugen Im selben Job Separater Prozess

12. XnConvert-Workflow: RAW → JPG + Thumbnail

↑ Zur Kapitelübersicht

  • RAW-Bilder hinzufügen Alle RAW-Dateien in XnConvert ziehen.
  • Aktionen definieren Ausgabe 1: volle oder reduzierte Größe, z. B. nn_01.jpg.
    Ausgabe 2: verkleinerte Version, z. B. nn_01_thumb.jpg.
  • Dateinamen-Muster einstellen Nummerierung und Suffix _thumb konfigurieren.
  • Ausgabeordner wählen Zielverzeichnis festlegen.
  • Batch starten XnConvert verarbeitet alles in einem Durchlauf.

13. XnConvert: Detaillierte Anleitung

↑ Zur Kapitelübersicht

Version: XnConvert 1.111.0 (Windows x64, May 5 2026)

1. Bilder hinzufügen

RAW-Bilder oder JPGs in die Batch-Liste aufnehmen:

  1. Einzelne Dateien hinzufügen:
    • Reiter: +Dateien hinzufügen…
    • Per Drag & Drop in die Liste oder über Datei-Dialog auswählen
  2. Ganzen Ordner hinzufügen:
    • Reiter: Ordner hinzufügen
    • Im Datei-Dialog Ordner auswählen → XnConvert lädt alle Bilder
  3. Alle Bilder sollten als Thumbnails in der Liste sichtbar sein

2. Verarbeitung (Größe ändern) einrichten

  1. Reiter Verarbeitung auswählen
  2. Button Verarbeitung hinzufügen selektieren
  3. Erstes Dropdown-Menü: Transformieren auswählen
  4. Folgendes Dropdown-Menü: Größe ändern auswählen
  5. Einstellungen für Größe ändern:
    • Modus: Breite
    • Breite: 1920 px (Full-Size) oder 600 px (Thumbnail)
    • Seitenverhältnis beibehalten: ☑ aktivieren
    • Größe ändern immer: ☑ aktivieren
    • Neuberechnung (Interpolation): Lanczos
    • Gammkorrektur: ❌ deaktiviert lassen

Hinweis: Gammkorrektur wendet man gezielt an, um Helligkeits- und Tonwertverläufe zu korrigieren; für standardmäßige Web‑Exports ist sie normalerweise nicht erforderlich.

3. Ausgabe und JPEG-Formateinstellungen

  1. Reiter Ausgabe auswählen
  2. Ausgabeverzeichnis festlegen:
    • Radio-Button Ordner selektieren
    • Kontextmenü (rechts neben der Pfad-Zeile) auswählen
    • Im Popup-Fenster Ausgabeordner wählen (z. B. web-full-size/)
  3. Format auf JPEG einstellen:
    • Button Format selektieren
    • Im Dropdown: JPG-JPEG / JFIF auswählen
  4. JPEG-Qualitätseinstellungen öffnen:
    • Button Einstellungen selektieren
    • Popup-Fenster Formateinstellung für das Speichern öffnet
  5. Im Formateinstellungs-Dialog:
    • Qualität: Schieberegler auf gewünschten Wert stellen
      • Full-Size: 75
      • Thumbnail: 70
    • Progressiv: ☑ aktivieren (schrittweises Laden für bessere UX)
    • DCT-Methode: Gleitkomma (optimale Komprimierung)
    • Eingebettetes EXIF-Miniaturbild neu erstellen: ☑ aktivieren (falls vorhanden)
  6. Dialog mit OK bestätigen

4. Konvertierung starten

  1. Button Start (unten rechts) drücken
  2. XnConvert zeigt den Verarbeitungsfortschritt an
  3. Nach Abschluss: Alle Bilder im angegebenen Ausgabeverzeichnis

Dauer: ca. 3–5 Minuten für 30 RAW-Bilder

5. Zwei Größen verarbeiten (Full-Size + Thumbnail)

Empfohlene Vorgehensweise: Zwei separate Durchläufe

Das gewährleistet unterschiedliche Qualitätseinstellungen (75 vs. 70) und saubere Trennung der Ausgabeverzeichnisse.

Durchlauf 1: Full-Size (1920 px)

  1. Schritt 2: Größe ändern mit Breite 1920 px einstellen
  2. Schritt 3:
    • Ausgabeverzeichnis: web-full-size/
    • Qualität: 75
    • Progressiv: ☑
  3. Button Start drücken
  4. Warten bis Verarbeitung abgeschlossen ist

Durchlauf 2: Thumbnail (600 px)

  1. Schritt 2: Verarbeitung ändern – Breite auf 600 px anpassen
  2. Schritt 3:
    • Ausgabeverzeichnis: web-thumbnails/
    • Qualität: 70 (etwas niedriger als Full-Size)
    • Progressiv: ☑
    • Dateiname-Suffix: _thumb ergänzen, z. B. {Filename}_thumb
  3. Button Start drücken

Info: Nach beiden Durchläufen hast du zwei separate Ordner mit optimierten Bildern in unterschiedlichen Größen und Qualitätsstufen.

6. Qualitätskontrolle und Zielgrößen

Einstellung Full-Size Thumbnail
Breite 1920 px 600 px
Qualität 75 70
Progressiv (Laden) ☑ ☑
DCT-Methode Gleitkomma Gleitkomma
Seitenverhältnis halten ☑ ☑
Zielgröße ca. 250–300 KB 80–120 KB

Nach dem Export: Öffne ein Bild aus web-full-size/ auf 100% Zoom – Details sollten klar erkennbar sein, ohne Artefakte. Thumbnails können bei Qualität 70 leichte Komprimierungseffekte zeigen (normal und akzeptabel).

Quelle: https://lessat.net/fotografie/bildoptimierung
Titel: Bilder für Web-Galerien optimieren
Druckdatum: 18.06.2026
Domain: www.lessat.net

Fotografie:
Alle Kapitel anzeigen