Tutorials

Bilder für das Web speichern in Photoshop: Ein Schritt-für-Schritt Tutorial

Melden

Hier ist ein ausführliches Tutorial, wie du deine Bilder in Adobe Photoshop optimal für die Verwendung im Internet vorbereitest und speicherst.

Wenn du Bilder für Websites oder soziale Medien erstellst, ist das Ziel immer das gleiche: Die beste Bildqualität bei kleinster Dateigröße. Zu große Dateien verlangsamen die Ladezeit deiner Website, was schlecht für die User Experience und das SEO-Ranking ist.

Photoshop bietet hierfür zwei Hauptwege an.

Methode 1: Der Klassiker – „Für Web speichern (Legacy)“

Obwohl Adobe diese Funktion als „Legacy“ (veraltet) bezeichnet, ist sie nach wie vor die beliebteste Methode, da sie sehr detaillierte Einstellungen und eine Live-Vorschau der Dateigröße bietet.

  1. Öffne dein Bild in Photoshop.
  2. Gehe zu Datei > Exportieren > Für Web speichern (Legacy)...
    • Shortcut: Strg + Alt + Shift + S (Windows) oder Cmd + Opt + Shift + S (Mac).
  3. Wähle das Dateiformat:
    • JPEG: Ideal für Fotos. Nutze die Qualitätseinstellung (meist ist „Hoch“ oder ein Wert zwischen 60 und 80 ausreichend).
    • PNG-24: Ideal für Grafiken mit Transparenz oder harten Kontrasten.
    • GIF: Nur für einfache Animationen oder Grafiken mit sehr wenigen Farben.
  4. Bildgröße anpassen: Unten rechts im Fenster kannst du die Pixelmaße ändern. Web-Bilder müssen selten breiter als 1920px (Full HD) sein.
  5. Farbraum prüfen: Achte darauf, dass das Häkchen bei „In sRGB konvertieren“ gesetzt ist. Das stellt sicher, dass die Farben im Browser korrekt dargestellt werden.
  6. Speichern: Klicke auf „Speichern“ und wähle deinen Zielort aus.

Methode 2: Die moderne Variante – „Exportieren als“

Diese Methode ist schlanker und eignet sich besonders gut, wenn du mehrere Zeichenflächen (Artboards) gleichzeitig exportieren möchtest.

  1. Gehe zu Datei > Exportieren > Exportieren als...
  2. Dateieinstellungen: Wähle auf der rechten Seite das Format (JPG, PNG oder SVG).
  3. Qualität: Schiebe den Regler auf das gewünschte Maß. Du siehst links in der Liste sofort, wie schwer die Datei wird.
  4. Bildgröße: Hier kannst du die Skalierung (z. B. 1x, 2x für Retina-Displays) oder die genauen Pixelmaße festlegen.
  5. Farbraum: Markiere auch hier unbedingt „In sRGB konvertieren“ und „Farbprofil einbetten“.
  6. Exportieren: Klicke auf den Button und benenne deine Datei.

Welches Format soll ich wählen?

  • JPEG: Verwende dies für alle normalen Fotos. Eine Qualität von 60-70 % bietet oft den besten Kompromiss aus Schärfe und Speicherplatz.
  • PNG-24: Nutze dieses Format, wenn dein Bild einen transparenten Hintergrund haben muss (z. B. Logos).
  • SVG: Bestens geeignet für Vektorgrafiken und Icons, da sie ohne Qualitätsverlust skalierbar sind.
  • WebP: Photoshop unterstützt mittlerweile auch das WebP-Format direkt über „Speichern unter“ oder „Exportieren als“. Es bietet oft eine noch bessere Kompression als JPEG bei gleicher Qualität.

Profi-Tipps für die Web-Optimierung

  1. Die 100-KB-Regel: Versuche, Bilder für Blogbeiträge unter 100 KB bis 200 KB zu halten. Große Hintergrundbilder sollten 500 KB nicht überschreiten.
  2. Dateinamen: Benenne deine Dateien webfreundlich. Verwende keine Umlaute (ä, ö, ü), keine Leerzeichen und keine Sonderzeichen. Nutze Bindestriche statt Unterstriche (z.B. mein-neues-bild.jpg).
  3. Vorschau nutzen: In der „Für Web speichern“-Maske kannst du oben auf den Reiter „2-fach“ klicken. So siehst du links das Original und rechts die komprimierte Version im direkten Vergleich.
  4. Metadaten: In den Exporteinstellungen kannst du wählen, ob Metadaten (Kamerainfos, GPS) gelöscht werden sollen. Für das Web solltest du diese meist auf „Keine“ oder „Nur Urheberrechtsinformationen“ setzen, um zusätzliche Bytes zu sparen.
0