Atributo width do HTML <img>
Definição e uso
width propriedade define a largura da imagem, em pixels.
Dica:Para designar a imagem height e width propriedade é um hábito bom. Se essas propriedades forem configuradas, espaço pode ser reservado para a imagem no carregamento da página. Sem essas propriedades, o navegador não pode entender o tamanho da imagem e, portanto, não pode reservar espaço apropriado, então a layout da página mudará quando a imagem for carregada (a seguir, explicamos essa ideia em detalhes).
Dica:Por favor, não use height e width propriedade para ajustar o tamanho da imagem. Se passar por height e width Para reduzir a imagem usando propriedades, o usuário deve baixar imagens de alta capacidade (mesmo que a imagem pareça pequena na página). A prática correta é, antes de usar a imagem na página, processar a imagem para o tamanho apropriado usando software.
Leia mais:Explicação detalhada das propriedades height e width
Exemplo
Uma imagem de 600 pixels de altura e 500 pixels de largura:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintaxe
<img width="pixels">
Valor do atributo
| Valor | Descrição |
|---|---|
| pixels | Definir a largura da imagem em pixels (por exemplo, width="100"). |
Mais exemplos
Mudar o tamanho da imagem - Criar imagem de preenchimento
As propriedades height e width têm uma característica oculta, que é que não é necessário especificar o tamanho real da imagem, ou seja, esses valores podem ser maiores ou menores que o tamanho real. O navegador ajustará automaticamente a imagem para que ela se adapte ao tamanho do espaço reservado. Com esse método, é fácil criar miniaturas de grandes imagens e ampliar imagens muito pequenas. Mas é importante notar: o navegador ainda precisa baixar o arquivo inteiro, independentemente do tamanho final que ele será exibido, e, se não manter a proporção original de largura e altura, a imagem se deformará.
Outra técnica interessante para usar as propriedades height e width é que é possível preencher facilmente uma área da página, ao mesmo tempo em que melhora o desempenho do documento. Imagine que você quiser colocar uma barra colorida no documento. Você não precisa criar uma imagem com o tamanho completo, em vez disso, você cria uma imagem com largura e altura de 1 pixel e atribui a cor que deseja usar. Em seguida, usa as propriedades height e width para expandi-la para um tamanho maior.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Este é o efeito do HTML acima, a barra de cor é feita com uma imagem de apenas um pixel:
Uso de porcentagem
A última dica de uso da propriedade width é usar valores percentuais em vez de valores absolutos em pixels. Isso fará com que o navegador ajuste o tamanho da imagem em uma certa proporção em relação à janela de exibição do navegador. Portanto, para criar uma barra horizontal colorida com a largura da janela de exibição e uma altura de 30 pixels, pode-se fazer assim:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Quando o tamanho da janela do documento muda, o tamanho dessa imagem também muda:
Dica:Se for fornecido um valor de largura em forma de porcentagem e ignorar a altura, o navegador manterá a proporção de largura e altura da imagem, seja ao ampliar ou reduzir. Isso significa que a relação entre a altura e a largura da imagem não mudará, e a imagem não se deformará.
Por favor, veja o seguinte HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Isso é, se você definir apenas a porcentagem do atributo width da imagem ct_1px.gif, você obterá uma imagem retangular (porque o ct_1px.gif original é um retângulo com 1px de largura e altura):
Dica:O propósito de fornecermos os exemplos acima é para que você entenda melhor o uso das propriedades height e width. Se você precisar apenas de uma grande área de cor sólida para decorar a página, uma maneira melhor éUsar CSS para criar cor de fundo.
Explicação detalhada das propriedades height e width
Por que usar as propriedades height e width
Você já viu o conteúdo do documento se movendo irregularmente ao carregar? Isso acontece porque o navegador precisa ajustar constantemente o layout da página para exibir cada imagem carregada. O navegador baixa e analisa a largura e a altura da imagem para determinar seu tamanho, então deixa um retângulo correspondente na janela de exibição. Em seguida, o navegador ajusta o layout da página para inserir a imagem na exibição. Isso também nos diz que as imagens são arquivos independentes, carregados separadamente do arquivo original.
Mas isso não é a maneira mais eficaz de exibir o documento, pois o navegador deve verificar cada arquivo de imagem e calcular seu espaço na tela antes de exibir o conteúdo adjacentes e posteriores. Isso pode causar atrasos significativos na exibição do documento, interrompendo a leitura do usuário.
Para os criadores, uma maneira mais eficaz é especificar o tamanho da imagem através das propriedades height e width do <img> tag. Dessa forma, o navegador reserva um espaço para a imagem antes de baixá-la, o que pode acelerar a exibição do documento e evitar que o conteúdo do documento se mova. Ambas as propriedades devem ser valores inteiros e representam o tamanho da imagem em pixels. A ordem de aparição dessas propriedades no <img> tag não importa.
Problemas com as propriedades height e width
Embora as propriedades height e width do <img> possam melhorar o desempenho e permitir algumas técnicas interessantes, há alguns efeitos negativos complicados ao usá-las. Mesmo que o usuário tenha desligado a função de download automático de imagens, o navegador ainda exibirá o espaço reservado para a imagem com o tamanho especificado. Isso geralmente deixa para o leitor uma caixa vazia, com um ícone sem significado, indicando que era o local onde a imagem seria colocada. Isso faz com que a página pareça muito ruim, como se não estivesse completa, e a maioria do conteúdo é inútil. Se não usar esses tamanhos especificados, o navegador simplesmente colocará um ícone de imagem no texto, pelo menos permitindo que haja algo para ler.
Para esse problema ainda não temos uma solução, mas gostaríamos de enfatizar um ponto, é usar atributo alt eTexto descritivoDesta forma, o leitor pelo menos saberá o que falta aqui. Ainda assim, recomendamos que você use essas propriedades de tamanho, pois encorajamos qualquer comportamento que melhore o desempenho da web.
Suporte ao navegador
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Suporte | Suporte | Suporte | Suporte | Suporte |
