Automatische Anpassung einer Homepage an die Auflösung

[Der Martin]

Hallo,

Aber ich habe ja die Grafiken für 1280*1024 optimiert

was heißt "optimiert" in diesem Fall? Auch wenn ich ein flexibles Layout mache, bin ich normalerweise bestrebt, die Grafiken _nicht_ zu skalieren. Wenn sich die Größe des Browserfensters ändert, rücken sie einfach dichter zusammen oder weiter auseinander, und die Flächen dazwischen oder die Textbereiche werden dabei größer oder kleiner. Das geht natürlich nur so weit, bis die Textboxen ein gewisses Mindestmaß erreicht haben, das sich nicht weiter stauchen lässt. Diese Mindestgrößen kann man mit min-width bzw. min-height festlegen (in diesem Fall vorzugsweise in em, nicht in px). Verkleinert man das Fenster weiter, erscheinen entweder Scrollbalken, weil das Layout nicht weiter nachgibt, oder Blöcke, die bei ausreichender Breite nebeneinander stehen sollen, rutschen dann untereinander. Das kann man bespielsweise durch Floaten der Bereiche hinkriegen.

Egal wie - das Layout sollte so locker gestaltet sein, dass es "Reserven" zum Verkleinern oder Dehnzonen zum Vergrößern bietet.

und wenn sie kleiner werden, verpixeln sie ja nicht.. oder doch?

Oder doch.  ;-)
Das ist ein grundsätzliches Problem beim Skalieren von Grafiken, und es ist nahezu unabhängig davon, ob man sie vergrößert oder verkleinert. Wass soll denn ein Skalierungsalgorithmus tun, wenn er die Information von 4 Pixeln auf 3 Pixel reduzieren muss? Aus WWBW (Abstraktion: W=white, B=black) wird beispielsweise WBW, dann verschiebt sich die Geometrie ein bisschen, die Farben bleiben aber rein. Oder es wird zu WGG (G=gray), wenn man die Pixel des neuen Bildes als gewichtete Mittelwerte der ursprünglichen Pixel berechnet. Dann stimmt zwar die Geometrie, aber die Farben an den Konturen verwischen ein bisschen.

Tatsächlich sind gut gemachte Algorithmen eine Mischung aus beiden. Um ein gutes Ergebnis zu erzielen, muss man das Original-Bildmaterial analysieren und beispielsweise Kanten, gleichfarbige Flächen oder fließende Übergänge erkennen und je nach Situation unterschiedlich behandeln.
Viele Grafikprogramme haben solche relativ aufwendigen Algorithmen, die Rendering Engines der Browser eher nicht. Deswegen wird generell empfohlen, Bilder bereits im Grafikprogramm auf die Größe zu bringen, die sie auf der Webseite haben sollen, anstatt die Skalierung dem Browser zu überlassen.

So long,
 Martin