Como comunicar o tamanho da imagem, práticas recomendadas

11

Se você estiver desenvolvendo um documento html estritamente usando as práticas recomendadas atuais de manter o estilo fora da marcação, como comunicar melhor o tamanho da imagem?

As práticas recomendadas anteriores desejam que a altura e a largura da imagem sejam renderizadas mais rapidamente do que o navegador aguardando o download da imagem para obter suas dimensões. Mas fazer isso parece contrariar o estilo de isolamento do documento.

Adicione um atributo id a cada imagem e coloque a altura / largura no css? Isso nega o bônus de renderização da altura e largura da imagem embutida?

css html images Thomas
fonte

Respostas:

12

Ter a largura e a altura no elemento IMG não é obsoleto e é definitivamente a melhor maneira de informar ao navegador a largura e a altura de uma imagem. Sair do seu caminho para fazê-lo de outra maneira é redundante e desnecessário (e possivelmente bobo). Não faça nenhum trabalho desnecessário para você ou o navegador. Atenha-se ao básico que funciona.

John Conde
fonte
1
... e não se esqueça de uma ALTtag também, mesmo que ela esteja em branco ou os verificadores de conformidade reclamarão.
Talvi Watia
@Tchalvak Desculpe, mas você está errado. É possível substituir a largura e a altura dinamicamente através da programação do lado do servidor e / ou JavaScript. E, pela sua lógica, você também não pode substituir os estilos embutidos.
John Conde
Opa, parece que eu estava errado sobre a falta de substituição de css de qualquer maneira, !importantpois o css permite substituir os atributos de largura e altura, portanto, inicialmente, o uso de largura / altura funciona bem. Agora eu estou preso na posição de voto negativo. Se você quisesse editar a resposta, eu mudaria isso. encolhe os ombros Não que isso importe demais.
Kzqai
8

A resposta de John Conde é direta. As imagens têm largura e altura - faz parte do conteúdo , não do estilo . Portanto, não há necessidade de fazer uma "separação" aqui.

No entanto, uma exceção: CSS para dimensões de imagem é útil se você tiver muitas imagens do mesmo tamanho (por exemplo, miniaturas). Aqui é muito melhor usar uma classe CSS para reduzir o HTML e acelerar o desenvolvimento.

Para o design de um site, incluindo botões e ícones, sua melhor solução são os sprites CSS.

DisgruntledGoat
fonte
+1, sprites de CSS fazem uma diferença ridícula na velocidade de um site.
Kzqai