Ich habe schon vor langer Zeit gelernt, dass die Angabe von width und height für <img> elements in einem HTML-Dokument die Seitenladeerfahrung beschleunigt und verbessert und diese Praxis im Allgemeinen beibehalten hat:
Ich bin jetzt mit einer Situation konfrontiert, in der ich eine sehr große Anzahl von Bildern auf einer einzelnen Seite habe, und ich würde es vorziehen, die Dimensionen über CSS für leichtere Kontrolle und weniger repetitiven HTML-Code festzulegen:
%Vor%Obwohl dies kein sehr ernstes Problem ist, frage ich mich, ob das Deklarieren der Dimensionen in CSS die gleichen Vorteile hat wie das Deklarieren der Dimensionen in HTML oder ob es direkt in HTML gemacht werden sollte?
>Jede Einsicht wäre willkommen.
Danke
Ich denke, wenn das Stylesheet sofort verfügbar ist, werden die Bildmaße sofort auf das Layout angewendet, was der eigentliche Sinn der Übung ist.
Diese Schätzung wird von den Google-Seitengeschwindigkeitsregeln unterstützt. Sie scheinen mit der Festlegung von Bildern auf diese Weise in Ordnung zu sein (Hervorhebung von mir):
Die Angabe einer Breite und Höhe für alle Bilder ermöglicht ein schnelleres Rendering, da unnötige Reflow- und Repaints überflüssig werden.
Wenn der Browser die Seite auslegt, muss er in der Lage sein, ersetzbare Elemente wie Bilder umzuleiten. 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-Code
<img>, oder in CSS an.
Der entscheidende Unterschied zwischen der Definition von Breite und Höhe in einem Attribut (im Gegensatz zu CSS) besteht darin, dass es dann zu Daten wird und nicht zu einem Präsentationsparameter. Stellen Sie sich vor, Sie könnten ein folgendes Stylesheet verwalten:
%Vor% Dies verfilzt unnötig CSS mit Bildern. Es beschränkt auch das adaptive Layout, d. H., Sie können nicht mehr noch nicht geladene Bilder den richtigen Platz einnehmen, wenn eine ihrer Dimensionen abgeleitet wird (z. B. width: 100% ).
Beachten Sie auch CSS-Regeln wie object-fit . Verwirrung darüber, was width und heigth style properties dann meinen, kann auftreten.
Tags und Links html css image dimensions pageload