Claudia Klinger am 17. Juli 2009 —

Bilder bearbeiten fürs Web: Schritt für Schritt-Anleitung

Zu meinem Erstaunen findet sich mit der Suche „Bilder bearbeiten“, „Fotos bearbeiten fürs Web“ oder ähnlichen nahe liegenden Suchbegriffen keine einfache, Programm-unabhängige (!) Anleitung, wie man die Fotos aus der DigiCam für ein Blog oder die Homepage bearbeiten muss.

Da ich dazu immer wieder Anfragen bekomme, will ich hier die Basics der Bildbearbeitung in wenigen Schritten auflisten und erläutern. Ansprechende, Web-konforme Ergebnisse kann man erzielen, ohne erst ein Studium des umfangreichen Gebiets „Bildbearbeitung“ ableisten zu müssen! Hierfür beschränke ich die Darstellung auf den Umgang mit dem immer noch häufigsten Zielformat „JPG“, das gleichzeitig auch Grund vieler fehlerhafter Bild-Uploads ist („alles so unscharf, woran mag das wohl liegen?“).

Los geht’s:

  1. Foto in einem Bildbearbeitungsprogramm öffnen (z.B. Photoshop, PaintShopPro, Ulead PhotoImpact, Corel Photo Paint, Gimp u.a.).
  2. Gewünschten Bildausschnitt wählen und das Bild entsprechend beschneiden;
  3. Nun die Breite des Bildes (in Pixel!) auf die Zielgröße bringen – für ein Blog zum Beispiel auf 450 Pixel. Die Höhe errechnet das Programm selber, solange die Funktion („Proportionen beibehalten“ oder ähnlich) nicht abgewählt wird. (Wieviel DPI das Bild hat, braucht uns im Web nicht mehr zu interessieren, denn der Bildschirm kennt nur Pixel und deren Anzahl geben wir ja an! Eine Umwandlung des Bildes in 72 DPI, wie sie oft empfohlen wird, ist unnötig)
  4. Nun empfiehlt sich eine Tonwertkorrektur, wenn das Foto etwas flau wirkt, also insgesamt zu hell oder zu dunkel ist. Hierbei kann man die hellen, die dunklen und die mittleren Tonbereiche einzeln verändern. Mit der Tonwertkorrektur bekommt man oft befriedigenere Ergebnisse als mit „Helligkeit/Kontrast“. Evtl. jeweils ausprobieren und den Schritt zurück nehmen, falls es nicht gefällt.
  5. Das Bild schärfen, falls nötig – und oft ist das wirklich nötig, wenn ein Foto deutlich verkleinert wurde wie in unserem Beispiel.
  6. Evtl. auch die Sättigung der Farben verstärken, es aber nicht übertreiben!
  7. Nun fürs Web im Format JPG abspeichern: Achtung, JPG ist ein Format, dass die Daten des Bildes komprimiert – und zwar mit (beabsichtigten) Verlusten. Die Bildbearbeitungsprogramme bieten unterschiedliche Skalen für die gewünschte Datenreduktion: in Worten, Zahlen oder Prozent. Man kann die gewünschte Reduktion einstellen, z.B. „medium“ oder „45%“. Öffnet man das abgespeicherte Bild erneut und speichert es ein weiteres Mal, wird es erneut reduziert: bei jedem Speichern wird es also unschärfer und zeigt auch die typischen JPG-Schlieren an Rändern und Buchstaben. Also IMMER erst fertig bearbeiten, dann nur EINMAL abspeichern! Welche Reduktionsrate man wählt, muss man ausprobieren: es sollte noch gut und scharf aussehen, jedoch „klein genug“ werden, um keine langen Ladezeiten zu benötigen (nicht alle haben DSL!). Ich speichere meine Bilder für Blogs meist in Größen zwischen 30 und 50 Kb).
  8. Und das war es schon! (Im wilden Gartenblog zeige ich das Ganze anhand der Bildbearbeitung von Pflanzenfotos – allerdings OHNE das Thema Abspeichern).
  9. Sollte ich etwas Wichtiges vergessen haben, freu‘ ich mich über Hinweise in den Kommentaren!

    (Updated 22.30)

Diskussion

Kommentare abonnieren (RSS)
14 Kommentare zu „Bilder bearbeiten fürs Web: Schritt für Schritt-Anleitung“.

  1. Vielen Dank für die Anleitung. Das ist total super!

  2. Die unter Punkt 5 bis 7 angeführten Schritte mache ich immer am Original in der hohen Auflösung.

  3. Hab ich anfänglich auch gemacht, doch musste ich dann im Zielformat regelmäßig Schärfe und Sättigung nochmal nachbessern. So spar ich mir also mit meiner Reihenfolge etwas Arbeit.

  4. Gute Zusammenfassung, merci :)

  5. vielen dank für die anleitung. da kann ich ja noch einiges optimieren.

  6. Ja super, selbst für frauen zu verstehn.. :-)
    Liebe Grüße Anna

  7. Vielen Dank für die „Bilder“ Anleitung, aber welches der von Dir genannten Programme schlägst Du einer Anfängerin wie mir vor?

    „…Foto in einem Bildbearbeitungsprogramm öffnen (z.B. Photoshop, PaintShopPro, Ulead PhotoImpact, Corel Photo Paint, Gimp u.a.).

  8. @Nina: Photoshop, wenn du irgendwie günstig ran kommst (auch ältere Versionen tun es!).

  9. Wenn du deinen Artikel in dem Photoshop Magazin (auf der Seite: http://photoshop-magazin.net/) veröffentlichen möchtest, sag Bescheid! Der Artikel wird in Newsletter publiziert. Dieses Newsletter erhalten 20 000 Benutzer. Es wäre toll, wenn die anderen von deiner Arbeit erfahren könnten. Lass den anderen die Ergebnisse deiner Arbeit sehen!!

  10. Vielen Dank für die Anleitung. Hab es schon ausprobiert.
    Liebe Grüße
    Heike

  11. Sehr schöne Anleitung und Respekt für Ihre anderen Arbeiten. Ich habe mich auch für den Newsfeed angemeldet.
    Durch gründliches Stöbern habe ich jetzt ebenfalls eine einfache Vorgehensweise gefunden. Ich arbeite seit langem bereits mit dem Bildbetrachter Irfanview (ist kostenlos!) Dafür gibt es ein Plug-in „Speichern fürs Web“, der alle Zwischenschritte abfragt, erforderliche Korrekturen wie Schärfen et c. auf Wunsch durchführt und zum Schluß die optimierte Vorschau zeigt und dann muß man nur noch die gewünschte Bildgröße in KB angeben. So erreicht man leicht und ohne wirkliche Qualitätsverluste (fürs Web) eine Reduktion von 3.500 KB auf 30 KB.

  12. Hallo,

    auch ich habe zu danken. ;-)
    Viele Grüße aus dem verschneiten Thüringen….

  13. Vielen Dank Claudia, jetzt kann ich endlich meine Bilder für meinen eigenen Blog selber bearbeiten. Trotzdem lasse ich alles andere weiterhin professionell von der BMWA (http://www.beste-medien-werbe-agentur.de/Angebot/Design/Bild-Typo/elektronische-Bildbearbeitung.html) digital bearbeiten.

  14. Artikel ist über 10 Jahre alt, ist aber nach wie vor aktuell ;) Das Thema Bilderoptimierung für Web trotz dem technischen Fortschritt bleibt noch nicht 100% gelöst. Mit G5-Netz dürfte aber keinen großen Einfluß auf Ranking bei Google & Co. haben. Bis dahin einfach mit Photoshop Bilder für Internet vorbereiten – funktioniert am einfachsten.