Bild 1 ist das ursprüngliche Bild, ein TIFF-Bild mit einer Dateigröße von 28.588 Bytes. Es soll für das Web optimiert werden. Als mögliche Dateiformate stehen, wie schon bekannt, GIF und JPEG zur Auswahl. Da in diesem Bild neben der figürlichen Darstellung des Zebras auch ein Verlaufshintergrund zu sehen ist, wird das JPEG-Verfahren wohl das zufrieden stellendste Ergebnis liefern.
PROFITIPP: Die besten Ergebnisse – Qualität zu Größe – erreichen Sie bei Kompressionsraten
zwischen 60 und 80
Bild 2 zeigt die (relativ gesehen) beste Umsetzung der Kompression. Das Bild zeigt kaum Farbabrisse; lediglich um den Kopf des Zebras ist eine leichte Blockbildung zu erkennen. Die Dateigröße wurde in diesem Fall auf 7778 Bytes reduziert.
Bild 3 wurde ebenfalls JPEG-komprimiert, allerdings ohne Rücksicht auf die Qualität. Dies ist wieder besonders am Kopf des Zebras zu erkennen. Selbst im Verlauf treten erste Farbabrisse auf. Die Datei wurde auf 5065 Bytes komprimiert. Diese Einsparung steht aber in keinem Verhältnis zum Qualitätsverlust des Fotos.
Die rechte Spalte zeigt durchweg Bilder, die als GIF abgespeichert wurden. Auf den ersten Blick sehen Sie schon den gravierenden qualitativen Unterschied. Das liegt bei diesem Motiv hauptsächlich daran, dass das GIF-Format indizierte Farben benötigt. Das heißt die Farbpalette wird auf ein Minimum der Farben reduziert. Die Anzahl der Farben hängt von der gewählten Farbtiefe ab.
Bild 4 verfügt über eine Farbtiefe von 3 Bit, also über acht Farben. Um allerdings das gezeigte Ergebnis darstellen zu können, wurde die Datei unter Verwendung von Dithering abgespeichert. Dieser simuliert für das Auge – durch die Vermischung verschiedenfarbiger Pixel – einen höheren Farbumfang. Der Nachteil dieses Verfahrens liegt leider in der Tatsache, dass sich geditherte Dateien nicht so stark komprimieren lassen. In diesem Fall nur auf 8029 Bytes.
Bild 5 ist mit den gleichen Parametern reduziert worden – allerdings ohne Dithering. Das visuelle Ergebnis ist unbrauchbar, denn ein Bild mit einem Farbumfang wie das Ursprungsbild 1 lässt sich nun einmal nicht mit acht Farben darstellen. Im Vergleich mit Abbildung 3 ist selbst die Dateigröße von 5668 Bytes nicht überzeugend.
Bild 6 zeigt schließlich, dass selbst 256 Farben (8 Bit) ohne Dithering anscheinend nicht ausreichen, um dieses Bild – insbesondere die »glatten Flächen« wie den Verlauf – in brauchbarer Weise darzustellen. 13.250 Bytes sind das klägliche Ergebnis der Kompression. Ein Wert, der durch den Gebrauch des Dithering noch angestiegen wäre.
So lässt sich abschließend sagen, dass die Wahl des Kompressionsverfahrens immer vom Motiv des Bildes abhängig ist. Glatte Flächen in Fotos oder konstruierte Verläufe sind denkbar ungeeignet für GIFs. Wohingegen Text, Buttons mit wenigen Farben oder Abbildungen, in denen Transparenz verwendet wird, für die Verwendung des GIF-Formats ideal sind.
Wenn Sie sich aber nicht ganz sicher sind, welches Verfahren das beste Ergebnis liefert, gibt es nur eines: Testen Sie verschiedene Verfahren und Einstellungen, und vergleichen Sie die Ergebnisse. Denn auch hier gilt: Der Aufwand lohnt sich, denn Ihre Homepage wird schneller und hochwertiger.
Verwenden Sie Alternativtexte für Bilder
Machen Sie sich einfach mal die Mühe, und betrachten Sie Ihre Webseiten ohne sich die Bilder anzeigen zu lassen. Anstatt der Bilder sehen Sie jetzt rechteckige Rahmen mit einem mehr oder weniger informativen Text darin. Finden Sie sich immer noch zurecht? Eine gute Webseite sollte auch bei abgeschalteter Bildanzeige ohne Probleme benutzbar sein.
Verzichten Sie auf große Imagemaps
Imagemaps bieten die Möglichkeit, auf einem Bild mehrere aktive Bereiche zu definieren und diese mit Links zu versehen. Gerade bei größeren Bildern dauert es relativ lange, bis der gesamte Informationsgehalt sichtbar wird. Bei abgeschalteter Bildanzeige hat man hier gar keine Chance mehr.
Verwenden Sie Imagemaps deshalb nur, wenn es sich nicht vermeiden lässt. Teilen Sie größere Bilder in mehrere Abschnitte auf, und weisen Sie den Teilbildern Hyperlinks und natürlich auch Alternativtexte zu. In diesem Fall müssen sie allerdings darauf achten, dass die Unterteilungen dem Inhalt des Bildes angepasst sind.
Die Einzelteile können Sie dann problemlos in einer Tabelle positionieren. Bedenken Sie, dass die einzelnen Bildteile keinen Abstand zur Tabellenzelle haben dürfen und die Zellen keinen Abstand zueinander. Wenn Sie die Größe des jeweiligen Einzelbildes im Dialogfeld Zelleneigenschaften angeben, baut sich Ihre Seite schneller auf.
Geben Sie das Bildformat an
Dieser Rat gilt eigentlich nur für per Hand eingefügten HTML-Code, da Expression Web 2 Bilder automatisch mit den richtigen Werten versieht. Aber nichtsdestotrotz gilt: Eine Webseite wird schneller angezeigt, wenn Sie die genauen Maße der Bilder angeben (Breite x Höhe in Pixel im Dialogfeld Bildeigenschaften).
Dadurch vermeiden Sie auch, dass sich das Layout der Seite während des Ladevorgangs mit jedem neu geladenen Bild ändert, da die Bildformate dem Webbrowser schon bekannt sind. Aber achten Sie darauf, dass Sie die Größeneinstellungen eines Bildes per Hand korrigieren müssen, sobald Sie die Größe verändern, nachdem das Bild eingefügt wurde.
Vermeiden Sie mehr als eine Bildlaufleiste
Gestalten Sie Ihre Webseiten so, dass maximal eine Bildlaufleiste am Rand erscheint. Bei einfachen Seiten ist das kein Problem. Sobald Sie jedoch Framesets verwenden, sieht dies anders aus. Gehen Sie bei Ihrer Planung von einer Bildschirmauflösung von 800x600 Pixel aus, aber auch bei niedrigeren Auflösungen sollte man die Webseiten ohne große Einschränkungen nutzen können.
Hier sollten Sie besonders auf die Erhaltung der Funktionalität achten, wenn Sie für den Frame im Dialogfeld Frameeigenschaften im Feld Bildlaufleisten anzeigen die Option Nie gewählt haben.
Wenn Sie eine Tabelle an der gesamten Höhe der umgebenden Seite ausrichten, kann dies den unerwünschten Nebeneffekt haben, dass die Seite nicht vollständig im Browserfenster angezeigt wird. Diesen kleinen Berechnungsfehler des Browsers können Sie einfach kompensieren, indem Sie im Dialogfeld Tabelleneigenschaften die Höhe der Tabelle auf 96 % einstellen.
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt