Como especificar o tamanho da imagem em html5

designers de web páginas usar imagens para fornecer informações importantes, a navegação do site direto, e contribuir para a aparência geral de uma página web. No entanto, você tem que usar as imagens corretamente, ou corre o risco de reduzir a sua eficácia.

Video: Curso de HTML5 - 28 - Mapas de Imagem

Use o altura e largura atributos com o elemento para deixar o navegador sabe o quão alto e largo uma imagem é (a unidade padrão é pixels, ou px):

Latão

A maioria dos navegadores baixar o HTML e texto associado a uma página antes de baixar os gráficos da página. Em vez de fazer os usuários esperam para toda a página para baixar, os navegadores normalmente exibir o texto primeiro e depois preencher gráficos assim que estiverem disponíveis.

Se você dizer ao navegador como um grande gráfico é, o navegador pode reservar um lugar para ele na exibição da página. Isso acelera o processo de preenchimento de gráficos - e outras coisas - na página da web.

Você pode verificar a largura ea altura de uma imagem em pixels em qualquer programa de edição de imagem ou nos visualizadores de imagens incorporadas no Windows e no Mac OS. (Você pode ser capaz simplesmente para ver as propriedades da imagem em Windows ou o Mac OS para ver a sua altura e largura.)

Outro bom uso do altura e largura atributos é criar linhas coloridas em uma página usando apenas um pequeno quadrado colorido. Por exemplo, essa marcação adiciona uma caixa azul 10-x-10 px para uma página web:

Use o elemento altura e largura atributos para definir a altura da imagem e largura. Assim você usar esses valores para criar uma caixa azul 10-x-10 px em uma janela do navegador (mostrado no topo da figura) mesmo que a imagem original é de 600 x 600 pixels.

Em geral, é seguro para reduzir as dimensões da imagem usando esses atributos, embora você sempre vai querer verificar cuidadosamente os resultados durante os testes. Com qualquer tipo de imagem sensível aspecto, você quer manter sua proporção dividindo as dimensões originais por algum valor comum.

Esta figura também mostra as caixas com as dimensões de 20 x 20 e 50 x 50 px. Aqui estão as alterações dos valores para altura e largura na marcação para produzir as outras duas caixas:

Usando esta técnica, você pode transformar uma única imagem como a caixa azul (somente 2.39K de tamanho) em uma variedade de linhas e até mesmo caixas:

• Esta técnica pode garantir que todos os divisores e outros elementos de fronteira em sua página usar a mesma cor, porque eles são todos baseados no mesmo gráfico.

• Se você decidir que quer mudar todas as suas linhas de azul para verde, você só mudar a imagem. Cada linha que você criou muda de cor.

  Video: Trocar imagens de acordo com a resolução - HTML5 PICTURE

Quando você especificar a altura e largura que são diferentes de altura real da imagem e largura de uma imagem, você confiar no navegador para escalar a exibição da imagem. Esse truque funciona muito bem para imagens de uma só cor (como a caixa azul), mas ele não funciona bem para imagens com várias cores ou imagens que contêm fotos reais.

O navegador faz imagens não de tamanho bem, e você acabar com uma imagem distorcida. Esta figura mostra o quanto um navegador lida com ampliação de uma imagem de trompete quando a marcação multiplica a altura da imagem por quatro e sua largura por dois (note a semelhança com um flugelhorn!):

Latão

Se você precisar de vários tamanhos para a mesma imagem - como para um botão logo ou navegação - usar uma imagem grande como o mestre para esse gráfico e fazer versões menores. Este truque dá-lhe um melhor controle sobre a aparência final de cada imagem.