Was tun die Attribute width und height, wenn srcset und sizes verwendet werden?

Question

Wenn wir die Attribute srcset und sizes verwenden, ist es immer noch nützlich, ein src Attribut als Fallback anzugeben. Ähnlich stelle ich mir vor, dass ältere Browser auch die Attribute width und height nutzen würden, wenn sie angegeben würden. Aber moderne Browser?

Zum Beispiel:

<img 
    src="foo100x100.jpg" 
    srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w" 
    sizes="100vw" 
    width="100" 
    height="100" 
    alt="example" 
> 

Sind die width und height Attribute von Nutzen zu einem modernen Browser in diesem Beispiel?

Answer 1

Basierend auf Experimenten verhält es sich so, als ob Sie width und height CSS-Eigenschaften in Pixeln angegeben hätten. Es kann jedoch von Ihrem eigenen CSS überschrieben werden.

img { 
 
    width: 200px; 
 
    /* height will be 100px because of the HTML attribute */ 
 
}

<img 
 
    src="http://placehold.it/100x100" 
 
    srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w" 
 
    sizes="100vw" 
 
    alt="" 
 
    width="100" 
 
    height="100" 
 
>

Dies ist ein wenig enttäuschend, da ich gehofft hatte, dass moderner Browser width verwenden würde und height zu bestimmen, was das Seitenverhältnis des Bildes war vor dem Bild herunterzuladen, um zu vermeiden, das Layout des folgenden Inhalts springt beim Laden der Seite herum.