Bildgröße kommunizieren, Best Practice

11

Wenn Sie ein HTML-Dokument ausschließlich nach den aktuellen Best Practices entwickeln, um das Styling aus dem Markup herauszuhalten, wie kommunizieren Sie die Bildgröße am besten?

In der Vergangenheit wurde empfohlen, die Bildhöhe und -breite mit dem Bild so zu gestalten, dass es schneller gerendert wird als der Browser, der darauf wartet, dass das Bild heruntergeladen wird, um seine Abmessungen zu erhalten. Dies scheint jedoch gegen den isolierenden Stil des Dokuments zu verstoßen.

Fügen Sie jedem Bild ein ID-Attribut hinzu und geben Sie die Höhe / Breite in das CSS ein. Negiert dies den Rendering-Bonus von Inline-Bildhöhe und -breite?

css html images Thomas
quelle

Antworten:

12

Die Breite und Höhe im IMG-Element ist nicht veraltet und der beste Weg, um dem Browser die Breite und Höhe eines Bildes mitzuteilen. Es ist überflüssig und unnötig (und möglicherweise albern), sich die Mühe zu machen, es auf eine andere Weise zu tun. Machen Sie keine unnötige Arbeit für sich selbst oder den Browser. Halten Sie sich an die Grundlagen, die funktionieren.

John Conde
quelle
1
... und vergessen Sie auch kein ALTTag, auch wenn es leer ist oder Compliance-Prüfer sich beschweren.
Talvi Watia
@Tchalvak Sorry, aber du liegst falsch. Sie können Breite und Höhe dynamisch durch serverseitige Programmierung und / oder JavaScript überschreiben. Und nach Ihrer Logik können Sie auch Inline-Stile nicht überschreiben.
John Conde
Hoppla, es sieht so aus, als hätte ich mich geirrt, dass es sowieso kein CSS-Überschreiben gibt. !importantIn CSS können Sie die Attribute width & height überschreiben, sodass die anfängliche Verwendung von width / height gut funktioniert. Jetzt stecke ich allerdings in der Abstimmungsposition fest. Wenn Sie die Antwort bearbeiten möchten, würde ich das ändern. Achselzucken Nicht, dass es zu wichtig wäre.
Kzqai
8

Die Antwort von John Conde ist genau richtig. Bilder haben eine Breite und Höhe - es ist Teil ihres Inhalts , nicht ihres Stils . Es besteht hier also keine Notwendigkeit, eine "Trennung" vorzunehmen.

Eine Ausnahme: CSS für Bildabmessungen ist nützlich, wenn Sie viele Bilder mit derselben Größe haben (z. B. Miniaturansichten). Hier ist es viel besser, eine CSS-Klasse zu verwenden, um HTML zu reduzieren und die Entwicklung zu beschleunigen.

Für das Design einer Website mit Schaltflächen und Symbolen sind CSS-Sprites die beste Lösung.

DisgruntledGoat
quelle
+1, CSS-Sprites machen einen lächerlichen Unterschied in der Geschwindigkeit einer Site.
Kzqai