Olhe para qualquer página da web on-line hoje e você perceberá que eles compartilham certas coisas em comum. Um desses traços compartilhados é imagens. As imagens certas adicionam muito à apresentação de um site. Algumas dessas imagens, como o logotipo de uma empresa, ajudam a marcar o site e conectam essa entidade digital à sua empresa física.
Para adicionar uma imagem, ícone ou gráficos à sua página da Web, você precisa usar a tag no código HTML de uma página. Você coloca o IMG marque no seu HTML exatamente onde você deseja que o gráfico seja exibido. O navegador da Web que renderiza o código da página substituirá essa tag pelo gráfico apropriado quando a página for visualizada. Voltando ao nosso exemplo de logotipo da empresa, veja como você pode adicionar essa imagem ao seu site:
Atributos de Imagem
Olhando para o código HTML acima, você verá que o elemento inclui dois atributos. Cada um deles é necessário para a imagem.
O primeiro atributo é o "src". Isso é literalmente o arquivo de imagem que você deseja exibir na página. No nosso exemplo, estamos usando um arquivo chamado "logo.png". Este é o gráfico que o navegador da Web exibiria quando renderizasse o site.
Você também notará que antes deste nome de arquivo, adicionamos algumas informações adicionais, "/ images /". Este é o caminho do arquivo. A barra inicial informa ao servidor para procurar na raiz do diretório. Em seguida, ele procurará uma pasta chamada "imagens" e, finalmente, o arquivo chamado "logo.png". Usar uma pasta chamada "imagens" para armazenar todos os gráficos de um site é uma prática bastante comum, mas seu caminho de arquivo seria alterado para o que for relevante para seu site.
O segundo atributo obrigatório é o texto "alt". Este é o "texto alternativo" exibido se a imagem não for carregada por algum motivo. Este texto, que em nosso exemplo lê "Logotipo da empresa", será exibido se a imagem não for carregada. Por que isso aconteceria? Uma variedade de razões:
- Caminho de arquivo incorreto
- Nome de arquivo incorreto ou erro de ortografia
- Erro de transmissão
- O arquivo foi excluído do servidor
Estas são apenas algumas possibilidades de por que nossa imagem especificada pode estar faltando. Nestes casos, o nosso texto alt seria exibido em seu lugar.
O texto alternativo também é usado pelo software leitor de tela para "ler" a imagem para um visitante com deficiência visual. Como eles não podem ver a imagem como nós, esse texto permite que eles saibam qual é a imagem em si. É por isso que o texto alternativo é necessário e por que deve indicar claramente qual é a imagem!
Um equívoco comum do texto alternativo é que ele é destinado a fins de mecanismo de pesquisa. Isso não é verdade. Embora o Google e outros mecanismos de pesquisa leiam esse texto para determinar qual é a imagem (lembre-se, eles também não podem "ver" sua imagem), você não deve escrever texto alternativo para apelar apenas aos mecanismos de pesquisa. Autor claro alt texto que se destina a seres humanos. Se você também puder adicionar algumas palavras-chave à tag que agrade aos mecanismos de pesquisa, tudo bem, mas sempre verifique se o texto alternativo está atendendo a sua finalidade principal, declarando qual é a imagem para qualquer pessoa que não possa ver o arquivo gráfico.
Outros atributos
o IMG tag também tem dois outros atributos que você pode ver em uso quando você coloca um gráfico em sua página web - a largura e a altura. Por exemplo, se você usar um editor WYSIWYG como o Dreamweaver, ele adicionará automaticamente essas informações para você. Aqui está um exemplo:
o LARGURA e ALTURA atributos dizem ao navegador o tamanho da imagem. O navegador sabe exatamente quanto espaço no layout deve alocar e pode passar para o próximo elemento na página enquanto a imagem é baixada. O problema de usar essas informações em seu HTML é que nem sempre você deseja que sua imagem seja exibida no tamanho exato. Por exemplo, se você tiver um website responsivo cujas alterações de tamanho com base na tela e no tamanho do dispositivo de um visitante, também desejará que suas imagens sejam flexíveis. Se você declarar em seu HTML qual é o tamanho fixo, será muito difícil substituí-lo por consultas de mídia CSS responsivas. Por esse motivo, e para manter uma separação de estilo (CSS) e estrutura (HTML), é recomendável que você NÃO adicione atributos de largura e altura ao seu código HTML.
Uma observação: se você deixar essas instruções de dimensionamento desativadas e não especificar um tamanho em CSS, o navegador mostrará a imagem em seu tamanho nativo padrão.
Editado por Jeremy Girard
