Angeben von Bildabmessungen zur Verbesserung der Browserleistung

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.

Browser laden Daten parallel herunter und versuchen, die Seite so schnell wie möglich zu rendern.

Wenn Sie die Größe nicht angeben, hat der Browser keine Ahnung, wie groß das Bild sein wird, bis der Bilddownload vollständig abgeschlossen ist.

Diese Verzögerung zwingt den Browser, das Layout neu zu zeichnen oder neu zu fließen, wodurch die Ladezeit der Seite verzögert wird.

Je mehr Bilder mit diesem Problem angezeigt werden, desto langsamer wird die Seite geladen.

Wenn Sie die Bildgrößen entweder in HTML oder CSS angeben, kann der Browser Neulackierungen und Rückflüsse von Inhalten vermeiden.

Aus diesem Grund sollten Sie immer Bildgrößen angeben. Google hat einige Tipps dazu.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Weitere Informationen zum Rendern des Browsers finden Sie unter: http://taligarsiel.com/Projects/howbrowserswork1.htm

Sie sind sich nicht sicher, wie aktuell dies ist, geben aber Einblicke in die Funktionsweise von Browsern und warum Sie beispielsweise Inline-CSS nicht zum Überschreiben von Stylesheets verwenden möchten.

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 widthoder heightweil 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.

Stellen Sie sicher, dass Sie Bemaßungen für das Bildelement oder das übergeordnete Element auf Blockebene angeben. Stellen Sie sicher, dass Sie die Bemaßungen für das Element selbst oder ein übergeordnetes Element auf Blockebene festlegen. Wenn das übergeordnete Element nicht auf Blockebene ist, werden die Dimensionen ignoriert. Legen Sie keine Dimensionen für einen Vorfahren fest, der kein unmittelbarer Elternteil ist.

Ich stelle mir vor, das würde ungefähr so ​​aussehen:

Statisches Design .ic {width:500px;height:500px;}

Sich anpassendes Design:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

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.

Ich 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).

bedeutet nicht wirklich, dass Sie Breite und Höhe im HTML angeben müssen. Dies bedeutet, dass Sie den richtigen Speicherplatz reservieren müssen und der Browser beim Laden des Bildes nicht neu fließen und die Seite neu streichen muss.

Wenn Sie die Dimensionen fest codieren, wird außerdem das Reaktionsverhalten beeinträchtigt. Wenn Ihr Layout nicht reagiert, ist dies in Ordnung. Wenn Sie jedoch eine gewisse Reaktionsfähigkeit beibehalten möchten, können Sie nur CSS verwenden, um die Ergebnisse zu erzielen.

Meistens verwenden Sie beide Breiten und max-width:100erledigen die Arbeit, aber dieser Beitrag aus dem Smashing Magazine hat eine interessante Technik: Anstatt die maximale Breite: 100% zu verwenden, können Sie The Padding-Bottom Hack verwenden :

"Mit dieser Technik definieren wir die Höhe als Maß für die Breite. Polsterung und Rand haben solche intrinsischen Eigenschaften, und wir können sie verwenden, um Seitenverhältnisse für Elemente zu erstellen, die keinen Inhalt enthalten. Weil Polsterung diese Fähigkeit besitzt können wir padding-bottom relativ zur Breite eines Elements festlegen. Wenn wir auch height auf 0 setzen, erhalten wir, was wir wollen. [...]

Der nächste Schritt besteht darin, ein Bild in den Behälter zu legen und sicherzustellen, dass es den Behälter füllt. Dazu müssen wir das Bild absolut im Container positionieren, wie folgt: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Der Prozess läuft ungefähr so ​​ab:

1. HTML-Datei lesen
2. Lesen Sie aus dem HTML-Dateikopf .css-, .js-Dateien (.js sollte NACH .css sein ...)
3. Lesen Sie IMG und Skript von der Seite

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.