Dove specificare le dimensioni dell'immagine per il rendering più veloce: in HTML o in CSS?

Question

Ho imparato che è una buona pratica specificare esplicitamente le dimensioni dell'immagine. Il browser può quindi già impaginare la pagina mentre sta ancora scaricando le immagini stesse, migliorando così il tempo di rendering della pagina (percepito).

È vero? E se sì, c'è una differenza nello specificare le dimensioni in HTML o CSS?

• HTML: <img src="" width="200" height="100">
• Inline CSS: <img src="" style="width: 200px; height: 100px">
• CSS esterno: #myImage { width: 200px; height: 200px; }

Answer 1

Secondo Google Page Speed, non importa se si specificano le dimensioni tramite CSS o HTML, a patto che il CSS gli obiettivi del tag IMG per sé e non un elemento genitore:

Quando il browser espone la pagina, deve essere in grado di scorrere intorno a elementi sostituibili come le immagini. Può iniziare a eseguire il rendering di una pagina ancor prima che le immagini vengano scaricate, a condizione che conosca le dimensioni per racchiudere elementi non sostituibili. Se nel documento contenente non sono specificate dimensioni o se le dimensioni specificate non corrispondono a quelle delle immagini effettive, il browser richiederà una ripetizione e una nuova ripetizione una volta scaricate le immagini. Per evitare i riflessi, specifica la larghezza e l'altezza di tutte le immagini, nel tag HTML o in CSS.

Si noti tuttavia che essi consigliano di non ridimensionare l'immagine utilizzando queste dimensioni, vale a dire di usare sempre le reali dimensioni:

Non utilizzare le specifiche di larghezza e altezza per scalare le immagini al volo. Se un file immagine è in realtà 60 x 60 pixel, non impostare le dimensioni su 30 x 30 in HTML o CSS. Se l'immagine deve essere più piccola, ridimensionarla in un editor di immagini e impostarne le dimensioni in modo che corrispondano (vedere Ottimizza le immagini per i dettagli.)

Answer 2

Penso che i CSS ti dà più flessibilità: è possibile specificamente impostare la larghezza o l'altezza durante l'impostazione l'altra dimensione a auto. Ma quando si impostano entrambe le dimensioni, non c'è differenza.

Answer 3

Tendo a farlo nel CSS. Questo è certamente un successo quando ci sono più immagini con le stesse dimensioni (quindi puoi fare cose come .comment img.usergroup { width: 16px; height: 16px; }) e avere le stesse immagini soggette a ridimensionamento in fogli di stile diversi come temi selezionabili dall'utente.

Quando si dispone di immagini completamente indipendenti che vengono utilizzate sul sito solo una volta, non ha senso estendere le dimensioni al CSS, quindi la versione HTML sarebbe probabilmente più appropriata lì.

Answer 4

Se si inserisce un'immagine grande in una pagina HTML senza dimensioni, è necessario notare il layout della pagina che si sposta mentre l'immagine viene scaricata (tramite una connessione Internet, se non localmente).

Come per altre risposte, non fa molta differenza se lo fai in HTML o CSS.

Answer 5

Questo non risponde alla tua domanda direttamente, ma non farei affidamento sulle dimensioni della tua immagine per il layout di pagina. Includere invece l'immagine in un elemento a livello di blocco. Questo allevia sia l'HTML sia il CSS dal dover contenere informazioni che in realtà non dovrebbero, in quanto l'immagine potrebbe cambiare di volta in volta.