Modul 2.4: Bearbeitung von Bildern fürs WorldWideWeb

Das WorldWideWeb ist zwar multimedial, standardmäßig können jedoch nur wenige Bildformate verwendet werden. Außerdem müssen die Bilder komprimiert sein, um überlange Übertragungszeiten zu vermeiden. Im Nachfolgenden werden einige Hinweise dafür gegeben; einige Punkte werden später weiter vertieft.

• Nur Pixelformate im RGB-Farbmodus bzw. im Farbmodus Indizierte Farben oder Graustufen sind möglich. Zeichnungen, die Sie mit vektorbasierten Grafikprogrammen (z.B. Illustrator, Freehand, CorelDraw) erstellt haben, müssen Sie zuerst in ein Pixelformat konvertieren (am besten TIFF oder PICT), und danach im GIF bzw. JPG-Format abspeichern. ( Ausnahme ist das vektorbasierte Flash-Format, welches jedoch nur mit Softwareergänzungen anzeigbar ist, siehe Modul 8.7).
  
  
• Bilder müssen wegen der Dateigrößen komprimiert sein: zulässige Formate sind damit nur GIF, JPG (oder neu PNG)
  

GIF-Format (Graphics Interchange Format)

• "verlustfrei", jedoch maximal 256 Farben (= 8 Bit, sog. indizierte Farben). Farben können ggf. von Hand vor der Komprimierung reduziert werden (z.B. mit Adobe Photoshop oder Image Ready). Interpolation der Farben z.T. durch Dithern möglich (Körncheneffekt, schlecht bei Verläufen).
  
  
• gut für Bilder mit wenigen, gleichmäßigen Farben, v.a. geeignet für Zeichnungen, schlecht für Fotos
  
  
• Kann auch transparenten Hintergrund haben (wie z.B. unser Lehrer Lämpel auf unserer Website-Leiste, bei dem der graue Hintergrund der html-Seite hindurchscheint (wäre der Hintergrund rot, läge auch Herr Lämpel auf rotem Hintergrund). Die Erstellung transparenter Hintergründe erlernen Sie in der nächsten Lektion (Modul 2.5)
  
  
• auch für kleine Animationen geeignet (animierte Gifs, siehe Modul 8.4b)
  
  
• können auch "interlaced" aufgebaut werden (z.T. auch bei jpg möglich). Dies bedeutet rascher, jedoch erst unscharfer Bildaufbau, der sich dann zunehmend nachschärft. -> Benutzer muss nicht so lange warten, aber es resultiert eine etwas größere Datei.
  
  
• Tipp: bei Farbreduktion ggf. auf websichere Farbtabelle (216 Farben) einstellen. Bei allen anderen Farben kann es je nach Bildschirm und Plattform Unterschiede in der Darstellung geben.

JPG oder JPEG-Format (Joint Photographic Expert Group)

• Komprimiert unter Qualitätsverlust, kann jedoch Tausende oder auch Millionen von Farben darstellen
• Qualitätsverlust ist beim Abspeichern einstellbar -> je höher die Qualität, desto größer bleibt die Dateigröße.

Auflösung:

• Der Standard für Bildauflösungen auf dem Bildschirm sind nur 72-dpi (dots per inch, pixel per inch). Jede höhere Auflösung ist prinzipiell unnütz und verlängert die Bildladezeiten enorm. Rechnen Sie also Ihre Bilder bei der gewünschten Größe auf 72 dpi herunter. Wie groß Ihr Bild dann wirklich auf dem Bildschirm erscheint, hängt von der vom Benutzer voreingestellten Bildschirmgröße ab.
  
  Hinweis: Manche Bildschirme können auch 98 dpi darstellen. Dennoch genügt die 72 dpi-Auflösung, da der Bildschirm entsprechend umrechnet und Sie sicherlich keinerlei Unterschied erkennen würden. Alle Bildbearbeitungsprogramme, die automatische Weboptimierung von Bildern beinhalten, arbeiten mit 72 dpi (z.B. Photoshops Weboptimierung, Adobe ImageReady oder Apples kostenloses iPhoto 2).

Weitere Tipps:

• Beim Scannen höhere Auflösung einstellen (am besten Vielfaches von 72 dpi), dann ggf. Schärfe und sonstige Bildbearbeitungen vornehmen (Helligkeit etc.), danach auf 72 dpi runterrechnen. Helligkeit v.a. auf Macs relativ hoch einstellen, sonst erscheinen die Bilder auf WindowsPCs zu dunkel (Windows PC haben eine andere sog. Gamma-Einstellung, das ist vereinfacht gesagt, eine andere Helligkeitsgrundeinstellung für ihre Monitore).
  
  
• Bildgrößen über 60 kb werden kritisch. Wegen Ladezeit nicht zu viele Bilder auf einer Seite. Ggf. kleine Vorschau-Bilder machen, die auf Seiten mit größeren Bildern verlinkt sind.
  
  
• Layout-Tipp: keine Bilder auf der Webseite einfach nebeneinander packen. Sie werden ansonsten nur falsch umgebrochen, wenn der Benutzer die Fenstergröße des Browsers ändert. Wenn Bilder nebeneinander dargestellt werden sollen, am besten Tabellen ohne Rand zum Positionieren verwenden, dies gilt ggf. auch für Bildunterschriften. Siehe Beispiele in Modul 4.1
  
  
• Besonders geeignet zur Bildbearbeitung ist Photoshop sowie seine Zusatzsoftware ImageReady (ab Photoshop Version 5.5 kostenlos dabei). Bilder sind mit Photoshop direkt einscannbar, alle Einstellungen von Hand regelbar, sehr gute Bildbearbeitungsmöglichkeiten. Das herausragende Feature (ab Photoshop 6 bzw. ImageReady) ist die Option: fürs Web speichern. Dort werden beliebige, in Photoshop geladene Bilder nicht nur automatisch auf 72 dpi und nach Wahl GIF, JPG oder PNG-Format konvertiert, sondern man kann noch viele Optionen zusätzlich ausprobieren (z.B. unterschiedlichste Farbzahl bei GIF-Formaten), die man in der Vorschau sofort angezeigt bekommt. Darüberhinaus lässt sich die Größe des Bildes einstellen. Das absolute Highlight sind aber die extrem optimierten Dateigrößen (die man ebenfalls bereits in der Vorschau angezeigt bekommt). Photoshop kann darüberhinaus auch transparente Gifs erzeugen (siehe nächste Lektion).
  
  Hinweis: Einige genauere Anleitungen zur Erstellung derartiger Bilder mit Photoshop bzw. ImageReady finden Sie in Kursmodul 6.1 (Bilder mit GoLive bearbeiten) sowie Kursmodul 8 (speziell bei den Kaptiteln ImageMaps, Slices, Rollovers.)
  
  Tipp: Photoshop 6 hat eine sehr passable Hilfefunktion (Tutorial) im html-Format, die Sie im Menupunkt Hilfe unter Hilfe-Inhalt finden.
  
  
  
  
• Wer keinen Zugang zu Photoshop oder iPhoto hat, kann auch viele andere Bildbearbeitungsprogramme verwenden (u.a. Painter, CorelPaint). Man kann sich auch mit vielen Sharewareprogrammen behelfen, z.B.
  
  
  • Optimieren von Gifs via Webdienst (auch Transparenz ist einstellbar): http://www.gifworks.com
    
    
  • Grafikkonverter (für Macs, super Shareware, Lemke-Software, http://www.lemkesoft.com)
    
    
  • Ultimate Paint für PC (sehr empfehlenswert: mit vielen Optimierungsmöglichkeiten für Photos, interessanten Effektfiltern usw. Shareware US $ 39.95; eine ältere Version ist als Freeware erhältlich. http://www.ultimatepaint.com/de
  • Tipp: Apples konstenloses iPhoto 2 (für MacOS-X) hat die wichtigsten Bildbearbeitungsfunktionen integriert und kann ebenfalls relativ gut optimierte Webversionen exportieren.
    
    
  • Auch die kostenlose, jedoch nicht ganz einfach zu bedienendene Bildbearbeitungssoftware Gimp (für Linux, Unix und PC) ist gut geeignet, um Bilder zu optimieren.
    
    
  • Viele Digitalkameras oder auch Digitalvideokameras mit Foto-Optionen legen einfache, aber für unsere Zwecke ausreichende Bildbearbeitungssoftware hinzu. Einen Art Standard bildet hierbei die ArcSoft Software Suite, die folgendes beinhaltet: ArcSoft Photoimpression, ein Bildbearbeitungsprogramm, ArcSoft Panorama Maker, mit dem mehrere überlappende Einzelbilder zu einem Panorama zusammengesetzt werden können sowie ArcSoft PhotoMontage, mit dem Sie verschiedene Bilder mit etlichen Optionen zu einer Montage oder Collage zusammensetzen können.
    
    
  • sehen Sie ggf. noch in das Linkverzeichnis zu Grafikprogrammen (v.a. PC, auch Shareware und Freeware) aus dem SelfHTML-Kurs von S. Münz unter http://selfaktuell.teamone.de/links/grafik_programme.htm
    
    
  • Teilweise ausgezeichnete Freeware und Shareware rund ums Thema Bilder (v.a. für PC, z.T. auch für Mac), darunter Programme für animierte Gifs, zur Transparenzerstellung, für Effekte, zum Zeichnen, zum Verbessern von Fotos u.v.m. finden Sie unter: http://www.imagespro.com
    
    
  • einige shareware- und freeware-Programme finden die Münchner Kursteilnehmer auch in unserem Software-ressourcen-Ordner (mit pw; auch via ftp)
    
    
    

  Für besondere Zwecke:

  • Transparency (für Macs, freeware, zur Erstellung transparenter Hintergründe in Gif-Formaten, Autor Aaron Giles)
    
    
  • Gifbuilder (für Mac, shareware zur Erstellung animierter Gifs, Autor Yves Piguet)
    
    
  • Active Gif Creator (Für Windows, zur Erstellung animierter Gifs, shareware, US $ 35.00) http://www.wsoft-lab.com/products/agif/
    
    
  • 
    Weitere Links zu Sharewarearchiven finden Sie in Anlage 12.
    
    
    
    
    
• Bilder , Icons und Bildhintergründe gibt es auch viele im Web, eine kleine Linkliste finden Sie hier. Egal, woher die von Ihnen verwendeten Bilder kommen, beachten Sie bitte die Copyright-Regelungen. Aus dem Schneider sind Sie nur mit selbst erstellten bzw. fotografierten Bildern (bei letzterern aber auch nur, wenn Sie keine Dinge abfotografiert haben, die nicht abfotografiert werden dürfen). Viele Icons und auch etliche Bilder im Netz sind jedoch frei verfügbar. Das simple Klauen von Bildern aus existierenden Sites ist jedoch untersagt und kann strafrechtlich verfolgt werden. Tipp hierzu: mailen Sie den jeweiligen Webmaster einfach an, oft erlaubt er Ihnen, die Bilder doch zu nutzen.
  
  
  
  
  
• Geo-Tipp: Geländebilder machen sich natürlich hervorragend im Web, aber gerade hier ist die Dateigröße oft kritisch, also auf besonders optimale Komprimierung achten. Bei größeren Angeboten unbedingt Vorschau mit einbauen und jeweils großes Bild auf extra html-Seite stellen. Näheres siehe Modul 4
  
  
• Geo-Tipp: Lassen Sie den Betrachter nicht mit einer Bildunterschrift allein. Gerade geowissenschaftliche Bilder kann man gut (z.B. in Photoshop) direkt in der Abbildung beschriften. Verwenden Sie auch Pfeilen (für Features an Fossilien), Linien (für Störungen, etc.. Machen Sie die Beschriftung aber erst, nachdem das Bild auf 72 dpi und die richtige Größe heruntergerechnet ist, ansonsten wird Ihre Bildbeschriftung oft zu klein oder zu unscharf. Heben Sie sich aber das Original auf. Wenn Sie die Beschriftung auf eigenen Ebenen belassen, bevor Sie in jpg komprimieren, können Sie die Beschriftung später ggf. ändern oder auch nur das Originalfoto wieder reaktivieren. Näheres siehe Modul 4

>> Anlage zu Modul 2.4: Linkliste zu Bild- und Icon-Ressourcen im Web

>> Nächste Lektion: Erstellung transparenter Gifs: Modul 2.5
<< Modul 2.3: Arbeitsschritte zum Online-Bringen von Webseiten