Crashkurs Bildbearbeitung: Fotos und Grafiken für Ihre Website optimieren

Sie haben jetzt gelernt ...

• dass Sie Bilder bei Bedarf auch im Internet kaufen können

• dass Bilder unter zwei verschiedenen Lizenzmodellen angeboten werden

• dass Sie aus rechtlichen Gründen nicht alle Bilder im Internet veröffentlichen dürfen, die Sie auch fotografieren durften

• dass Bilder von modernen Digitalkameras meistens zu groß für eine Internetseite sind - Sie können Grafiken aber durch Skalieren oder Beschneiden verkleinern.

• das JPG, GIF- und PNG-Grafiken webtaugliche Formate sind.

• dass Sie nur bei GIF- oder PNG-Grafiken Transparenzen in der Grafik definieren können.

• dass Sie beim JPG-Format durch stärkere Komprimierung die Dateigröße gering halten können, dafür kommt es aber auch zu größeren Qualitätsverlusten

• das das Histogramm hilft, die Helligkeitsverteilung eines Bildes zu beurteilen

• dass Sie mit der Automatischen Bildkorrektur Farben und Belichtung schnell korrigieren können

• dass sich kleine Mängel in der Schärfe durch Nachschärfen beheben lassen

• dass Sie, um Bilder in Webseiten zu veröffentlichen, sie mit einem <img>-Element einfügen, daraus können Sie wahlweise eine ImageMap machen oder die ganze Grafik mit einem einzelne Hyperlink versehen.

Mit der folgenden Checkliste können Sie Grafiken prüfen, bevor Sie sie in Ihrer Website einsetzen.

• Haben Sie das Bild selbst erstellt?

• Falls nicht, haben Sie die Erlaubnis des Urhebers, es zu verwenden?

• Ist das Bild frei von rechten Dritter (Marken- und Geschmacksmusterrechte, Persönlichkeitsrechte)?

• Passt das Bild farblich zur Ihrer Webseite?

• Reicht die Größe des Originalbildes für die Anzeigegröße aus?

• Falls das Bild größer als die benötigte Anzeigegröße ist, haben Sie es korrekt skaliert oder beschnitten, damit es nicht unnötig groß ist?

• Haben Sie es in ein passendes Dateiformat (PNG; JPG oder GIF) konvertiert?

• Hat das Bild einen webtauglichen Dateinamen?

Nach dem Einfügen des Bildes in die Website sollten Sie das Ergebnis auf korrekten Code und optimale Anzeige im Browser prüfen:

• Stimmt der Dateiname im <img>-Element hinsichtlich groß- und Kleinschreibung mit dem der Grafikdatei überein?

• Haben Sie mit dem alt-Attribut einen Alternativtext definiert?

• Hat das Bild eine gute Größe, ist nicht zu klein und gut zu erkennen, aber auch nicht zu groß und deshalb zu dominant in der Webseite?

Eine mögliche Banner-Lösung.

• Aufgabe: Verwendung prüfen

  Das Tankstellenbild darf für redaktionelle Zwecke verwendet werden - Probleme könnte es aber geben, wenn der Text sich etwa negativ mit der dargestellten Mineralölfirma auseinandersetzt. Eine werbliche Verwendung ist nur dann möglich, wenn sicher ist, dass die Tankstellen-Marke nicht geschwächt wird. Das "USB-Stecker"-Bild darf sowohl redaktionell als auch werblich verwendet werden, da keine herstellerspezifischen, durch Geschmacksmuster geschützten Produkteinzelheiten erkennbar sind.

• Aufgabe: Bilder auswählen

  Bild zwei untestützt das Thema viel besser. Das linke Bild dagegen illustriert nur allgemein "Kontoauszüge" - um geeignet zu sein, müsste beispielsweise die Abbuchung der Gewerbesteuer erkennbar sein.

• Aufgabe: Food-Fotos

  Das rechte Bild zeigt ein zubereitetes Gericht, das linke nur eine Zutat. Bildausschnitt und Präsentation sind im rechten Bild "kreativer", das linke wirkt etwas einfarbig und konventionell. Umgekehrt sind auf dem rechten Foto mehr Details wie etwa die Gabel, die vom eigentlichen Motiv ablenken können.

• Aufgabe: Welche Kantenlänge?

  Das Minimum wäre wohl 1024 x 768 Pixel. Besser sind 1748 x 1240 Pixel - das Format ist bei Bildagenturen aber auch eine Preisfrage. Selbst geschossene Fotos sollte man "möglichst groß" nehmen und dann beschneiden und/oder skalieren. Generell gilt: Je mehr Bearbeitung nötig wird, desto größer sollte das Ausgangsbild sein.

• Aufgabe: Beschneiden oder skalieren?

  Wenn Sie den Bildaufbau für gut halten, können Sie das Bild einfach herunterskalieren. Ich persönlich würde das Marienkäfer-Foto allerdings so beschneiden, dass der Käfer nicht genau in der Bildmitte sitzt und dafür mehr in den Fokus kommt. Eine Positionierung mehr am Rand des Bildes bringt mehr Spannung ins Bild. Als Format wäre JPG mit 20% Komprimierung empfehlenswert - das Foto besteht zwar überwiegend aus Grüntönen, es enthält jedoch viele Farbabstufungen.

• Aufgabe: Bild für Galerie

  Für die Miniaturansicht wären z.B. Kantenlängen wie 90 x 60 oder 100 x 75 Pixel gut geeignet.

  Für das große Bild könnte das Format 600 x 400 oder 600 x 450 Pixel betragen - das hängt aber vom Kontext etc. ab.

• Aufgabe: Bildkorrektur

  Zur Entfernung des ungewünschten Teils ist bei diesem Bild Bestempeln eine gute Option: Die Bildkomposition bleibt erhalten, durch Beschneiden rutschen die Blüten dagegen weit an den Rand. Außerdem lässt sich der Bildhintergrund (Rauhputz) gut stempeln.

  Die Helligkeitsverteilung des Bildes ist, wie man am Histogramm sieht, nur im unteren Bereich gleichmäßig über die Gesamtbreite verteilt. Insgesamt liegt eine Überstrahlung vor, die Farbtöne im Weißbereich sind zu stark, dunke Farbtöne zu wenig repräsentiert. Das Foto ist blaustichig, den Farben fehlt Sättigung. Die Kurve im Histogramm verläuft sehr gleichmäßig - der Kontrast ist zu niedrig.

  Bei der folgenden Lösung (erstellt mit Corel PaintShop Photo Pro X3) waren die Arbeitsschritte: Helligkeit -23, Kontrast +15, Farbsättigung ändern auf Magenta 30/ Grün 10, Farbabgleich +4313 wärmer, Nachschärfung durch "unscharf maskieren" mit Radius 2/Stärke 100/Differenzwert 12.

  Diese korrigierte Variante ist natürlich kein optimales Bild - aber die Fehler der Ausgangsversion wurden deutlich verbessert. Durch einen Weißabgleich wurde hier ein minimaler Gelbstich verursacht, aber dafür wirken die weißen Bereiche weniger überstrahlt.

• Aufgabe: Banner

  Die einzelnen Schritte finden Sie im Abschnitt Website-Banner erstellen.. Ein weiteres Beispiel aus einem der Muster-Bilder:

• Aufgabe: Dateinamen

  • Rosenstrauß.jpg - nicht geeignet wegen des "ß".

  • Rosen-strauss 01.jpg - nicht geeignet wegen des Leerzeichens.

  • 1234.bild.jpg - weniger geeignet wegen des zweiten Punktes.

  • 1234.jpg - technisch problemlos, aber ohne Aussagekraft oder Hinweis auf das Bild, deshalb suboptimal.

  • Rosenstrauss.jpg - die beste Lösung