HTML <img> attributo width
Definizione e uso
width l'attributo determina la larghezza dell'immagine in pixel.
Suggerimento:specificare per l'immagine height e width l'attributo è una buona abitudine. Se si impostano questi attributi, si può riservare spazio per l'immagine durante il caricamento della pagina. Senza questi attributi, il browser non può sapere la dimensione dell'immagine e non può riservare lo spazio adeguato, quindi la layout della pagina cambia quando l'immagine si carica. (Di seguito si spiega in dettaglio questo punto di vista).
Suggerimento:non utilizzare height e width l'attributo per ingrandire l'immagine. Se si utilizza height e width Se si utilizza l'attributo per ridurre l'immagine, l'utente deve scaricare immagini ad alta risoluzione (anche se l'immagine sembra piccola sulla pagina). Il metodo corretto è quello di ridurre la dimensione dell'immagine con il software prima di utilizzarla nella pagina web.
Leggi di più:Spiegazione dettagliata degli attributi height e width
Esempio
Un'immagine di 600 pixel di altezza e 500 pixel di larghezza:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintassi
<img width="pixels">
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| pixels | Definire la larghezza dell'immagine in pixel (ad esempio width="100"). |
Più esempi
Modificare la dimensione dell'immagine - Creare immagini di riempimento
Gli attributi height e width hanno una caratteristica nascosta: non è necessario specificare la dimensione effettiva dell'immagine, quindi questi valori possono essere più grandi o più piccoli della dimensione reale. Il browser regolerà automaticamente l'immagine in modo che si adatti alla dimensione riservata. Con questo metodo, è possibile creare facilmente anteprime di immagini grandi e ingrandire immagini molto piccole. Tuttavia, è necessario notare che il browser deve ancora scaricare l'intero file, indipendentemente dalle dimensioni finali dell'immagine visualizzata, e se non viene mantenuta la proporzione originale di altezza/larghezza, l'immagine potrebbe subire distorsioni.
Un'altra tecnica per utilizzare gli attributi height e width è quella di riempire facilmente un'area della pagina, migliorando al contempo le prestazioni del documento. Immaginatevi di voler inserire una striscia colorata nel documento. Non è necessario creare un'immagine di dimensioni complete, bensì creare un'immagine di 1 pixel di larghezza e altezza e assegnare al suo interno il colore che si desidera utilizzare. Poi, utilizzare gli attributi height e width per espanderla a dimensioni più grandi.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Ecco l'effetto di questo pezzo di HTML, la striscia di colore è stata creata con un'immagine di un solo pixel:
Uso dei valori percentuali
Un'ultima tecnica per utilizzare l'attributo width è quella di utilizzare valori percentuali al posto dei valori assoluti in pixel. Questo farà sì che il browser riduca l'immagine in base a una certa proporzione rispetto alla finestra di visualizzazione del browser. Pertanto, per creare una striscia colorata di larghezza uguale alla larghezza della finestra di visualizzazione e altezza di 30 pixel, è possibile farlo in questo modo:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Quando la dimensione della finestra del documento cambia, la dimensione dell'immagine cambia di conseguenza:
Suggerimento:Se viene fornito un valore di larghezza in percentuale e viene ignorata l'altezza, il browser manterrà le proporzioni altezza/larghezza dell'immagine sia quando l'immagine viene ingrandita che quando viene ridotta. Questo significa che il rapporto altezza/larghezza dell'immagine non cambierà e l'immagine non sarà distorta.
Vedete qui sotto l'HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Questo significa che se si imposta solo il valore percentuale dell'attributo width dell'immagine ct_1px.gif, si ottiene un'immagine rettangolare (poiché l'immagine originale ct_1px.gif è un rettangolo con larghezza e altezza di 1px):
Suggerimento:Forniamo gli esempi sopra per aiutarti a comprendere meglio l'uso degli attributi height e width. Se hai bisogno solo di aree di colore uniformi per decorare la pagina, è meglioCreare un colore di sfondo utilizzando CSS.
Spiegazione dettagliata degli attributi height e width
Perché utilizzare gli attributi height e width
Hai mai visto il contenuto di un documento che si muove in modo irregolare durante il caricamento? Questo accade perché il browser deve continuamente riposizionare la pagina per visualizzare ogni immagine caricata. Il browser scarica e analizza le dimensioni di larghezza e altezza dell'immagine per determinare la sua dimensione, lasciando quindi uno spazio rettangolare corrispondente nella finestra di visualizzazione. Poi il browser aggiusta la visualizzazione della pagina per inserire l'immagine. Questo ci dice anche che le immagini sono file indipendenti, che vengono caricati separatamente dal file di origine.
Ma questo non è il metodo più efficace per visualizzare un documento, perché il browser deve controllare e calcolare lo spazio su schermo di ogni file di immagine prima di visualizzare i contenuti adiacenti e successivi, il che potrebbe causare un ritardo significativo nella visualizzazione del documento, interrompendo la lettura dell'utente.
Per i creatori, un metodo più efficace è specificare le dimensioni dell'immagine tramite gli attributi height e width del tag <img>. In questo modo, il browser riserva uno spazio per l'immagine prima di scaricarla, accelerando così la visualizzazione del documento e prevenendo il movimento del contenuto del documento. Entrambi gli attributi devono essere valori interi e sono espressi in pixel. L'ordine di apparizione degli attributi nel tag <img> non è importante.
Problemi con gli attributi height e width
Anche se l'attributo height e width del tag <img> può migliorare le prestazioni e permettere alcune piccole tecniche, ci sono alcuni effetti negativi difficili da gestire quando si utilizzano. Anche se l'utente ha disattivato la funzione di download automatico delle immagini, il browser comunque deve mostrare lo spazio riservato per l'immagine con le dimensioni specificate. Questo lascia spesso al lettore un frame vuoto, con un'icona senza senso che indica la posizione dove dovrebbe essere l'immagine. In questo modo la pagina sembra molto brutta, come se non fosse stata completata, e la maggior parte del contenuto diventa inutile. Se non si utilizzano queste dimensioni specificate, il browser inserirà semplicemente un'icona dell'immagine nel testo, almeno ci sono alcune parole che si possono leggere.
Per questo problema non abbiamo ancora una soluzione, possiamo solo enfatizzare un punto, ossia utilizzare proprietà alt eTesto descrittivoIn questo modo, il lettore almeno sa cosa manca. Tuttavia, consigliamo di utilizzare queste proprietà di dimensione, poiché incoraggiamo ogni comportamento che possa migliorare le prestazioni del web.
Supporto browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Supporto | Supporto | Supporto | Supporto | Supporto |
