Setzen Sie Bilddimensionen mit CSS als "gut", wenn Sie sie in HTML setzen?

Question

Als ich vor sehr langer Zeit HTML lernte, wurde mir gesagt, dass es wichtig ist, die Dimensionen Ihrer Bilder immer in Ihrem HTML zu setzen, damit Browser eine leere Box zeichnen können, wohin das Bild gehen soll, um Ihre Seite zu rendern , und laden Sie dann die Bilder herunter und rendern Sie, wo sie hingehören. Wenn Sie für Ihre Bilder keine Werte für Breite und Höhe festgelegt haben, müsste der Browser zuerst die Bilder herunterladen, um deren Abmessungen zu ermitteln, und das Laden von Seiten für Personen mit schlechten Verbindungen verlangsamen.

In den letzten paar Jahren habe ich CSS benutze ich eine width und height Erklärung in meiner img-Tags in meinen HTML immer setzen. Meine Frage ist, ist das Festlegen von Breite und Höhe im Stylesheet und nicht mehr das Hinzufügen dieser HTML-Attribute, genauso gut? Es macht sicherlich mein spartanisches HTML ohne sie noch sauberer aussehen.

Answer 1

eine gute Frage Dies ist geliefert werden, aber es ist ein wenig subjektiv und kann zu mehr Diskussion führen als wird generell auf SO hingewiesen.

In den 90er Jahren waren Browser langsam, und so war das Internet. 56k brauchte eine Weile, um mittelgroße Bilder zu übertragen. Während dieser Zeit wurde das Layout an das Bild angepasst.

Schneller Vorlauf ein Jahrzehnt, und Internetgeschwindigkeiten sind viel schneller, Renderzeiten sind viel schneller. Menschen sind an Layouts gewöhnt, die sich in der ersten halben Sekunde des Seitenladens ein wenig verändern. Es ist nicht schlecht zu nicht eine Bildgröße angeben, solange Sie verstehen, das Layout der Seite kann während des Ladens verschieben.

CSS wird analysiert, bevor die Seite geladen wird. Die Angabe der Höhe & Breite in CSS funktioniert genauso gut wie die Angabe inline.

Eine Sache zu beachten ist, dass Inline-Stile (und das umfasst Höhe und Breite Deklarationen) immer Trumpf CSS in Spezifität. Wenn Sie die Höhe und Breite von Bildern inline angeben, müssen Sie möglicherweise auf jeder Seite, auf der ein Bild vorhanden ist, zurückgehen, wenn Sie die Größe der Bilder anpassen möchten.

Persönlich würde ich vorschlagen, CSS zu verwenden, wie es alle Ihre Stile an der gleichen Stelle hält.

Answer 2

Ich denke der einzige Unterschied ist, dass css kann (yeah es ist möglich!) Nicht gelesen werden, so Attribute verwendet werden. Aber ich bin mir nicht sicher, ich werde das überprüfen.

EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/

Answer 3

Ja, diese Eigenschaften in CSS Einstellung genauso gut funktionieren.

Ich weiß nicht, dass es die Seiten-Rendering-Geschwindigkeit in irgendeiner Weise jedoch beeinflusst. Der kleine Effekt, den es hat, ist, dass das Layout, das von dem Bild abhängt, so lange auf der Seite herumspringt, bis das Bild geladen wird, und all den Platz zuweist, den es schließlich bekommt.

Dies ist keine Praxis, die ich selbst befolge.

Answer 4

hat eine ähnliche Frage bereits hier diskutiert und beantwortet:

Image width/height as an attribute or in CSS?

Es sollte inline definiert werden. Wenn Sie das Img-Tag verwenden, sollte das Bild einen semantischen Wert für den Inhalt haben, weshalb das alt Attribut für die Überprüfung erforderlich ist.

Wenn das Bild ein Teil des Layout oder eine Vorlage sein soll, sollten Sie einen Tag außer dem img-Tag verwenden und das Bild als CSS Hintergrund der Element zuordnen. In diesem Fall hat das Bild keine semantische Bedeutung und daher benötigt das Attribut alt nicht. Ich bin ziemlich sicher, dass die meisten Bildschirm Leser nicht einmal wissen, dass ein CSS Bild existiert.

Dies ist auch hilfreich:

Wenn es Teil Ihrer Website-Vorlage ist, ich es in der CSS-Datei platzieren würde.

Wenn es nur auf einer Seite ist, sollte es Inline sein (oder in einem Block von seitenspezifischen CSS an der Spitze definiert).

Answer 5

Das von Ihnen erwähnte Problem, dass das Bild nicht sofort heruntergeladen wird, gilt auch für Ihr CSS.

Der Unterschied ist, dass ohne den Rest des CSS das gesamte Layout nicht sinnvoll ist. Mit anderen Worten, wenn der Rest des CSS nicht geladen wurde, wird die Tatsache, dass die Bilddimensionen ebenfalls fehlen, nicht wirklich auffällig.

So persönlich denke ich, es ist in Ordnung, die Dimensionen in das CSS zu setzen.

Answer 6

Während Sie CSS verwenden können, um das Layout zu bereinigen, sollten Sie das Problem beheben, wenn Ihr Layout durch die Unfähigkeit, ein einzelnes Bild zu laden, versagt.

Moderne Layouts sollten von divs und CSS, Bilder im Layout gesteuert werden sollte nur in Form eines background-image:

Answer 7

Der Grund dafür, die Dimensionen am Tag immer in den HTML-Code zu setzen, lag an den Ladezeiten - bei einem 14.4K-Modem würden selbst relativ kleine Bilddateien merklich geladen, nachdem das HTML-Hauptdokument geladen wurde.

In diesen Tagen ist dies viel weniger ein Problem. Wenn es sich hierbei um ein Problem handelt, sollte darauf hingewiesen werden, dass eine CSS-Datei nach dem Haupt-HTML-Dokument geladen wird. Wenn Sie also nur Ihre Dimensionen angeben, kann dies zu Problemen führen. CSS-Dateien sind jedoch in der Regel ziemlich klein minimiert. Der andere Punkt ist, dass HTML-Design der alten Schule sehr auf das Layout ausgerichtet war, und Bildgrößen waren oft ein kritischer Teil davon - wenn die Bilder die falsche Größe hatten, wäre das Layout der ganzen Seite oft völlig falsch .

Modernes Seitendesign nähert sich die Dinge sehr unterschiedlich an, indem es minimale Layout-Informationen in das HTML einfügt und alles auf das Stylesheet abstrahiert. Daher wird auf einer typischen modernen Site, bis die Stylesheets geladen sind, die Site nur eine Reihe von Blöcken sein und vollständig im Design fehlen. Tatsächlich sind oft die Grafiken selbst - nicht nur ihre Dimensionen - im Stylesheet definiert.

Also die Antwort ist, dass, um moderne Seitenentwurfsmethoden zu folgen, Sie es in das Stylesheet einfügen sollten.

Offensichtlich ist es heutzutage für die meisten Websites wichtig, dass die Stylesheets schnell geladen werden, aber es wirkt sich nicht nur auf die Größe der Grafiken aus.