Bilder großskalieren - wo wird interpoliert?
Johan
- grafik
<johan>
Ich bin gerade dabei, ein Layout zu basteln, das "grobpixelige" Grafiken enthält. Und anstatt jedesmal große Grafiken einzusetzen, die in würfelförmige Bereiche mit 30 Pixel Kantenlänge aufgeteilt sind, dachte ich mir, es sei doch clever, viel kleinere Bilder zu verwenden (mit 1/900 der Fläche) und die großzuskalieren. Es sind auch einige animierte GIFs darunter (ja, sie sind nötig, nein, ich will sie jetzt nicht verteidigen müssen), bei denen das schon eine deutliche Datenmengen-Einsparung bringt.
Ich bin mir nur nicht sicher, ob das in allen Browsern klappt. Gibt es welche, die skalierte Graphiken interpolieren? Oder werden großskalierte Bilder überall so schön grobpixelig dargestellt?
</johan>
Ich bin mir nur nicht sicher, ob das in allen Browsern klappt. Gibt es welche, die skalierte Graphiken interpolieren? Oder werden großskalierte Bilder überall so schön grobpixelig dargestellt?
Mit HTML wird meines Wissens nach nichts interpoliert. Wie sollte das auch funktionieren? Der Brwoser müsste ja dann jedes Bild auf der HTML-Seite mit den _tatsächlichen_ Bildmaßen vergleichen und entsprechend umrechnen, temporär speichern und anzeigen - eine Menge Rechenleistung ...
Gruß,
snitch
Hallo,
Mit HTML wird meines Wissens nach nichts interpoliert.
Ich nehme es doch stark an, zumindest aber skaliert. Wenn ein Bild eine Größe von 100x100px hat und auf der Webseite nun auf 170x170px gestreckt werden soll, dann muss "irgendjemand" die Bilddaten umrechnen. Ob das nun der Browser macht oder das GUI des Betriebssystems, ist mal Nebensache (ich _vermute_, das macht tatsächlich der Browser).
Und eine Umskalierung um einen nicht ganzzahligen Faktor ist kein Pappenstiel. Wenn man da einfach Pixel für Pixel stur nebeneinanderklatscht, sieht das Bild ziemlich sch... aus. Ich unterstelle daher, dass die heutigen Browser tatsächlich interpolieren, also Zwischenwerte berechnen.
Wie sollte das auch funktionieren? Der Brwoser müsste ja dann jedes Bild auf der HTML-Seite mit den _tatsächlichen_ Bildmaßen vergleichen und entsprechend umrechnen, temporär speichern und anzeigen - eine Menge Rechenleistung ...
Richtig. Aber genau das muss zwangsläufig passieren, wenn ein Bild bei der Ausgabe vergrößert oder verkleinert wird.
So long,
Martin
Wie sollte das auch funktionieren? Der Brwoser müsste ja dann jedes Bild auf der HTML-Seite mit den _tatsächlichen_ Bildmaßen vergleichen und entsprechend umrechnen, temporär speichern und anzeigen - eine Menge Rechenleistung ...
Richtig. Aber genau das muss zwangsläufig passieren, wenn ein Bild bei der Ausgabe vergrößert oder verkleinert wird.
hmm... interessantes Thema.
Ich werde das später mal in der praktischen Anwendung testen. Eine Seite mit vielen vergrößerten Bildern, müsste ja dann erheblich länger für die Darstellung benötigen ...
<johan>
So, ich habe mal einen kleinen Test dazu gebastelt. Wer also das Interpolationsverhalten seines Browsers mal ausprobieren will, kann das unter http://www.jhauser.de/test/test.html gerne probieren. Nett wäre es, das kleine Formular am Ende der Seite auszufüllen und abzuschicken, dann kriege ich einen Überblick über die verschiedenen Browser. Die Ergebnisse stelle ich dann hier online.
</johan>
Hallo Johan,
ich hab gerade mal mitgespielt.
Deine drei Beispiele sind aber für das, was du wissen willst, ungeeignet ausgewählt. Denn in allen drei Fällen treten ausgerechnet an der Grenze zwischen zwei Farbfeldern keine Rundungsfehler beim Skalieren auf.
Interessanter wäre es, wenn du die drei Bilder auf eine ganz "krumme" Größe skalieren würdest, z.B. 293x293px. Dann treten auch an den Grenzlinien Rundungsprobleme auf, und dann erst wird es interessant, wie die einzelnen Rendering Engines damit umgehen.
Ich hab's übrigens probiert: IE5.5 und FF1.0 machen dann immer noch saubere, scharfe Farbkanten ohne einen Saum mit einem Zwischenwert anzuzeigen. Nur die Größe der Einzelfelder ist dann nicht auf Pixel genau gleich groß, weil 293 nun mal nicht ohne Rest durch 3 teilbar ist. ;)
Ciao,
Martin
<johan>
Deine drei Beispiele sind aber für das, was du wissen willst, ungeeignet ausgewählt. Denn in allen drei Fällen treten ausgerechnet an der Grenze zwischen zwei Farbfeldern keine Rundungsfehler beim Skalieren auf.
Interessanter wäre es, wenn du die drei Bilder auf eine ganz "krumme" Größe skalieren würdest, z.B. 293x293px.
Hmm, danke für diesen Hinweis. Daran hatte ich nicht gedacht.
Allerdings wäre das für meinen Anwendungsfall ohnehin unerheblich, da ich da schon drauf achten würde, dass ich "gerade" Vielfache habe.
Ich hab's übrigens probiert: IE5.5 und FF1.0 machen dann immer noch saubere, scharfe Farbkanten ohne einen Saum mit einem Zwischenwert anzuzeigen.
Danke dir!
Bisher sehen die wenigen Rückmeldungen ganz positiv aus. Dann werde ich mal in die Richtung weiterbasteln.
</johan>