Wie am besten Bildgröße angeben?

[francesco]

Es gibt doch im Wesentlichen drei Wege:

1. Keine Angaben verwenden:

<img src="bild.jpg" alt="Bild">

2. HTML-Attribute height und width verwenden:

<img src="bild.jpg" alt="Bild" height="200" width="100">

3. CSS verwenden:

<img src="bild.jpg" alt="Bild" style="height: 200px; width: 100px;">

- Methode 1 sollte man aus Gründen der Performance vermeiden.

- Methode 2 stört mich ein wenig, da hier Angaben zu den Dimensionen des Bildes mittels HTML gemacht werden. Hier vermischt sich die Trennung von Inhalt und Präsentation ein wenig, oder?

- Methode 3 würde ich bevorzugen.

Wie seht ihr es?

 

[Efchen]

Eindeutig ist Methode 2 die sinnvollste.
Denn hier wird gleich der Platz für das Bild reserviert, noch bevor alle Elemente der Seite geladen sind.
Wer das schonmal gesehen hat, weiß dass die Seite sonst "springt" beim Aufbau, das ist extrem störend. Auch der Qualidator mosert an, wenn man diese Angaben vergisst.

Mit der CSS-Variante kann man dieses "Springen" leider nicht vermeiden.

 

[francesco]

Eindeutig ist Methode 2 die sinnvollste.

Auch aus der Sicht "Trennung von Inhalt und Präsentation"?

Auch der Qualidator mosert an, wenn man diese Angaben vergisst.

Wen interessiert denn das? Mich nicht.

Mit der CSS-Variante kann man dieses "Springen" leider nicht vermeiden.

Schon ausprobiert oder gesehen? Wenn ja, scheint Methode 2 aus Sicht der Performance wirklich die Beste zu sein.

 

[FoXMorayn]

soweit, wie ich es weiß wird erstmal eine seite aus dem html mit dem standart css erstellt und danach mit dem benutzerdefinierten css überschrieben.
die größe eine bildes ändert sich nicht, es macht also keinen sinn diese werte ins css aus zu lagern.

 

[francesco]

die größe eine bildes ändert sich nicht, es macht also keinen sinn diese werte ins css aus zu lagern.

Warum? Eine per CSS definierte Bildgröße ändert sich doch auch nicht.

Bilder, die im HTML-Code stehen, haben ja inhaltlichen Wert. Der Inhalt wird für den Browser allerdings durch das alt-Attribut ersichtlich und nicht durch die Höhe/Breite des Bildes. Aus Sicht der Trennung von Inhalt und Präsentation ist es dann doch logischer, diese Angaben dem CSS zu überlassen, oder?

 

[Efchen]

Naja, aber was bringen Dir die besten Regeln, wenn sie einen unerwünschten Effekt haben?

Man verwendet ja auch grausamte div-Suppe, um einen Rahmen mit "runden Ecken" aus Bildern umzusetzen.

 

[FoXMorayn]

Aus Sicht der Trennung von Inhalt und Präsentation ist es dann doch , diese Angaben dem CSS zu überlassen, oder?

ganz deiner meinung, aber es störrt hier wieder nur den sinn und hat keinen praktischen nutzen die werte ins css aus zu lagern.
stiel sollte immer erst nach performanz kommen, wenn man die möglichkeit dazu hat.

 

[francesco]

@Efchen, @FoXMorayn: Aus Sicht der Performance ist Methode 2 vorzuziehen. Aus Sicht der Trennung von Inhalt und Präsentation Methode 3.

@Efchen: Schon ausprobiert oder gesehen, dass das Bild bei CSS-Ansteuerung springt?

 

[Efchen]

Ich würds jetzt nicht beschwören, bin mir aber eigentlich sicher, dass das da auch springt.

 

[sysop]

was performance angeht sind variante 1 und 2 fast ident, da bei variante 2 auch das volle bild geladen wird und dann nur verkleinert ausgegeben wird. einziger vorteil ist die reservierung des platzes beim senden an den browser. bei einer grafik mit 5 MB ist das aber kaum merkbar.

ich bevorzuge variante 4
ein thumbnail erstellen, als variante 1 ausgeben und mit einem link auf das komplette (grosse) bild versehen.

 

[francesco]

was performance angeht sind variante 1 und 2 fast ident, da bei variante 2 auch das volle bild geladen wird und dann nur verkleinert ausgegeben wird.

Nicht, wenn das Bild eine Höhe von 200 Pixel und eine Breite von 100 Pixel hat.

ich bevorzuge variante 4
ein thumbnail erstellen, als variante 1 ausgeben und mit einem link auf das komplette (grosse) bild versehen.

Im Prinzip ist das aber auch nur Variante 1. Das Springen bleibt.

 

[castshfan]

Mit der CSS-Variante kann man dieses "Springen" leider nicht vermeiden.

Falsch!

Die CSS Variante funktioniert eben so gut.

Es besteht höchstens die Möglichkeit, falls die Bildmasse in einer externen CSS-Datei ausgelagert sind, dass dann beim Laden ein kurzes Aufblitzen der gesammten Seite statt findet (bis die CSS-Datei geladen ist, was erfahrungsgemäss nur einen Bruchteil einer Sekunde dauert, selbst bei langsamen PC/Internetanschlüssen) also für den User überhaupt kein Problem.

Hier habe ich euch 4 Beispielseiten.
Das ich dafür grössere Bilddateien verwendet habe, als die Platzhalter gross sind, ist vollkommen beabsichtigt, um den Lade-Effekt der Bilder, trotz fehlendem Springen, zu demonstrieren.
1.) alte HTML-Methode
2.) CSS (Tag-Intern)
3.) CSS (ausgelagert) eine Zuweisung für alle Bilder
4.) CSS (ausgelagert) je eine separate Zuweisung für jedes Bilder (Klassen)

Aufblitzen, aber kein Springen. Die Bildkästschen füllen sich danach fortlaufend...

Grund:
HTML und CSS sind blitzschnell geladen (und werden entsprechend blitzschnell angezeigt, auch die "Platzhalter" für die Bilder und der Text/Nummerierung neben den Bildern), Bilddateien jedoch nicht, gerade bei mehreren, bis vielen Bildern und eher "schweren" Bilddateien kann das entsprechend dauern.

Man kann sich gut vorstellen, dass bei jedem Ladevorgang eines Bildes (befüllen eines Platzhalterkästchens) die Seite (der enthaltene Text, der ja sofort angezeigt wird) jedesmal "springen" würde, was aber bei allen 4 Beispielen - trotz unterschiedlicher Varianten des Platzhalters - nicht der Fall ist.