Especificando as dimensões da imagem para melhorar o desempenho do navegador

Recentemente, realizei uma auditoria em meu site usando as Ferramentas do desenvolvedor do Google. Minhas imagens têm o mesmo tamanho (500 na horizontal por 300 pixels verticais), então pensei que seria melhor deixar de lado os atributos de tamanho da imagem, pois não haveria necessidade de calcular um tamanho de imagem quando este já tiver o tamanho correto.

Em Utilização de rede, especificar dimensões da imagem, veja o seguinte

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:

Agora estou confuso. Devo realmente adicionar atributos de largura e altura às minhas imagens, mesmo que elas já tenham o tamanho certo? Parece redundante.

Os navegadores baixam dados em paralelo e tentam começar a renderizar a página o mais rápido possível.

Se você não especificar o tamanho, o navegador não fará ideia do tamanho da imagem até que o download da imagem esteja completo.

Esse atraso força o navegador a redesenhar ou refluir o layout - atrasando o tempo de carregamento da página.

Quanto mais imagens com esse problema, mais lenta a página será carregada.

Se você especificar os tamanhos da imagem, em HTML ou CSS, o navegador poderá evitar repainas e refluxos de conteúdo.

Devido a isso, você sempre deve especificar os tamanhos da imagem. O Google tem algumas dicas sobre isso.

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

Para obter mais informações sobre o processo de renderização do navegador, consulte: http://taligarsiel.com/Projects/howbrowserswork1.htm

Não tenho certeza de como isso é atualizado, mas fornece informações sobre como os navegadores funcionam e por que você pode fazer coisas como não usar CSS embutido para substituir as folhas de estilo.

O Design responsivo normalmente não usa atributos de largura ou altura

As Ferramentas de desenvolvimento do Google são um guia e você não precisa aplicar tudo o que lê no site deles. Na verdade, algumas dessas coisas estão desatualizadas. A maioria dos sites responsivos não usa widthou heightporque deseja que as imagens se adaptem ao tamanho da tela e usando largura e altura fixas, o <img>que prejudicaria a experiência do usuário e o Google declarou esse um dos fatores mais importantes.

Solução alternativa CSS

Você pode optar por usar um elemento no nível do bloco que tenha largura e altura. Pessoalmente, eu não usaria um, mas aqui está o que o Google diz sobre o nível do bloco.

Certifique-se de especificar as dimensões no elemento de imagem ou no pai no nível do bloco. Certifique-se de definir as dimensões no próprio elemento ou no pai no nível do bloco. Se o pai não estiver no nível do bloco, as dimensões serão ignoradas. Não defina dimensões em um ancestral que não seja um pai imediato.

Eu imagino que isso seria algo como:

Projeto estático .ic {width:500px;height:500px;}

Design Responsivo:

@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

Então você precisaria usar JavaScript ou outra solução para detectar o ponto de vista e servir 4 versões diferentes da imagem, o que novamente é menos prático. Portanto, se você estiver usando um design responsivo, eu continuaria com segurança e não me incomodaria em adicionar largura e altura para que seu site seja fluido, independentemente da tela.

Acabei de responder uma pergunta semelhante no Wordpress Stack Exchange. Reposicionando-o aqui (administradores / moderadores: se isso não for permitido, deixe-me saber a maneira correta de ajudar).

realmente não significa que você precise especificar largura e altura no html. O que isso significa é que você precisa reservar o espaço adequado e, quando a imagem é carregada, o navegador não precisa refluir e repintar a página.

Além disso, se você codificar as dimensões, isso derruba o comportamento responsivo. Se seu layout não for responsivo, tudo bem, mas se você quiser manter alguma capacidade de resposta, poderá usar apenas CSS para obter os resultados.

Na maioria das vezes, usando a largura e max-width:100o trabalho, mas este post da Smashing Magazine tem uma técnica interessante: em vez de usar a largura máxima: 100%, você pode usar o The Padding-Bottom Hack :

"Com a técnica, definimos a altura como uma medida em relação à largura. O preenchimento e a margem têm essas propriedades intrínsecas e podemos usá-los para criar proporções para elementos que não possuem conteúdo. Porque o preenchimento tem esse recurso , podemos definir o preenchimento inferior como relativo à largura de um elemento. Se também definirmos a altura como 0, obteremos o que queremos. [...]

O próximo passo é colocar uma imagem dentro do contêiner e garantir que ele preencha o contêiner. Para fazer isso, precisamos posicionar a imagem absolutamente dentro do contêiner, assim: "

.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%;
}

O processo é mais ou menos assim:

1. leia o arquivo .html
2. do cabeçalho do arquivo .html, leia os arquivos .css, .js (.js deve ser APÓS .css ...)
3. leia img e script da página

Assim, as tags de imagem são lidas "atrasadas". No entanto, para calcular a formatação da sua página, é bom ter o tamanho da imagem (caso contrário, os navegadores usam um tamanho "aleatório", como 1x1, 25x25, ... qualquer que seja o programa que o navegador tenha programado.)

Portanto, para evitar que uma página pareça quebrada até que as imagens sejam lidas, colocar os atributos width e height permite que o navegador calcule o layout da página imediatamente. É por isso que é uma boa ideia tê-los lá, mesmo que sejam do mesmo tamanho.