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.
fonte
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
width
ouheight
porque 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.
Eu imagino que isso seria algo como:
Projeto estático
.ic {width:500px;height:500px;}
Design Responsivo:
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.
fonte
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 escalaAcabei 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).
fonte
O processo é mais ou menos assim:
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.
fonte