Specifica delle dimensioni dell'immagine per migliorare le prestazioni del browser

Di recente ho eseguito un controllo sul mio sito Web utilizzando gli Strumenti per gli sviluppatori di Google. Le mie immagini hanno tutte le stesse dimensioni (500 orizzontali per 300 pixel verticali), quindi ho pensato che sarebbe stato meglio se avessi lasciato fuori gli attributi della dimensione dell'immagine in quanto non sarebbe necessario calcolare una dimensione dell'immagine quando è già della dimensione corretta.

In Utilizzo della rete, specifica le dimensioni dell'immagine, vedo quanto segue

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Ora sono confuso. Devo davvero aggiungere attributi di larghezza e altezza alle mie immagini, anche se hanno già le dimensioni giuste? Sembra ridondante.

I browser scaricano i dati in parallelo e tentano di avviare il rendering della pagina il più presto possibile.

Se non si specifica la dimensione, il browser non ha idea di quanto sarà grande l'immagine fino a quando il download dell'immagine non sarà completo.

Questo ritardo costringe il browser a ridipingere o ridisegnare il layout, ritardando il tempo di caricamento della pagina.

Maggiore è il numero di immagini con questo problema, più lenta verrà caricata la pagina.

Se si specificano le dimensioni dell'immagine, in HTML o CSS, il browser può evitare ridisegni e ridisposizioni del contenuto.

Per questo motivo dovresti sempre specificare le dimensioni dell'immagine. Google ha alcuni suggerimenti su questo.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Per ulteriori informazioni sul processo di rendering del browser, consultare: http://taligarsiel.com/Projects/howbrowserswork1.htm

Non sono sicuro di quanto sia aggiornato, ma fornisce approfondimenti su come funzionano i browser e perché potresti voler fare cose come non usare i CSS in linea per sovrascrivere i fogli di stile.

Il Responsive Design normalmente non utilizza attributi di larghezza o altezza

Google Development Tools è una guida e non dovresti aver bisogno di imporre tutto ciò che leggi sul loro sito, infatti alcune cose sono obsolete. La maggior parte dei siti Web reattivi non utilizza widtho heightperché desidera che le immagini si adattino alle dimensioni dello schermo e utilizzando larghezza e altezza fisse utilizzando <img>ciò che smorza l'esperienza dell'utente e Google ha dichiarato questo uno dei fattori più importanti.

Soluzione alternativa CSS

Potresti scegliere di utilizzare un elemento a livello di blocco che ha la larghezza e l'altezza, personalmente non ne userei uno, ma ecco cosa dice Google a proposito del livello di blocco.

Assicurati di specificare le dimensioni sull'elemento immagine o sul genitore a livello di blocco Assicurati di impostare le dimensioni sull'elemento stesso o su un genitore a livello di blocco. Se il genitore non è a livello di blocco, le dimensioni verranno ignorate. Non impostare le dimensioni su un antenato che non è un genitore immediato.

Immagino che sarebbe simile a:

Design statico .ic {width:500px;height:500px;}

Design reattivo:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Quindi dovresti usare JavaScript o un'altra soluzione per rilevare il punto di vista e servire 4 diverse versioni dell'immagine, che di nuovo è meno che pratico. Quindi, se stai usando un design reattivo, andrei tranquillamente avanti e non mi preoccuperei di aggiungere larghezza e altezza in modo che il tuo sito Web sia fluido, indipendentemente dallo schermo che lo visualizza.

Ho appena risposto a una domanda simile su Wordpress Stack Exchange. Ripubblicandolo qui (amministratori / moderatori: se ciò non è consentito, fammi sapere il modo corretto di aiutarti).

non significa davvero che devi specificare larghezza e altezza nel codice HTML. Ciò significa che è necessario riservare lo spazio adeguato e quando l'immagine viene caricata, il browser non deve ridisporre e ridipingere la pagina.

Inoltre, se si codificano in modo rigido le dimensioni, questo tipo di sconfitte comporta un comportamento reattivo. Se il layout non è reattivo, va bene, ma se si desidera mantenere una certa reattività, è possibile utilizzare solo CSS per ottenere i risultati.

Il più delle volte, usando sia la larghezza max-width:100che il lavoro, questo post di Smashing Magazine ha una tecnica interessante: invece di usare la larghezza massima: 100%, puoi usare The Padding-Bottom Hack :

"Con la tecnica, definiamo l'altezza come una misura relativa alla larghezza. L'imbottitura e il margine hanno tali proprietà intrinseche, e possiamo usarle per creare rapporti d'aspetto per elementi che non hanno alcun contenuto. Perché l'imbottitura ha questa capacità , possiamo impostare padding-bottom in modo che sia relativo alla larghezza di un elemento. Se impostiamo anche l'altezza su 0, otterremo ciò che vogliamo. [...]

Il passaggio successivo consiste nel posizionare un'immagine all'interno del contenitore e assicurarsi che riempia il contenitore. Per fare questo, dobbiamo posizionare l'immagine assolutamente all'interno del contenitore, in questo modo: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Il processo procede in questo modo:

1. leggi il file .html
2. dall'intestazione del file .html, leggi i file .css, .js (.js dovrebbe essere DOPO .css ...)
3. leggi img e script dalla pagina

Pertanto, i tag immagine vengono letti "in ritardo". Tuttavia, per calcolare la formattazione della tua pagina, avere le dimensioni dell'immagine è una buona cosa (altrimenti i browser usano una dimensione "casuale" come 1x1, 25x25, ... qualunque cosa il browser abbia programmato.)

Quindi, per evitare di avere una pagina che sembra rotta fino a quando le immagini non vengono lette, mettendo gli attributi di larghezza e altezza consentono al browser di calcolare immediatamente il layout di pagina corretto. Ecco perché è una buona idea averli lì, anche se hanno le stesse dimensioni.