Ich habe kürzlich mit den Google Developer Tools ein Audit auf meiner Website durchgeführt. Meine Bilder haben alle die gleiche Größe (500 horizontale und 300 vertikale Pixel), daher dachte ich, es wäre besser, wenn ich die Bildgrößenattribute weglasse, da keine Bildgröße berechnet werden muss, wenn sie bereits die richtige Größe hat.
Geben Sie unter Netzwerkauslastung Bildabmessungen an. Ich sehe Folgendes
A width and height should be specified for all images in order to speed up
page display. The following image(s) are missing a width and/or height:
Jetzt bin ich verwirrt. Sollte ich meinen Bildern wirklich Attribute für Breite und Höhe hinzufügen, obwohl sie bereits die richtige Größe haben? Es scheint überflüssig.
quelle
Responsive Design verwendet normalerweise keine Breiten- oder Höhenattribute
Google Development Tools ist ein Leitfaden, und Sie sollten nicht alles erzwingen müssen, was Sie auf ihrer Website lesen. Tatsächlich sind einige der Inhalte veraltet. Die meisten reaktionsschnellen Websites verwenden diese nicht
width
oderheight
weil sie möchten, dass sich die Bilder an die Bildschirmgröße anpassen und eine feste Breite und Höhe verwenden,<img>
was die Nutzererfahrung beeinträchtigen würde, und Google hat dies zu einem der wichtigsten Faktoren erklärt.CSS-Problemumgehung
Sie können sich für ein Element auf Blockebene entscheiden, das die Breite und Höhe hat. Ich persönlich würde keines verwenden, aber hier ist, was Google über die Blockebene sagt.
Ich stelle mir vor, das würde ungefähr so aussehen:
Statisches Design
.ic {width:500px;height:500px;}
Sich anpassendes Design:
Dann müssten Sie JavaScript oder eine andere Lösung verwenden, um den Blickwinkel zu erkennen und 4 verschiedene Versionen des Bildes bereitzustellen, was wiederum weniger als praktisch ist. Wenn Sie also responsives Design verwenden, würde ich sicher weitermachen und mir nicht die Mühe machen, Breite und Höhe hinzuzufügen, damit Ihre Website flüssig ist, egal auf welchem Bildschirm sie angezeigt wird.
quelle
max-width:100%;
im CSS verwendet, wenn Sie Responsive Design verwenden. Die Verwendung von Höhe und Breite würde die Skalierung und Verkleinerung der Flüssigkeit deaktivierenIch habe gerade eine ähnliche Frage zu Wordpress Stack Exchange beantwortet . Reposting hier (Admins / Moderatoren: Wenn dies nicht erlaubt ist, lassen Sie mich wissen, wie ich helfen kann).
quelle
Der Prozess läuft ungefähr so ab:
Somit werden Bild-Tags "spät" gelesen. Um die Formatierung Ihrer Seite zu berechnen, ist es jedoch eine gute Sache, die Größe des Bildes zu haben (andernfalls verwenden Browser eine "zufällige" Größe wie 1x1, 25x25, ... unabhängig davon, was der Browser programmiert hat.)
Um zu vermeiden, dass eine Seite beschädigt aussieht, bis die Bilder gelesen werden, kann der Browser durch Eingabe der Attribute width und height sofort das richtige Seitenlayout berechnen. Deshalb ist es eine gute Idee, sie dort zu haben, auch wenn sie die gleiche Größe haben.
quelle