Bilder mit CSS skalieren und die Darstellung im Browser

Vielleicht dem ein oder anderen schon aufgefallen, möchte ich zukünftig mehr Bildmaterial verwenden und auch die ein oder andere Illustration. Eigentlich war ich zuversichtlich, die Bilder größer als ich sie brauche anzulegen, um sie anschließend vom Browser auf die endgültige Größe herunterskalieren zu lassen. Auch mit Blick in die Zukunft und immer größer und feiner werdenden Auflösungen bzw. Displays, macht das mehr als Sinn. Allerdings habe ich da wohl die Leistung aktueller Browser überschätzt.

Verschiedene Browser, verschiedene Betriebssysteme oder eine Kombination aus beidem, führen zu unterschiedlichsten Ergebnissen. OSX arbeitet mit sämtlichen Browsern sehr sauber. Vermutlich greift Quartz hier ein und glättet das Bild. Windows-Systeme variieren stark. Seltsamerweise arbeitet Opera auf Windows-System sehr sauber und sticht hier Firefox und IE deutlich aus.

Im Bild zu sehen einmal Firefox auf dem Mac, einmal Windows PC. Wer da unsauber arbeitet ist mir noch nicht ganz klar. Es scheint, dass sowohl Browser als auch OS da ihre Finger im Spiel haben. Bei normalen Fotos hält sich die fehlerhafte Darstellung in Grenzen, bei solchen Vektor-Illustrationen jedoch, kommt es zu doch sehr hässlichen Treppeneffekten. Ob Windows Vista ähnlich gut wie OSX arbeitet kann ich leider nicht testen. Ich habe eine Test-Seite mit 2 Bildern erstellt, zum Vergleichen verschiedener Browser/OS.