it-swarm.com.de

Angeben von Bildabmessungen zur Verbesserung der Browserleistung

Ich habe kürzlich mit den Google Developer Tools eine Überprüfung meiner Website durchgeführt. Meine Bilder haben alle die gleiche Größe (500 horizontale mal 300 vertikale Pixel). Daher hielt ich es für besser, die Bildgrößenattribute wegzulassen, da keine Bildgröße berechnet werden muss, wenn sie bereits die richtige Größe hat.

Geben Sie unter Netzwerknutzung die Bildabmessungen an. Es wird Folgendes angezeigt

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. Soll 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.

10
FastElephant

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 Bild-Download 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 von diesem Problem betroffen sind, desto langsamer wird die Seite geladen.

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

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

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

Weitere Informationen zum Rendering 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 möglicherweise nicht Inline-CSS zum Überschreiben von Stylesheets verwenden möchten.

10
jeffatrackaid

Responsive Design verwendet normalerweise keine Breiten- oder Höhenattribute

Die Google-Entwicklungstools sind eine Anleitung und Sie sollten nicht alles, was Sie auf ihrer Website lesen, erzwingen müssen, da einige Inhalte tatsächlich veraltet sind. Die meisten reaktionsschnellen Websites verwenden width oder height nicht, da die Bilder an die Bildschirmgröße angepasst werden sollen und eine feste Breite und Höhe mit <img> verwendet werden sollen, was die Benutzerfreundlichkeit und Google beeinträchtigen würde hat dies zu einem der wichtigsten Faktoren erklärt.

CSS-Problemumgehung

Sie können ein Block-Level-Element verwenden, das die Breite und Höhe hat. Ich persönlich würde kein Element verwenden, aber hier ist, was Google über Block-Level sagt.

Stellen Sie sicher, dass Sie die Abmessungen für das Bildelement oder das übergeordnete Element auf Blockebene festlegen. Stellen Sie sicher, dass Sie die Abmessungen für das Element selbst oder ein übergeordnetes Element auf Blockebene festlegen. Wenn das übergeordnete Element keine Blockebene hat, werden die Dimensionen ignoriert. Legen Sie keine Bemaßungen für einen Vorfahren fest, der kein unmittelbares übergeordnetes Element 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 ohne Bedenken Breite und Höhe hinzufügen, damit Ihre Website flüssig ist, unabhängig davon, auf welchem ​​Bildschirm sie angezeigt wird.

5
Simon Hayter

Ich habe gerade eine ähnliche Frage auf Wordpress Stack Exchange beantwortet. Reposte es hier (Admins/Moderatoren: Wenn dies nicht erlaubt ist, lass es mich wissen, wie ich richtig helfen kann).

bedeutet nicht wirklich, dass Sie Breite und Höhe im HTML-Code angeben müssen. Das bedeutet, dass Sie den richtigen Speicherplatz reservieren müssen und dass der Browser beim Laden des Bildes nicht die Seite neu formatieren und neu formatieren muss.

Wenn Sie die Dimensionen fest codieren, wird das reaktionsschnelle Verhalten auf diese Weise beeinträchtigt. Wenn Ihr Layout nicht reagiert, ist es in Ordnung, aber wenn Sie eine gewisse Reaktionsfähigkeit beibehalten möchten, können Sie nur CSS verwenden, um die Ergebnisse zu erzielen.

Die meiste Zeit erledigen Sie die Arbeit mit width und max-width:100, aber dieser Beitrag vom Smashing Magazine hat eine interessante Technik: Anstelle von max-width: 100% können Sie The Padding-Bottom Hack :

"Mit dieser Technik definieren wir die Höhe als Maß für die Breite. Abstand 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 der Abstand diese Fähigkeit hat." Wenn wir die Höhe auf 0 setzen, erhalten wir das, was wir wollen.

Der nächste Schritt besteht darin, ein Bild in den Container zu legen und sicherzustellen, dass es den Container ausfüllt. Dazu müssen wir das Bild absolut innerhalb des Containers 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%;
}
2
Celso Bessa

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

  1. hTML-Datei lesen
  2. lesen Sie aus dem HTML-Dateiheader CSS- und JS-Dateien (JS sollten NACH CSS sein ...)
  3. lesen Sie img und script 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 (ansonsten verwenden Browser eine "zufällige" Größe wie 1x1, 25x25, ..., was auch immer der Browser programmiert hat.)

Um zu vermeiden, dass eine Seite beschädigt aussieht, bis die Bilder gelesen werden, können Sie mit den Attributen width und height das richtige Seitenlayout sofort berechnen. Deshalb ist es eine gute Idee, sie dort zu haben, auch wenn sie die gleichen Größen haben.

1
Alexis Wilke