Wo Bildabmessungen für das schnellste Rendering angeben: in HTML oder in CSS?

Ich habe gelernt, dass es eine bewährte Methode ist, Bilddimensionen explizit anzugeben. Der Browser kann dann bereits die Seite gestalten, während er die Bilder selbst herunterlädt, wodurch die Seitenerstellungszeit verbessert wird (wahrgenommen) wird.Wo Bildabmessungen für das schnellste Rendering angeben: in HTML oder in CSS?

Ist das wahr? Und wenn ja, gibt es einen Unterschied bei der Angabe der Dimensionen in HTML oder CSS?

HTML: <img src="" width="200" height="100">
Inline CSS: <img src="" style="width: 200px; height: 100px">
Externe CSS: #myImage { width: 200px; height: 200px; }

Quelle

2009-12-22 Daan

Nach Google Page Speed, spielt es keine Rolle, ob Sie die Dimensionen über CSS oder HTML angeben, solange Ihr CSS die IMG-Tag selbst richtet und nicht ein übergeordnetes Element:

Wenn der Browser legt Die Seite muss austauschbare Elemente wie Bilder umlaufen können. Es kann damit beginnen, eine Seite noch vor dem Herunterladen von Bildern zu rendern, vorausgesetzt, es kennt die Dimensionen, um nicht austauschbare Elemente zu umbrechen. Wenn im enthaltenen Dokument keine Dimensionen angegeben sind oder wenn die angegebenen Dimensionen nicht mit denen der tatsächlichen Bilder übereinstimmen, benötigt der Browser nach dem Herunterladen der Bilder einen Reflow- und Repaint-Vorgang. Um Reflows zu verhindern, geben Sie die Breite und Höhe aller Bilder entweder im HTML-Tag oder in CSS an.

Beachten Sie jedoch, dass sie raten, nicht das Bild mit diesen Dimensionen, um die Größe, dh immer die realen Dimensionen verwenden:

nicht Breiten- und Höhenangaben Verwenden Sie Bilder on the fly zu skalieren. Wenn eine Bilddatei tatsächlich 60 x 60 Pixel groß ist, legen Sie die Abmessungen im HTML- oder CSS-Format nicht auf 30 x 30 fest. Wenn das Bild kleiner sein muss, skalieren Sie es in einem Bildeditor und legen Sie die Abmessungen entsprechend fest (weitere Informationen finden Sie unter Bilder optimieren.)

Quelle

2009-12-22 15:34:09 Wookai

Dies ist die Art von Antwort, die ich suchte. Aber gilt das von Google nur für Chrome oder andere Browser? – Daan

Google unterscheidet nicht zwischen Browsern. Noch nie. –

Ich kann nicht für sie sprechen, aber ich denke nicht, dass sie zwischen Browsern unterscheiden würden. Google Page Speed zielt darauf ab, das gesamte Internet und für alle Benutzer zu beschleunigen, so dass die Beratung ihres Browsers (der einen sehr geringen Marktanteil hat) nicht sehr nützlich wäre ... – Wookai

Ich denke, CSS Ihnen mehr Flexibilität gibt: Sie können die Breite oder Höhe gezielt eingestellt, während die andere Dimension Einstellung zu auto. Aber wenn ich beide Dimensionen einstelle, merke ich nicht, dass es einen Unterschied gibt.

Quelle

2009-12-22 15:30:26

Eigentlich können Sie das auch mit HTML tun, indem Sie ein Attribut weglassen! Allerdings gibt Ihnen CSS mehr Flexibilität, indem Sie auch "min-width", "max-height" usw. verwenden können. – bobince

Wenn Sie in den meisten Browsern nur eine Dimension festlegen, ist die andere standardmäßig automatisch. –

Ich tendiere dazu, es in der CSS zu tun. Dies ist sicherlich ein Gewinn, wenn es mehrere Bilder mit den gleichen Dimensionen gibt (so können Sie Sachen wie .comment img.usergroup { width: 16px; height: 16px; } machen), und die gleichen Bilder können in verschiedenen Stylesheets skaliert werden, wie vom Benutzer wählbare Themen.

Wenn Sie völlig unabhängige Bilder haben, die auf der Website nur einmal verwendet werden, ist es nicht wirklich sinnvoll, ihre Größe zu CSS zu abstrahieren, so dass die HTML-Version dort wahrscheinlich geeigneter wäre.

Quelle

2009-12-22 15:30:47 bobince

"haben die gleichen Bilder Skalierung in verschiedenen Stylesheets" - buchstäblich die gleichen Bilddateien? Findest du nicht, dass sie in IE ein bisschen Müll aussehen? –

Dies ist aus Sicht der Codierung/Pflege sinnvoll, aber in diesem Fall interessiert mich die Rendering-Performance: Welche Methode bringt die Seite am schnellsten rendern? – Daan

@Paul: nicht unbedingt; Einige Bilder wie einfache Blockfarben-GIFs könnten speziell skaliert werden. Plus in IE7 + erhalten Sie optional bikubische Interpolation, so dass anderes Material nicht schlecht aussehen muss. @Daan: Es wird keinen messbaren Unterschied geben. In verschiedenen Browsern kann der HTML- oder CSS-Code theoretisch einen direkteren Pfad zum Renderer haben (in Firefox ist es das CSS), aber der Unterschied ist mehr als winzig. – bobince

Wenn Sie ein großes Bild in eine HTML-Seite ohne Abmessungen einfügen, sollten Sie auf jeden Fall feststellen, dass sich das Seitenlayout beim Herunterladen des Bildes verschiebt (über eine Internetverbindung, wenn nicht lokal).

Wie andere Antworten, macht es keinen großen Unterschied, ob Sie dies im HTML oder CSS tun.

Quelle

2009-12-22 15:30:52

Viele Browser haben gewonnen mache nichts, bevor das CSS trotzdem analysiert wird. Sicher wird das CSS vor Bildern herunterkommen. (Siehe "Flash of unstyled content" zur Diskussion darüber, wann das nicht passiert.) – bobince

Ja, das stimmt. –

Dies beantwortet Ihre Frage nicht direkt, aber ich würde mich nicht auf die Abmessungen Ihres Bildes für das Seitenlayout verlassen. Stattdessen fügen Sie das Bild in ein Block-Level-Element ein. Dies entlastet sowohl das HTML als auch das CSS davon, Informationen speichern zu müssen, die es wirklich nicht haben sollte, da sich das Bild von Zeit zu Zeit ändern kann.

Quelle

2009-12-22 15:33:47

Wo Bildabmessungen für das schnellste Rendering angeben: in HTML oder in CSS?

Antwort

Verwandte Themen