Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern

Teil 12

Grafiken fürs Internet optimieren 

Geschwindigkeit ist alles im Web. Es gibt nichts Mühsameres als Seiten, die sich allzu langsam aufbauen. Reine Textdokumente sind schnell übertragen - sobald man jedoch mit Grafiken arbeitet, kommt man nicht darum herum, alles zu tun, um den Download zu verschnellern. Unter jeder Komprimierung leidet aber die Qualität des Bildes - eine Gratwanderung!  

Für Euch heisst das: Wenn Ihr Grafiken aus dem Internet klaut, sind diese meistens bereits fürs Web optimiert, sprich komprimiert. Die klassischen Komprimierungsformate im Netz sind JPG und GIF. Mit komplizierten Logarithmen verdichtet Euer Grafikprogramm die meist als TIF- oder BMP-Grafiken vorhandenen Bilder und macht sie so kleiner, wenn man sie als JPG oder GIF speichert. Die Unterschiede zwischen den beiden Formaten kurz erklärt: 

• GIF-Dateien können maximal aus 256 Farben bestehen, eignen sich daher für speziell für Icons und Buttons (z.B. Navigations-Klicks). Fotos werden an sich - trotz erhöhter Körnigkeit - auch ganz passabel, sind aber meist grösser als JPGs, wenn die ganze 256er-Farbpalette gebraucht wird. Bei GIFs mit nur 5 Farben werden auch nur diese 5 Farbe geladen und nicht 256 - die Datei wird somit sehr klein! GIFs bieten zudem die Möglichkeit, mehrere Bilder in einer Datei zu speichern und somit Animationen herzustellen wie diese, die aus etwa 16 Einzelbildern besteht:Zudem kann man eine Farbe als transparent setzen, sodass nicht nur qudratische Grafiken möglich sind. Beim rotierenden Logo wurde die Hintergrundfarbe weiss als durchsichtig festgelegt, sodass die Grafik auf dem Hintergrundbild zu "schweben" scheint. Zur Bearbeitung empfiehlt sich nebst einem Grafikprogramm (Photoshop usw.) ein separater GIF-Editor (in speziellen Web-Grafikpaketen enthalten oder als Shareware aus dem Netz herunterladbar).
  
  
• JPG-Dateien bieten die letzteren Vorteile in der Ur-Version nicht (als "Progressive JPG" hingegen schon, dies würde hier aber zu weit führen), eignen sich aber für grössere Fotos und Bilder mit feinen Farbverläufen, da sie bis zu 16 Millionen Farben unterstützen. JPGs können mit jedem modernen Grafikprogramm gespeichert werden. Auch der Komprimierungsfaktor ist wählbar (zwischen 6 und 8 ist meistens OK; darüber wird die Datei zu gross, darunter die Qualität zu mies).
  
  
• Es gibt auch noch PNG-Grafiken, das würde hier jedoch zu weit führen: Siehe Fachbücher!

Wichtig ist ebenfalls: Web-Grafiken müssen nicht die selbe hohe Auflösung wie Grafiken zum Ausdruck haben. Während man Fotos zum Ausdrucken mit einer Auflösung von bis zu 300-600 dpi (dots per inch) scannen muss, reichen für eine Bildschirmdarstellung 75 dpi vollkommen - mit allem anderem verschenkt man wertvolle Bytes, die den Download verlängern. Das heisst aber auch, dass man JPG- und GIF-Bilder aus dem Web nicht ohne Qualitätsverlust drucken kann!

Daraus leiten sich folgende Faustregeln ab: 

• Grafiken fürs Internet immer als GIF oder JPG speichern
• Auflösung beim scannen oder im Grafikprogramm auf 75 dpi reduzieren
• Bild im Grafikprogramm so verkleinern, dass es 1:1 aufs Netz kann (also NICHT ein Bild gross speichern und dann im HTML-Quelltext die Grösse künstlich verkleinern - geladen werden muss die gesamte Version, auch wenn man als Breite im Quellcode nur 20 Pixel angibt!)
• Immer darauf achten, dass eine Grafik im HTML-Quelltext Grössenangaben und Angeben zum Rahmen darum herum enthält (idealiter also IMG SRC="abc.jpg" width=100 height=40 border=0 ALT="Foto von Hans Meier"). Diese Angeben werden bei der Arbeit im Composer automatisch generiert. Grund: Der Browser weiss dann, wieviel Platz er fürs Bild reservieren muss, bevor das Bild komplett geladen ist - das wirkt sich positiv auf die Darstellung aus.
• Der ALT-Text erscheint immer dann, wenn jemand (was man kann, aber mit den neuen, schnellen Modems kaum noch muss) das Darstellen von Grafiken ausgeschaltet hat und erleichtert diesen Menschen die Navigation.

Weiteres zu Grafikformaten findet Ihr auf dieser Seite.

Nun aber einige Beispiele von Komprimierungen und Qualitätsunterschieden - siehe auf dieser Seite.

Wie gross andere Grafiken sind, erfährt Ihr, wenn Ihr die Dateien auf die Harddisk speichert und im Windows-Explorer die Dateigrösse anschaut. Zum Vergleich: Diese Grafik...

... hat eine Grösse von rund 15 Bytes, da es auf 10 Farben reduziert und als GIF gespeichert wurde - das Minimum fürs Auge und das Maximum für die Grösse. Genau dies ist das Ziel von Grafikkomprimierung.  Natürlich kann man bei den Angaben der Grösse auch mit Streckeffekten spielen... die exakt gleiche Datei, künstlich (im Quelltext oder in den Grafikoptionen des Compsers, dazu einfach im Composer aufs Bild doppelklicken, Grösse wählen und "constrain" wegklicken) gestreckt auf eine Breite von 391 Pixeln, sieht so aus... 

Hier werden auch schnell die Grenzen von komprimierten Grafiken sichtbar - wenn man eine so optimierte Datei vergrössern will, wird die Oberfläche sehr schnell gepixelt... 

Umgekehrt macht es wie gesagt wenig Sinn, eine immens grosse, qualitativ hohstehende Datei mit einer Originalbreite von 400 Pixeln im HTML-Quelltext auf 100 Pixel zu quetschen.

Besser ist es, die Zielgrösse in Pixeln festzulegen, und im Grafikprogramm sauber die Grösse zu ändern.  Auf Computern in Kursräumen sind immer wieder verschiedene Tools installiert (Photoshop ist sicher das beste, kostet aber fast 2000 Franken - ab und zu hats auch Corel Draw und Photo Paint).

Die Programme funktionieren alle etwa gleich, die Befehle sind einfach anderswo versteckt. Die folgenden Angaben beziehen sich auf Photo Paint und Photoshop. Übrigens: Sogenannte Schullizenzen für Profi-Websoftware gibt's hier! ("Schulpreise" wählen)

Versucht Euch nun im Umgang mit einem Grafik-Programm (ladet Euch ein Foto aus dem Web herunter, z.B. die grösseren Versionen dieser Bilder).

Eine sehr einfache Gratissoftware, mit der sich Bilder ebenfalls verkleinern lassen, ist IrfanView. Wer damit zurecht kommt, umso besser - Support dazu kann ich leider nicht bieten. Ohnehin ist das ja kein Bildbearbeitungskurs - da könnte man alleine 2 Tage damit füllen. Wer also lieber die 2-3 Bilder seiner Website im Kursraum von mir verkleinern lassen will, und sie so einfügen: Einfach melden!

Versucht es in den Farben zu reduzieren, als GIF zu speichern, zu verfremden... Learning by Doing eben. Hier steht mehr dazu...

Zur Hauptseite zurück gehts hier.