Attributo width
L'attributo width imposta la larghezza dell'immagine,
che è definita dal tag
img.
Attualmente, questo attributo è consentito
solo per immagini,
iframe,
video
e alcuni altri tag.
È consentito specificare valori in pixel o percentuali. Se la dimensione è impostata in percentuale, sarà calcolata rispetto alla larghezza dell'elemento genitore. Se la dimensione è impostata in pixel, le unità di misura non vengono specificate.
Se per un'immagine non sono impostate né la larghezza, né l'altezza, l'immagine avrà la sua dimensione reale. Se è impostata l'altezza, l'immagine avrà l'altezza specificata, mentre la larghezza si adatterà in modo che le sue proporzioni non vengano distorte. Se è impostata solo la larghezza, analogamente, l'immagine si adatterà in altezza in modo da mantenere le proporzioni. Se sono impostate sia la larghezza che l'altezza, le proporzioni dell'immagine potrebbero essere distorte (o forse no, chi lo sa). Se la larghezza o l'altezza (o entrambe) sono maggiori della dimensione reale, l'immagine verrà ingrandita, ma perderà in qualità.
Si consiglia di impostare la larghezza e l'altezza delle immagini negli attributi - in questo caso il browser caricherà le immagini più velocemente - non ha bisogno di calcolare le dimensioni di ogni immagine dopo averla ricevuta.
Non è consigliabile ridurre le dimensioni reali
dell'immagine senza necessità. Ad esempio,
la dimensione reale di un'immagine è 1000 per 1000
pixel, ma le si imposta una larghezza di 100px.
In questo caso, l'immagine sullo schermo apparirà
di 100 pixel, ma avrà una dimensione
di mille pixel e, di conseguenza, si caricherà
molto più lentamente.
Per esempi pratici, guarda qui:
tag img.
