Eisenach im Internet

[Michael Schröpl]

Hi Andreas,

außerdem habe ich das Gefühl das die Grafiken schlecht komprimiert
sind, da es selbst bei DSL sehr lange dauert.

auf solche Vorlagen steige ich gerne ein (auch bei mir hat das Laden
nämlich irre lange gedauert, trotz Firmen-Standleitung ... Mozilla
schafft die Seite buchstäblich überhaupt nicht anzuzeigen).

Nehmen wir mal der "Eisenach"-Schriftzug links oben.

Erstens ist dieses Bild als Datei 535*69 Pixel groß (und 13036 Bytes
"schwer") - der Schriftzug macht aber gerade mal 236 * 64 Pixel Fläche
aus, den Rest kann man rechts einfach wegschneiden.
Na gut, das kostet nur ein paar Prozent Dateigroße (nun 12295 Bytes),
weil die rechte Hälfte einfarbig weiß ist und das Bild GIF-komprimiert.

Zweitens ist nun aber genau _dafür_ GIF als Format eine Katastrophe.
Der Schriftzug enthält 251 verschiedene Farben - offenbar ist er in
irgend einem anderen Format erstellt und dann nach GIF konvertiert
worden. Dabei liegen kau irgendwo gleichdarbige Punkte nebeneinander,
die GIF-typische Komprimierung bleibt also praktisch wirkungslos.
(Naja, das Original ist als Bitmap 29.5 KB groß, aber Faktor 2 ist
für GIF schon eine herbe Enttäuschung.)
Nehmen wir also mal PNG, dann schrumpft das Bild schon auf 10658 Bytes.
Das ist schon 18% weniger als das Original - und womöglich wäre es noch
besser gegangen, wenn der Zwischenschritt mit der Konvertierung nach
GIF und der damit verbundenen Reduzierung auf 256 Farben nicht gewesen
wäre. PNG braucht diese Beschränkung nämlich nicht.

Aber ein solches Farbverlaufsbild will natürlich als JPEG gespeichert
werden. Und wie zu erwarten war, geht das ganz wunderbar mit 3050
Bytes - nur 23,4% des Originals!
Seien wir fair und addieren knapp ein KB für die beiden HTTP-Header,
dann ist der Traffic von 14 auf 4 KB und damit um Faktor 3.5 gesunken.

JPEG geht natürlich nicht transparent auf diesem grauen Hintergrund-
streifen. Aber ob ich für einen solchen optischen Gag Faktor 3.5
opfern würde (wahrscheinlich läßt sich diese Hintergrundfarbe bei
pixelgenauer Positionierung mühelos in das Bild hinein übertragen),
das ist eine andere Frage.

Vor allem für die Navigation, das sieht aus wie normale Textlinks,
sind aber alles Grafiken. Die meisten könnte man durch Text
ersetzen, ohne das man das merkt

Die diversen kleinen Bildchen sind in der Tat schauerlich, aber nicht
das eigentliche Problem (siehe unten).

Der Button "Wirtschaft" ist zwar "nur" 1022 Bytes groß. Aber er ist

• genau wie der Stadtname - ein GIF, und noch dazu eines mit einem
  Farbverlauf (was mir als Betrachter völlig verborgen bleibt). In die-
  sem miniwinzigen grünen Wort stecken 123 verschiedene Grüntone drin!
  Antialiasing schön und gut, aber muß das in diesem extremen Maße sein?
  Als JPEG wären es noch 684 Bytes, als GIF mit nur noch 16 Farben und
  praktisch unveränderem Aussehen 434 Bytes.
  PNG ist bei so kleinen Bildern generell nicht so nützlich und hier
  tatsächlich etwas größer (458 Bytes).
  Aber natürlich löst man so etwas mit CSS in weniger als 100 Bytes.

Absolut sensationell finde ich die Unterstreichung, die oben links
unterhalb von "Highlight" eingeblendet ist. Da kommt man nie drauf,
wie die realisiert ist: Das ist ein Bild, ein 1*1 pixel großer
schwarzer Punkt, der mit width auf 90 Pixel Breite gezogen wurde!
Und es kommt noch besser: Dieses Bild ist (fast) das einzige JPG der
gesamten Navigation! Hier, wo nun wirklich GIF das Mittel der Wahl
gewesen wäre (34 Bytes würden ausreichen), wird ein JPG mit 631 Bytes
verwendet.

Toll auch der graue "Aktuell"-Schriftzug links. Spontan würde man ja
sagen: Weiß und grau, also wohl ein GIF? Weit gefehlt: 57 verschiedene
Graustufen und ein JPG mit 4959 Bytes! Schon die Konvertierung nach
PNG reduziert das verlustfrei auf 3219 Bytes, die Beschränkung auf 16
Farben läßt 772 Bytes übrig bleiben (bei nur unwesentlich geändertem
Aussehen - die Farbpalette ließe sich aber anpassen), und selbst 1 Bit
Farbtiefe und dann nur noch 309 Bytes würde den Effekt IMHO nicht
dramatisch ändern. Faktor 6 bis 12 ist hier also herauszuholen.

Genug gemeckert - lasset uns zusammenzählen, was der geschachelte
Frameset dieser Startseite alles lädt:

30427 Bytes in  4 HTML-Dokumenten (mit sehr viel Luft übrigens)
  3710 Bytes im Stadtwappen (leidet bei 16 Farben, aber 62% kleiner)
 30064 Bytes in 14 Bildern aus dem Kopfzeilen-Frame (fast alle klein,
       der Eisenach-Schriftzug macht knapp die Hälfte davon aus)
  1117 Bytes in  4 Bildern aus dem Mini-frame unterhalb des Schriftzugs
 74355 Bytes in  5 JPG-Fotos aus dem scrollaren Highlight-Frame
       (Format okay, aber keines der fünf Bilder ist nach dem Laden
       sichtbar - alle sind erst durch Scrollen erreichbar!)
  4959 Bytes im Hintergrundbild des Navigations-Frames links
 24650 Bytes Overhead für die HTTP-Header (29 * 850 Bytes)

169282 Bytes

Ein 64-KBit-ISDN-Anschluß braucht dafür im allergünstigsten Fall 21
Sekunden! Das ist viel zu lang.
Und 46% des Datenvolumens steckt in den Fotos innerhalb des Scroll-
Bereichs, die der Benutzer erst mal überhaupt nicht sehen kann! Da
wären wohl eher thumbnails angesagt.

Viele Grüße
      Michael
(der vorhin noch für seine eigene Site Bilder optimiert hat,
 also gerade "in voller Fahrt war" ...)

P.S.: Ein echtes "Highlight" sollte nicht unerwähnt bleiben:

<center>
<img src="../../../grafik/ueberschriften/highlight.gif" width=100 height=30 border=0 alt="Highlight">
<br><br>
</center>

<center>
<center>

... einiges ausgelassen ...

<td align="center" valign="middle" width="870" colspan="2">
                <p align="left"><font face="Arial,Helvetica"><span style="font-size:10pt;">                                                                  
   </span><a href="bibo2.htm"><span style="font-size:10pt;">Weitere Informationen</span></a></font></p>
 </td>

Falls sich jetzt noch jemand wundert, wo hier die Bandbreite
verschwendet wird ...

Der Link hierzu heißt passenderweise:
   http://www.eisenach.de/deutsch/aktuell/seiten/highlight.htm