Bevorzugte Art der Größenangabe bei Bildern (HTML oder CSS?)

[Eddie]

Hallo allerseits,

gehe ich richtig in der Annahme, dass
   <img ... style="width:100px;height:150px">
besser ist als
   <img ... width="100" height="150">

Oder macht das keinen Unterschied?
Die Groessenangaben werden on-the-fly generiert, eine externe CSS-Datei macht darum leider keinen Sinn.

Danke euch,
Eddie

[Zeromancer]

Hallo,

gehe ich richtig in der Annahme, dass
   <img ... style="width:100px;height:150px">
besser ist als
   <img ... width="100" height="150">

was heißt besser? Angaben zu den Ausmaßen sind nicht unbedingt nötig http://edition-w3.de/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2., wenn ich die Sache richtig verstehe.

Mit freundlichen Grüßen

André

[Ashura]

Hallo Zeromancer.

was heißt besser? Angaben zu den Ausmaßen sind nicht unbedingt nötig http://edition-w3.de/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2., wenn ich die Sache richtig verstehe.

Aber empfehlenswert. Wenn man nicht gerade die Bilder skalieren lassen will, sollte man schon die HTML-Attribute verwenden.

Solange das CSS nicht geladen wird, stehen für die Bilder ansonsten schließlich keine Informationen über die Ausmaße zur Verfügung; und dann kommt es zu diesen „lustigen“ Wandereffekten der Bilder und Texte auf einer Seite, weil die Bilddimensionen erst nach und nach ermittelt werden.

Gruß, Ashura

[Zeromancer]

Hallo Ashura,

was heißt besser? Angaben zu den Ausmaßen sind nicht unbedingt nötig http://edition-w3.de/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2., wenn ich die Sache richtig verstehe.

Aber empfehlenswert.

Das steht auf einem anderen Blatt. ;-) Deshalb wäre es interessant zu wissen, was Eddie unter "besser" versteht.

Mit freundlichen Grüßen,
André

[Ashura]

Hallo Zeromancer.

Aber empfehlenswert.

Das steht auf einem anderen Blatt. ;-)

Ich weiß. ;-)

Deshalb wäre es interessant zu wissen, was Eddie unter "besser" versteht.

Da stimme ich dir zu.
Für mich bedeutet „besser“ in diesem Falle auch „verlässlicher“.

Gruß, Ashura

[Ingo Turski]

Hi,

gehe ich richtig in der Annahme, dass
   <img ... style="width:100px;height:150px">
besser ist als
   <img ... width="100" height="150">

nein. Du irrst Dich.
a) sind inline-styles nicht empfehlenswert und
b) enthälst Du die Dimensionen so nicht-CSS-fähigen Browsern vor.
Die HTML-attribute sind nicht deprecated und - wenn man keine generellen Angaben hierzu im CSS macht, würde ich diese vorziehen.

freundliche Grüße
Ingo

[Eddie]

Hallo Ingo,

cool, danke dir. In Bezug auf die Fragen von Zeromancer und Ashura werde ich also die HTML-Angaben nehmen, da sie
a) (laut dir) zuverlaessiger sind, und
b) 8 Byte kuerzer sind (das spart immerhin 12 MB Transfer pro Monat :-)

Aber noch die generelle Frage:

a) sind inline-styles nicht empfehlenswert

Warum ist das so? Immerhin ist es doch standard-konform...?

Ich habe immer noch ein paar einzelne inline-Styles uebrig, die z.B. nur einmalig auf einer Seite vorkommen koennen. Haeltst du das also fuer problematisch?

Danke nochmal,
Eddie

[Gunnar Bittersmann]

Hi Eddie,

a) sind inline-styles nicht empfehlenswert
Warum ist das so?

Wegen der (anzustrebenden!) Trennung von Struktur und Layout.

Gruß,
Gunnar

[Ingo Turski]

Hi,

Ich habe immer noch ein paar einzelne inline-Styles uebrig, die z.B. nur einmalig auf einer Seite vorkommen koennen. Haeltst du das also fuer problematisch?

gib' hierfür eine Klasse oder ID an und definiere diese im style-Bereich dieser Seite. So mußt Du auch später nicht nach irgendwelches Styles suchen.

freundliche Grüße
Ingo

[Cyx23]

Hallo Eddie,

gehe ich richtig in der Annahme, dass
   <img ... style="width:100px;height:150px">

grundsätzlich besser vielleicht nicht, aber ich habe es jetzt erstmal bei einer
Bildergalerie so gelöst, u.a. weil es dann als inline-Style die (bei jeder Seite
auch noch unterschiedlichen) wichtigen Daten beieinanderhält, so habe ich abhängig
von der Bildhöhe margin-top angepasst was mir in dem konkreten
Fall eleganter
erscheint als ein Hilfs-Div und Versuche mit vertical-align:bottom o.ä..
Es scheint auch mit den IEs ab 5.0 sehr gut zu funktionieren, liesse sich ggf.
auch per id ins externe Stylesheet übertragen, und bei richtigen Darstellungsgrössen
werden die Bilder von Browsern ohne CSS ja auch gleich 1:1 dargestellt.

<img ... width="100" height="150">
Die Groessenangaben werden on-the-fly generiert

Immer noch nicht depreciated und dazu erstmal einfacher.

Grüsse

Cyx23

[Gunnar Bittersmann]

Hi Cyx23,

<img ... width="100" height="150">
Immer noch nicht depreciated

Warum sollten sie auch?

Die Angaben sind ja weniger solche zum Layout, sondern eher Meta-Angaben zu dem Bild.

Deshalb würde ich die HTML-Attribute der Inline-Style-Angabe vorziehen.

Gruß,
Gunnar

[Cyx23]

Hallo Gunnar,

Die Angaben sind ja weniger solche zum Layout, sondern eher Meta-Angaben zu dem Bild.

Als Zusatzangabe für den Client oder so, vielleicht.

Aber ob diese Angaben wo sie sich bemerkbar machen Layoutänderungen
oder inhaltliche Unterschiede bewirken?
Schriftgrösse (erstmal als Style-Angabe, um einfach mal die Frage von
HTML und h1 aussen vorzulassen) wird als Layoutfaktor betrachtet,
Bildgrösse müßte dann wohl auch eher dazugerechnet werden selbst wenn
so skalierte Bilder unüblich sein mögen.

Deshalb würde ich die HTML-Attribute der Inline-Style-Angabe vorziehen.

Würde ich vielleicht grundsätzlich auch, aber so klar oder zwansgläufig
"richtig" scheint mir das nicht zu sein, denn es ist ja doch noch
eine zugewiesene veränderliche (Layout-)Eigenschaft, und die
Eigenschaften eines Objekts möchte ich ja auch möglichst an nur einer
Stelle beschreiben.

Grüsse

Cyx23

[Candid Dauth]

Heißa, Eddie,

gehe ich richtig in der Annahme, dass
   <img ... style="width:100px;height:150px">
besser ist als
   <img ... width="100" height="150">

Ich bevorzuge es, die gewünschten Ausmaße in Form von CSS bereitzustellen. Ich bin der Meinung, dass sie etwas mit dem Layout und nicht mit der Struktur zu tun haben, und die Tatsache, dass sie nicht deprecated sind, ist nun wirklich nicht ausschlaggebend (<b> oder cellpadding sind ja wohl auch nicht sinnvoller als CSS).

Außerdem gebe ich die Ausmaße mit min-width und min-height an, da ich sonst eine Einschränkung der Barrierefreiheit sehe: Kann/will das Bild nicht geladen werden, wird sein Alternativtext / das longdesc-Attribut (ich weiß nicht, ob es Browser gibt, die das darstellen / wie sie das darstellen) durch die Ausmaße abgeschnitten.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Ingo Turski]

Hi,

Außerdem gebe ich die Ausmaße mit min-width und min-height an, da ich sonst eine Einschränkung der Barrierefreiheit sehe: Kann/will das Bild nicht geladen werden, wird sein Alternativtext / das longdesc-Attribut (ich weiß nicht, ob es Browser gibt, die das darstellen / wie sie das darstellen) durch die Ausmaße abgeschnitten.

ich fasse mich da lieber so kurz, daß es reinpaßt. ;-)
Davon abgesehen würden dem IE diese Angaben fehlen, was zu einem unruhigen Seitenaufbau führt.

freundliche Grüße
Ingo

[Candid Dauth]

Heißa, Ingo,

ich fasse mich da lieber so kurz, daß es reinpaßt. ;-)

Naja, man hört ja doch ab und an von Leuten, die bei sich _wirklich_ überdimensionierte Schriftarten eingestellt haben… Und dann bringt das auch nichts, wenn ein A schon 100 Pixel groß ist. ;-)

Davon abgesehen würden dem IE diese Angaben fehlen, was zu einem unruhigen Seitenaufbau führt.

Jau, man muss halt mit CSS-Hacks arbeiten, wenn man den IE unterstützen will.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Ingo Turski]

Hi,

Naja, man hört ja doch ab und an von Leuten, die bei sich _wirklich_ überdimensionierte Schriftarten eingestellt haben… Und dann bringt das auch nichts, wenn ein A schon 100 Pixel groß ist. ;-)

Die dürften dann aber auch jegliches CSS deaktiviert haben, denn mit dieser Einstellung sind selbst viele ansich barrierefreien Seiten nicht mehr vernünftig nutzbar.

freundliche Grüße
Ingo

[Cyx23]

Hallo Candid,

Davon abgesehen würden dem IE diese Angaben fehlen, was zu einem unruhigen Seitenaufbau führt.

Jau, man muss halt mit CSS-Hacks arbeiten, wenn man den IE unterstützen will.

kannst du mal den Zusammenhang von Stylengaben oder Grössenangaben
zu Bildern und CSS-Hacks etwas erläutern?

Und zum Thema CSS-Hacks: Grundsätzlich sehe ich das Problem eher darin
dass CSS-Hacks nötig sind wenn man Screenreader unterstützen will,
ein Widerspruch üblicher Grundsätze zum Thema Barrierefreiheit.

Grüsse

Cyx23

[Candid Dauth]

Heißa, Cyx23,

kannst du mal den Zusammenhang von Stylengaben oder Grössenangaben
zu Bildern und CSS-Hacks etwas erläutern?
Und zum Thema CSS-Hacks: Grundsätzlich sehe ich das Problem eher darin
dass CSS-Hacks nötig sind wenn man Screenreader unterstützen will,
ein Widerspruch üblicher Grundsätze zum Thema Barrierefreiheit.

Hui, kann es sein, dass du gerade einiges durcheinanderbringst?

Meine Aussage bezog sich auf Ingos Einwand, dass meine Variante mit „min-width“ und „min-height“ den Internet Explorer kaltließe und er sich verhalten würde, als wären keine gewünschten Ausmaße angegeben. Ich stellte also fest, dass man mit CSS-Hacks dagegen vorgehen müsste und so den Internet Explorer auch ausreichend versorgen.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Cyx23]

Hallo,

Heißa, Cyx23,

kannst du mal den Zusammenhang von Stylengaben oder Grössenangaben
zu Bildern und CSS-Hacks etwas erläutern?
Und zum Thema CSS-Hacks: Grundsätzlich sehe ich das Problem eher darin
dass CSS-Hacks nötig sind wenn man Screenreader unterstützen will,
ein Widerspruch üblicher Grundsätze zum Thema Barrierefreiheit.

Hui, kann es sein, dass du gerade einiges durcheinanderbringst?

es geht z.B. darum dass Konstrukte wie ".nocss { display:none; }" zu für
Screenreader eben auch "unsichtbarem" Code führen, was vielleicht von
der Ableitung des Begriffs "Screnreader" her noch plausibel sein mag,
aber eigentlich unerwünscht ist und sich per @media aural auch nicht
regeln läßt.

Übliche Ersatzmethoden, also CSS-Hacks, funktionieren auch nicht optimal,
vgl. Barrierefrei: Webdesign für Alle / WA-Hack display:none ersetzen.

Grüsse

Cyx23