it-swarm.com.de

Verwirrt über fehlende Breiten- und / oder Höhenattribute

Also habe ich meine Seite auf https://gtmetrix.com getestet und es hieß:

The following image(s) are missing width and/or height attributes.

Das verwirrt mich, denn die Bilder selbst haben bereits die richtige Breite und Höhe. Warum sollte ich diese Attribute hinzufügen?

1
William Edwards

Durch Hinzufügen der Attribute height und width zu Ihrem IMG SRC-HTML-Tag kann der Browser feststellen, wie viel Platz für ein Bild verbleibt. Ohne diese Werte gibt der Browser einem Bild erst dann Platz, wenn das Bild geladen wurde. Dies bedeutet, dass alles, was das Bild umgibt, angepasst wird, nachdem das Bild geladen wurde. http://www.computerhope.com/issues/ch001158.htm

5
user29671

Der Browser fordert dies an für die Leistung. Angenommen, Sie haben einen Textabschnitt mit einem Bild von 100 x 100 Pixel in der oberen linken Ecke.

  • Browser Builds Die Seite, noch kein Bild, also wird sie nur mit Text erstellt
  • Das Bild wird jetzt geladen, und plötzlich wird Speicherplatz benötigt
  • Browser neu erstellt die Seite mit dem richtigen Platz für das Bild

Wenn Sie dem Bild Breite und Höhe geben, sieht das so aus:

  • Browser builds die Seite, noch kein Bild, hat aber Größen, so dass es mit der richtigen Freigabe erstellt wird.
  • Das Bild wird nun geladen und in den reservierten Halter gelegt

Es spart den Wiederaufbau. Ein Neuaufbau dauert etwas, was auf mobilen Geräten bemerkt werden kann. Es kostet auch ein wenig Leistung, Speicher und CPU, die auf mobilen Geräten begrenzt sind. Im obigen Beispiel ist es nur 1 Bild, aber wenn Sie 20 Bilder haben, werden Sie dies bemerken.

Der schwierige Teil ist, wenn Sie auch reagieren möchten, dann ist es manchmal nicht sehr bequem, eine Größe hinzuzufügen. Ich tendiere dazu, so viel wie möglich hinzuzufügen, ohne mich einzuschränken (z. B. manchmal nur eine Höhe/Breite, manchmal keine).

4
Martijn

Die Nachricht...

The following image(s) are missing width and/or height attributes.

... bedeutet, dass dem Image-Tag Werte für width und height zugewiesen werden sollen, die dann zum Erstellen eines Platzhalters verwendet werden, bis das Image geladen wird.

Ihr HTML-Code für Ihr Bild sieht wahrscheinlich so aus:

Verwenden Sie den folgenden HTML-Code für Ihr Bild, um dieses Problem zu lösen:

<img src="whatever.jpg" alt="picture of something" width="xxx" height="yyy">

Ersetzen Sie xxx und yyy durch die tatsächliche Breite und Höhe des Bildes in Pixel. Wenn Sie falsche Werte verwenden oder die Werte weglassen, wird der Browser erneut gezeichnet, was für Laien eine etwas längere Wartezeit bedeutet, bis die Seite vollständig geladen ist.

Wenn Sie versuchen, das Bild für ein ansprechendes Design anzupassen, und Sie mit der Verwendung von Javascript einverstanden sind, erstellen Sie damit ein Bild-Tag und stellen Sie die Eigenschaften des Bildes entsprechend ein, einschließlich der Größe des Bildes. Fügen Sie dann das Bild einem anderen Element auf dem Bildschirm hinzu . Hier ist ein Code, der Ihnen den Einstieg erleichtert:

<div ID="box"></div>
<script type="text/javascript">
mywidth=100; 
myheight=100;
mypicture="some_image.jpg";
mainbox=document.getElementById('box');
i=document.createElement('IMG');
i.style.width=mywidth+"px";
i.style.height=myheight+"px";
i.src=mypicture;
i.alt="picture";
mainbox.appendChild(i);
</script>

Ersetzen Sie einfach die Werte mypicture, mywidth und myheight durch die URL des eigentlichen Bildes und die korrekte Breite und Höhe des Bildes.

0
Mike