Olhe para qualquer página da web online hoje e você notará que eles compartilham certas coisas em comum. Um desses traços compartilhados são as imagens. As imagens certas acrescentam muito à apresentação de um site. Algumas dessas imagens, como o logotipo de uma empresa, ajudam a marcar o site e conectar essa entidade digital à sua empresa física.
Como adicionar uma imagem a uma página da web usando HTML
Para adicionar uma imagem, ícone ou gráfico à sua página da web, você precisa usar a tag no código HTML da página. Você coloca o IMG
tag em seu HTML exatamente onde você deseja que o gráfico seja exibido. O navegador da web que está processando o código da página substituirá essa tag pelo gráfico apropriado assim que a página for visualizada. Voltando ao exemplo do logotipo da nossa empresa, aqui está como você poderia adicionar essa imagem ao seu site: type = “code”>
O Atributo SRC
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”. Este é literalmente o arquivo de imagem que você deseja exibir na página. Em nosso exemplo, estamos usando um arquivo chamado “logo.png”. Este é o gráfico que o navegador da web exibiria ao renderizar 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 examinar a raiz do diretório. Em seguida, ele irá 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 o caminho do arquivo seria alterado para o que for relevante para o seu site.
O Atributo Alt
O segundo atributo obrigatório é o texto “alt”. Este é o “texto alternativo” que é mostrado se a imagem não carregar por algum motivo. Este texto, que em nosso exemplo diz “Logotipo da empresa”, seria exibido se a imagem não carregasse. Por que isso aconteceria? Vários motivos:
- Caminho de arquivo incorreto
- Nome de arquivo incorreto ou erro ortográfico
- 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. Nesses casos, nosso texto alternativo seria exibido.
Para que é usado o Alt Text?
O texto alternativo também é usado pelo software de leitura de tela para “ler” a imagem para um visitante com deficiência visual. Como eles não podem ver a imagem como nós, este texto permite que eles saibam o que é a própria imagem. É por isso que o texto alternativo é obrigatório e deve indicar claramente o que é a imagem! Um mal-entendido comum sobre o texto alternativo é que ele se destina a fins de mecanismo de pesquisa. Isso não é verdade. Embora o Google e outros mecanismos de pesquisa leiam este texto para determinar o que é a imagem (lembre-se de que eles também não podem “ver” sua imagem), você não deve escrever um texto alternativo para apelar apenas aos mecanismos de pesquisa. Texto alternativo claro do autor, destinado a humanos. Se você também pode adicionar algumas palavras-chave na tag que apelam aos mecanismos de pesquisa, tudo bem, mas sempre certifique-se de que o texto alternativo está atendendo ao seu propósito principal, declarando o que a imagem é para qualquer pessoa que não possa ver o arquivo gráfico.
Outros atributos de imagem
O IMG
tag type = “code”> também tem dois outros atributos que você pode ver em uso ao colocar um gráfico em sua página da web – a largura e a altura. Por exemplo, se você usa um editor WYSIWYG como o Dreamweaver, ele adiciona automaticamente essas informações para você. Aqui está um exemplo: A LARGURA
type = “code”> e HEIGHT
atributos type = “code”> informam ao navegador o tamanho da imagem. O navegador então sabe exatamente quanto espaço no layout deve ser alocado e pode passar para o próximo elemento na página durante o download da imagem. O problema de usar essas informações em seu HTML é que nem sempre você deseja que sua imagem seja exibida nesse tamanho exato. Por exemplo, se você tiver um site responsivo cujo tamanho muda com base na tela do visitante e no tamanho do dispositivo, também desejará que suas imagens sejam flexíveis. Se você declarar em seu HTML qual é o tamanho fixo, achará muito difícil substituí-lo por consultas de mídia CSS responsivas. Por este motivo, e para manter uma separação de estilo (CSS) e estrutura (HTML), é recomendado 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 tamanho desativadas e não especificar um tamanho no CSS, o navegador mostrará a imagem em seu tamanho padrão de qualquer maneira.
Editado por Jeremy Girard
