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

10

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.

FastElephant
fonte

Respostas:

10

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.

jeffatrackaid
fonte
Engraçado que eles dizem incluí-lo no CSS. Suponho que eles não comecem a prestação antes do CSS é carregado, o que faria sentido uma vez que sem a CSS na página geralmente parece completamente diferente ...
Alexis Wilke
11
Na verdade, a maioria dos navegadores atuais processa informações de renderização de HTML / CSS em paralelo. Eles são alimentados no mecanismo de renderização para serem pintados. Se você especificar corretamente imagens e outro layout, o layout da página poderá ficar pronto enquanto outros recursos sem bloqueio estiverem sendo baixados.
jeffatrackaid
11
Nesse caso, para o tamanho da imagem, se eu quiser que minha página seja responsiva devido a diferentes dimensões da tela, seria melhor especificar porcentagem em vez de pixels? Uma imagem seria muito diferente em um laptop e em um telefone.
FastElephant
11
Eu gosto de dizer às pessoas para sempre fazerem alguma coisa, na esperança de que façam isso pelo menos 80% do tempo. :)
jeffatrackaid
11
Esta resposta ainda é válida? O Google parece ter retirado a recomendação do site PageSpeed.
precisa saber é o seguinte
5

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.

Simon Hayter
fonte
Não tenho tanta certeza de que você não usa informações de largura / altura, mas que as informações são relativas à viewport?
precisa saber é o seguinte
Você geralmente usa max-width:100%;no CSS ao usar o design responsivo. O uso de altura e largura desabilitaria o aumento de escala de fluido e a redução de escala
Simon Hayter
Você tem alguma informação de como isso influencia a pintura ou o fluxo de conteúdo? Eu diria que internamente o navegador pode apenas converter esse valor relativo para um tamanho fixo, para que você não precise repintar.
jeffatrackaid
2

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%;
}
Celso Bessa
fonte
1

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.

Alexis Wilke
fonte