Sollte ich Höhen- und Breitenattribute für meine IMGs in HTML angeben?

74

Wenn ich die Höhe und Breite eines Bildes kenne, das mit einem Bild-Tag angezeigt werden soll, sollte ich die Attribute für Höhe und Breite einfügen oder die Informationen einfach in CSS einfügen? Oder beides?

Ex.

<img src="profilepic.jpg" height="64" width="64" />

oder

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />

oder

<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
html css image Josh Gibson
quelle
Mögliches Duplikat von Bildbreite / -höhe als Attribut oder in CSS?
Mike Cluck

Antworten:

85

Laut Google Page Speed sollten Sie immer die Breite und Höhe im Bild-Tag definieren. Zur Validierung können Sie jedoch nicht das Style-Tag verwenden.

Außerdem sollten Sie immer die gleiche Höhe und Breite wie das eigentliche Bild angeben, damit der Browser keine Änderungen wie die Größenänderung vornehmen muss.

Ich würde vorschlagen, es zu tun

<img src="..." height="20" width="50">

Bearbeiten: Jemand schlug in den Kommentaren vor, dass es schneller wäre, einfach keine Attribute hinzuzufügen. Laut Google (nicht, dass sie das Ende aller Browser-Kenntnisse sind):

Wenn im enthaltenen Dokument keine Abmessungen angegeben sind oder wenn die angegebenen Abmessungen nicht mit den tatsächlichen Bildern übereinstimmen, muss der Browser nach dem Herunterladen der Bilder erneut ausgeführt und neu gestrichen werden. Geben Sie die Breite und Höhe aller Bilder entweder im HTML-Tag oder in CSS an, um Rückflüsse zu vermeiden. - Lesen Sie mehr

Vorausgesetzt, Sie könnten die img-Dimensionen in CSS ausführen, aber um dies zu überprüfen, müssten Sie dies in einer CSS-Datei und nicht inline tun.

Übrigens ist Google Page Speed ​​eine Reihe von Tipps, die sich darauf konzentrieren, die Seite schneller zu rendern.

Tyler Carter
quelle
1
Die Seite wird ohne Attribute schneller gerendert.
Elzo Valugi
1
@ Elzo Laut Google heißt es, dass es wird. Lesen Sie dies: code.google.com/speed/page-speed/docs/…
Tyler Carter
6
Was ist, wenn die Bilder nicht in ihrer tatsächlichen Größe angezeigt werden sollen? Sollte ich trotzdem ihre Breite und Höhe definieren oder sollte ich vielleicht ihre angezeigte Breite und Höhe definieren? IE, wenn es ein Bild gibt, das 500 * 500 px groß ist, aber als 45 * 45 angezeigt werden soll?
Lindhe
1
@ TylerCarter Ich weiß, dass dies noch lange auf sich warten lässt, aber ich schwöre, dass W3C Fehler / Warnungen ausgelöst hat, wenn Sie Höhe und Breite nicht angegeben haben. Sie werfen keine Warnungen / Fehler mehr. Gibt es ein Update dafür?
Govind Rai
1
Verwandte Themen: "Ja. [ widthAttribut] ist nicht unbedingt erforderlich, hilft dem Browser jedoch dabei, Ihre Seite schneller und sauberer zu rendern, insbesondere in Kombination mit dem Höhenelement. Dadurch wird der nervige Sprung gestoppt, der beim Frischladen auftritt Bilder nehmen plötzlich Platz im Dokument ein und verschieben den gesamten Inhalt nach unten, wodurch der Benutzer seinen Platz auf der Seite verliert. Verwenden Sie also das Attribut width (und height) ...., um die intrinsische Höhe des Bildes zu ermitteln Datei, um die gewünschte Layoutgröße
26

Sie sollten immer das heightund das widtheines Bildes angeben , um dem Browser das Layout der Seite zu erleichtern, noch bevor das Bild heruntergeladen wurde.

Siehe 13.7 Visuelle Darstellung von Bildern, Objekten und Applets in der HTML 4.01-Spezifikation:

Die Attribute height und width geben Benutzeragenten eine Vorstellung von der Größe eines Bilds oder Objekts, sodass sie Platz dafür reservieren und das Dokument weiter rendern können, während sie auf die Bilddaten warten.

Sie werden empfohlen und sind nicht erforderlich, aber Sie sollten sie wirklich, wirklich angeben ;-)

Stellen Sie außerdem sicher, dass die von Ihnen angegebenen Abmessungen tatsächlich mit den Abmessungen des Bildes übereinstimmen.

Es gibt nichts Schlimmeres, als auf das Herunterladen einer Seite zu warten, nur weil diese 400x300(!) Bilder in Wirklichkeit eher einer 4000x3000Qualität von 95% entsprechen.

Sinan Ünür
quelle
Nach dem Testen reservieren Chrome und Safari vor dem Laden Speicherplatz. Firefox jedoch nicht.
Lulalala
5

Ja, Sie sollten die Abmessungen angeben, damit Benutzerprogramme die Größe im Voraus kennen, bevor das Bild vollständig geladen wird, damit ein Layout möglicherweise nicht fehlerhaft aussieht, wenn es sich auf die Abmessungen des geladenen Bildes stützt. Darüber hinaus, wenn Sie auf IE6 die Filtereigenschaft zu Einsatz png angewiesen sind ist Sie werden diese Dimensionen benötigen.

meder omuraliev
quelle
2
Er fragt, welche Methode zum Hinzufügen der Bildabmessungen nicht verwendet werden soll oder nicht.
MitMaro
Ich muss vergessen haben, das hinzuzufügen - es wird bevorzugt, native Attribute zu verwenden. Es gibt fast nie einen Grund, sich auf Inline-CSS zu verlassen.
Meder Omuraliev
1

Diese Antwort ist jetzt veraltet und ich würde nicht die gleiche Empfehlung aussprechen wie 2009 mit modernen Browsern.

Es spielt keine Rolle, welche Sie verwenden, aber ich würde empfehlen, nur eine zu verwenden.

Ich würde das Attribut gegenüber der CSS-Lösung empfehlen, da es besser mit älteren Browsern und Personen mit deaktivierten Stilen kompatibel ist.

MitMaro
quelle
3
? Dies wurde abgelehnt (kein Kommentar zum Warum). Ich habe es zumindest wieder auf Null gebracht. Hier ist der Grund, und diese Frage geht nicht darauf ein, aber JA - es ist sinnvoll, nur eines der Dimensionsattribute anzugeben. Dies hat mit der Skalierung von Bildern zu tun, die in einen bestimmten Container passen, und mit der Skalierung (Beibehaltung des Anteils) von Höhe und Breite. Darauf kann sich der Browser verlassen. Trotzdem sehe ich die "Richtigkeit", beides bereitzustellen, aber in einigen Situationen nur eine Dimension (so dass der Browser die andere proportional berechnen kann).
Chris Adragna
1
Ich denke, dass @MitMaro nur über die Verwendung von Stil- oder Breiten- und Höhenattributen sprach . Keine Angabe von Breite oder Höhe. Die Ablehnung war, dass alle heute gebräuchlichen Browser die Größenänderung eines Bildes mit CSS unterstützen und diejenigen, deren Stile deaktiviert sind, ohnehin keine gute Benutzererfahrung erwarten können (selbst Screenreader für Blinde verwenden das CSS).
Angry Dan
Es ist 2016 und ich bekomme immer noch ein Layout, das überall herumspringt, weil Bilder geladen werden. Wenn die Bilder widthund heightAttribute hätten, wäre dies nicht so irritierend.
Flimm
1
@MitMaro Bitte bemühen Sie sich, Ihre gültige Antwort zu improvisieren oder zu bearbeiten. Es ist richtig; Es fehlt jedoch immer noch der Inhalt, der tatsächlich benötigt wird, um Ihren Standpunkt zu rechtfertigen
Nevermore
0

Eigentlich müssen Sie sie nicht angeben. Entsprechend der w3c-Spezifikation verwenden Sie sie nur, um Standardwerte zu überschreiben, die in die Bilddatei eingebettet sind und vom Browser gelesen werden. Bei Verwendung wird das Originalbild auf bestimmte Größen skaliert, sodass durch das Einfügen ein zusätzlicher Kalkül für den Browser erstellt wird.

Die Höhen- und Breitenattribute geben Benutzeragenten eine Vorstellung von der Größe eines Bilds oder Objekts, sodass sie Platz dafür reservieren und das Dokument weiter rendern können, während sie auf die Bilddaten warten.

<img src="profilepic.jpg" alt="image" />
Elzo Valugi
quelle
Nun, ich habe gelesen, dass dies dazu beiträgt, die Ladezeit zu verbessern (egal wie viel das sein mag, unabhängig davon), wenn Sie sie einsetzen, obwohl sie nicht benötigt werden.
PositiveGuy