Fonts in Webseiten als Grafiken

1. Sparsamer Einsatz

Wenn möglich, sollten Sie Text als Text und nicht als Grafiken verwenden. Die Vorteile liegen auf der Hand: Die Seite läd' schneller (da weniger Daten zu übertragen sind) und die Fonts sind vergrößerbar/verkleinerbar (falls Sie nicht mit Pixelangaben in Styles arbeiten)
Allerdings gibt es Gelegenheiten, in denen Sie Fonts als Grafiken verwenden können, z.B. für Header oder animierte Buttons. Das ist allerdings kein Muss, denn die meisten Effekte können Sie auch mit einfachem Text in Verbindung mit Styles und DHTML erreichen.

2. Gif statt Jpeg

Speichern Sie Grafiken, die Fonts beinhalten, auf jeden Fall als .GIF ab! JPEG's sind sehr gut geeignet für die Komprimierung von Fotos, bei einfachen Schriftzügen bleiben, durch die "lossy compression" des JPEG Formats, deutliche und unschöne Artefakte sichtbar.

3. Grafiken optimieren

Viele Grafikprogramme bieten Funktionen zur Optimierung der gespeicherten Grafiken für's Web an. Nutzen Sie diese! Die einfachste Optimierung ist hierbei die Anzahl der verwendeten Farben zu reduzieren. Meist kommen Schrift-Grafiken mit 256 Farben gut aus, für einige reichen sogar 16 Farben.
Einige Grafikprogramme, wie z.B. Photoshop, zeigen dabei auch noch die ungefähren Ladezeiten der Grafiken bei unterschiedlichen Modemgeschwindigkeiten, die Sie unbedingt beachten sollten.

Generell gilt die Faustregel:
- keine Grafik sollte größer als ca. 30KB sein
- ALLE Grafiken einer Seite sollten nicht größer als ca. 100KB sein

4. Höhe und Breite angeben

Vernachlässigen Sie auf keinen Fall die HEIGHT und WIDTH Angaben im IMG-Tag! Dadurch "weiss" der Internet-Browser wieviel Platz er für die Grafik reservieren muss und die Seite ändert auch nicht bei jeder geladenen Grafik ihr Aussehen.
Da der Brauser die Seite nicht nach jeder geladenen Grafik neu rendern muss entsteht auch der Eindruck einer sehr schnell geladenen Seite.

5. Aufschreiben!

Klingt eigentlich blöd, aber denkt gar nicht wie schnell man vergisst!
Wie oft ist es schon passiert das man z.B. alle Buttons einer Seite neu machen musste, ganz einfach weil man nicht mehr genau wusste welche Schriftart in welcher Größe und welchen Effekten verwendet wurde...

Am besten schreibt man alles in einer Textdatei auf, z.B.:

"Header: ArialNarrow, 26px, schwarz, blauer Schatten mit 4px offset"

und speichert diese mit dem Webprojekt.