As imagens são essenciais para tornar um site mais atrativo, visualmente informativo e fácil de compreender. Elas ajudam a ilustrar conteúdos, destacar produtos e melhorar a experiência de quem acessa a página.
Por isso, saber como colocar imagem no HTML do seu site é uma habilidade básica e indispensável para qualquer pessoa que cria páginas web.
Uso da tag <img>
A tag <img> é utilizada no HTML para inserir imagens em uma página da web. Ela é uma tag autoencerrável, ou seja, não possui uma tag de fechamento. Sua principal função é carregar e exibir uma imagem a partir de um caminho definido no atributo src.
Além disso, ela pode incluir outros atributos, como alt, width, height e title. Usar a <img> corretamente contribui para a acessibilidade, o SEO e a boa apresentação visual do site.
Como inserir imagem localmente com o HTML img?
Para inserir uma imagem local em HTML, é necessário que o arquivo da imagem esteja salvo na mesma pasta que o arquivo .html, ou em uma subpasta acessível. O atributo src indica o caminho da imagem.
Exemplo:
<img src="foto-exemplo.jpg" alt="Descrição da imagem">
Se a imagem estiver em uma subpasta chamada imagens, o caminho será:
<img src="imagens/foto-exemplo.jpg" alt="Descrição da imagem">
É importante sempre usar nomes de arquivos simples e evitar espaços ou caracteres especiais para garantir que o navegador localize corretamente a imagem.
Como inserir imagem global por meio do HTML img?
Também é possível inserir imagens diretamente de links da internet, basta utilizar URLs no atributo src.
Exemplo:
<img src="https://exemplo.com/imagem.jpg" alt="Descrição da imagem">
Apesar de prático, fazer isso exige atenção. Utilizar imagens hospedadas em outros sites pode causar problemas de carregamento, caso o link mude ou saia do ar.
Além disso, o hotlinking (uso de imagens de outros servidores sem permissão) pode violar direitos autorais ou sobrecarregar o servidor original.
Imagem flutuante
Para alinhar uma imagem à esquerda ou à direita do conteúdo, utiliza-se a propriedade CSS float. Isso permite que o texto se ajuste ao lado da imagem.
Exemplo:
<img src="foto.jpg" alt="Descrição" style="float: left; margin-right: 10px;"> <p>Texto que se ajusta ao lado da imagem.</p>
O uso de float: right também é possível, e é recomendável adicionar margens para evitar que o texto fique colado à imagem. Essa técnica ajuda a melhorar o layout da página.
Atributo alt e título da imagem
O atributo alt (texto alternativo) é fundamental para acessibilidade e SEO. Ele descreve o conteúdo da imagem para tecnologias assistivas, como leitores de tela, e também é exibido quando a imagem não pode ser carregada.
Motores de busca utilizam o alt para entender o contexto da imagem, o que contribui para o ranqueamento da página.
Exemplo:
<img src="logo-locaweb.png" alt="Logo da empresa Locaweb">
Já o atributo title exibe um pequeno texto ao passar o mouse sobre a imagem e funciona como uma legenda informativa:
<img src="produto.jpg" alt="Tênis esportivo azul" title="Clique para ver mais detalhes">
É recomendado usar descrições objetivas e claras, sem repetições entre alt e title.
Otimização de imagens para desempenho do site
Imagens pesadas podem afetar diretamente o tempo de carregamento de um site, o que prejudica a experiência de quem acessa e o posicionamento nos buscadores. Por isso, é essencial otimizar cada imagem usada no HTML.
Técnicas como compressão, uso de formatos adequados e carregamento sob demanda ajudam a manter a qualidade visual sem comprometer a performance da página.
Compressão de imagens
Comprimir imagens significa reduzir seu tamanho sem comprometer significativamente a qualidade visual. Isso pode ser feito com ferramentas como TinyPNG, Squoosh ou Photoshop (por meio da opção Save for Web).
A compressão adequada diminui o tempo de carregamento da página, especialmente em conexões lentas. Antes de inserir qualquer imagem no HTML, é recomendável otimizá-la, principalmente se for exibida em destaque ou em áreas com muito tráfego.
Uso do lazy loading
O atributo loading=”lazy” permite que as imagens sejam carregadas apenas quando estiverem prestes a aparecer na tela. Isso reduz o carregamento inicial da página e melhora seu desempenho.
Exemplo:
<img src="foto.jpg" alt="Descrição da imagem" loading="lazy">
Essa técnica é útil em páginas com muitas imagens ou rolagem longa, pois evita carregar conteúdo que a pessoa talvez nem veja.
Escolha do formato adequado
Escolher o formato certo para cada imagem ajuda a equilibrar qualidade e tamanho. Cada formato tem características e usos ideais, então optar pelo tipo adequado evita arquivos desnecessariamente pesados e melhora a velocidade do site.
Veja um resumo dos principais formatos recomendados para web.
- JPEG: ideal para fotografias e imagens com muitos detalhes. Ele possui boa compressão e mantém qualidade visual razoável com tamanhos menores;
- PNG: indicado para imagens com transparência ou gráficos com poucas cores. Ele mantém alta qualidade, mas gera arquivos maiores que JPEG;
- SVG: formato vetorial. Ele escala perfeitamente sem perda de qualidade, ideal para logotipos, ícones e ilustrações simples;
- WebP: combina compressão eficiente com boa qualidade. Ele é uma excelente escolha para web, pois reduz o peso das imagens.
Erros comuns ao inserir imagem no HTML
Ao adicionar imagens no HTML, alguns erros são bastante frequentes e podem comprometer a exibição correta do conteúdo.
- Caminho incorreto no src: se o nome da imagem estiver errado ou o caminho estiver mal definido, a imagem não será exibida. Verifique sempre se o arquivo está na pasta certa e se o nome está digitado corretamente — e não deixe de verificar também se a extensão está certa;
- Aspas ausentes ou mal utilizadas: sempre use aspas duplas ou simples ao definir o valor dos atributos, como src e alt;
- Falta do atributo alt: esquecer o alt prejudica a acessibilidade e o SEO da página;
- Links quebrados em imagens externas: ao usar URLs externas, certifique-se de que a imagem está disponível e acessível;
- Extensão do arquivo errada ou incompatível: HTML não reconhece formatos não suportados. Use JPEG, PNG, SVG ou WebP;
- Não otimizar a imagem: inserir arquivos muito pesados compromete o desempenho.
Agora que você já sabe como colocar imagem no HTML do seu site, pode fazer isso frequentemente e de forma otimizada, para criar páginas visuais, rápidas e acessíveis. Imagens bem inseridas fazem toda a diferença na experiência de quem navega.
Para construir um site com performance e segurança, conheça as soluções de hospedagem de sites da Locaweb. Temos tudo o que você precisa para publicar seu projeto na web com estabilidade, suporte e tecnologia de ponta!