{"id":38250,"date":"2025-08-22T14:59:20","date_gmt":"2025-08-22T17:59:20","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=38250"},"modified":"2025-08-22T14:59:20","modified_gmt":"2025-08-22T17:59:20","slug":"como-colocar-imagem-no-html","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/como-colocar-imagem-no-html\/","title":{"rendered":"Como colocar imagem no HTML do seu site"},"content":{"rendered":"

As imagens s\u00e3o essenciais para tornar um site mais atrativo, visualmente informativo e f\u00e1cil de compreender. Elas ajudam a ilustrar conte\u00fados, destacar produtos e melhorar a experi\u00eancia de quem acessa a p\u00e1gina.\u00a0<\/span><\/p>\n

Por isso, saber <\/span>como colocar imagem no HTML do seu site<\/b> \u00e9 uma habilidade b\u00e1sica e indispens\u00e1vel para qualquer pessoa que cria p\u00e1ginas web.<\/span><\/p>\n

Uso da tag <img><\/span><\/h2>\n

A tag<\/span> <img><\/span><\/i> \u00e9 utilizada no <\/span>HTML<\/span><\/a> para inserir imagens em uma p\u00e1gina da web. Ela \u00e9 uma tag autoencerr\u00e1vel, ou seja, n\u00e3o possui uma tag de fechamento. Sua principal fun\u00e7\u00e3o \u00e9 <\/span>carregar e exibir uma imagem <\/b>a partir de um caminho definido no atributo <\/span>src<\/span><\/i>.<\/span><\/p>\n

Al\u00e9m disso, ela pode incluir outros atributos, como <\/span>alt<\/span><\/i>, <\/span>width<\/span><\/i>, <\/span>height <\/span><\/i>e<\/span> title<\/span><\/i>. Usar a <\/span><img><\/span><\/i> corretamente contribui para a acessibilidade, o SEO e a boa apresenta\u00e7\u00e3o visual do site.<\/span><\/p>\n

Como inserir imagem localmente com o HTML img?<\/span><\/h3>\n

Para inserir uma imagem local em HTML, \u00e9 necess\u00e1rio que o <\/span>arquivo da imagem esteja salvo na mesma pasta que o arquivo .html, ou em uma subpasta<\/b> acess\u00edvel. O atributo <\/span>src <\/span><\/i>indica o caminho da imagem.\u00a0<\/span><\/p>\n

Exemplo:<\/span><\/p>\n

<img src=\"foto-exemplo.jpg\" alt=\"Descri\u00e7\u00e3o da imagem\"><\/span><\/i><\/pre>\n
Se a imagem estiver em uma subpasta chamada <\/span>imagens<\/b>, o caminho ser\u00e1:<\/span><\/p>\n
<img src=\"imagens\/foto-exemplo.jpg\" alt=\"Descri\u00e7\u00e3o da imagem\"><\/span><\/i><\/pre>\n
\u00c9 importante sempre<\/span> usar nomes de arquivos simples <\/b>e evitar espa\u00e7os ou caracteres especiais para garantir que o navegador localize corretamente a imagem.<\/span><\/p>\n
Como inserir imagem global por meio do HTML img?<\/span><\/h3>\n
Tamb\u00e9m \u00e9 poss\u00edvel inserir imagens diretamente de links da internet, basta utilizar URLs no atributo <\/span>src<\/span><\/i>.<\/span><\/p>\n
Exemplo:<\/span><\/p>\n
<img src=\"https:\/\/exemplo.com\/imagem.jpg\" alt=\"Descri\u00e7\u00e3o da imagem\"><\/span><\/i><\/pre>\n
Apesar de pr\u00e1tico, fazer isso exige aten\u00e7\u00e3o. Utilizar imagens hospedadas em outros sites pode causar <\/span>problemas de carregamento<\/b>, caso o link mude ou saia do ar.\u00a0<\/span><\/p>\n
Al\u00e9m disso, o hotlinking (uso de imagens de outros servidores sem permiss\u00e3o)<\/span> pode violar direitos autorais ou sobrecarregar <\/b>o servidor original.<\/span><\/p>\n
Imagem flutuante<\/span><\/h3>\n
\"\"<\/p>\n
Para alinhar uma imagem \u00e0 esquerda ou \u00e0 direita do conte\u00fado, utiliza-se a propriedade <\/span>CSS<\/span><\/a> float. Isso permite que <\/span>o texto se ajuste ao lado<\/b> da imagem.\u00a0<\/span><\/p>\n
Exemplo:<\/span><\/p>\n
<img src=\"foto.jpg\" alt=\"Descri\u00e7\u00e3o\" style=\"float: left; margin-right: 10px;\"><\/span><\/i>\r\n\r\n<p>Texto que se ajusta ao lado da imagem.<\/p><\/span><\/i><\/pre>\n
O uso de <\/span>float: right<\/span><\/i> tamb\u00e9m \u00e9 poss\u00edvel, e \u00e9 recomend\u00e1ve<\/span>l adicionar margens para evitar que o texto fique colado <\/b>\u00e0 imagem. Essa t\u00e9cnica ajuda a melhorar o layout da p\u00e1gina.<\/span><\/p>\n
Atributo alt e t\u00edtulo da imagem<\/span><\/h2>\n
O atributo<\/span> alt<\/span> (texto alternativo) \u00e9 fundamental para acessibilidade e SEO. Ele<\/span> descreve o conte\u00fado da imagem para tecnologias assistivas<\/b>, como leitores de tela, e tamb\u00e9m \u00e9 exibido quando a imagem n\u00e3o pode ser carregada.\u00a0<\/span><\/p>\n
Motores de busca utilizam o alt para entender o contexto da imagem, o que contribui para o ranqueamento da p\u00e1gina.<\/span><\/p>\n
Exemplo:<\/span><\/p>\n
<img src=\"logo-locaweb.png\" alt=\"Logo da empresa Locaweb\"><\/span><\/i><\/pre>\n
J\u00e1 o atributo title exibe um pequeno texto ao passar o mouse sobre a imagem e funciona como uma legenda informativa:<\/span><\/p>\n
<img src=\"produto.jpg\" alt=\"T\u00eanis esportivo azul\" title=\"Clique para ver mais detalhes\"><\/span><\/i><\/pre>\n
\u00c9 recomendado usar descri\u00e7\u00f5es objetivas e claras, sem repeti\u00e7\u00f5es entre alt e title.<\/span><\/p>\n
Otimiza\u00e7\u00e3o de imagens para desempenho do site<\/span><\/h2>\n
Imagens pesadas podem afetar diretamente o tempo de carregamento de um site, o que prejudica a experi\u00eancia de quem acessa e o posicionamento nos buscadores. Por isso, \u00e9 essencial otimizar cada imagem usada no HTML.\u00a0<\/span><\/p>\n
T\u00e9cnicas como compress\u00e3o, uso de formatos adequados e carregamento sob demanda ajudam a manter a qualidade visual sem comprometer a performance da p\u00e1gina.<\/span><\/p>\n
Compress\u00e3o de imagens<\/span><\/h3>\n
Comprimir imagens significa<\/span> reduzir seu tamanho sem comprometer significativamente a qualidade<\/b> visual. Isso pode ser feito com ferramentas como TinyPNG, Squoosh ou Photoshop (por meio da op\u00e7\u00e3o Save for Web).\u00a0<\/span><\/p>\n
A compress\u00e3o adequada<\/span> diminui o tempo de carregamento<\/b> da p\u00e1gina, especialmente em conex\u00f5es lentas. Antes de inserir qualquer imagem no HTML, \u00e9 recomend\u00e1vel otimiz\u00e1-la, principalmente se for exibida em destaque ou em \u00e1reas com muito tr\u00e1fego.<\/span><\/p>\n
Uso do lazy loading<\/span><\/h3>\n
O atributo<\/span> loading=”lazy”<\/span><\/i> permite que as imagens sejam carregadas <\/span>apenas quando estiverem prestes a aparecer<\/b> na tela. Isso reduz o carregamento inicial da p\u00e1gina e melhora seu desempenho.<\/span><\/p>\n
Exemplo:<\/span><\/p>\n
<img src=\"foto.jpg\" alt=\"Descri\u00e7\u00e3o da imagem\" loading=\"lazy\"><\/span><\/i><\/pre>\n
Essa t\u00e9cnica \u00e9 \u00fatil em p\u00e1ginas com muitas imagens ou rolagem longa, pois evita carregar conte\u00fado que a pessoa talvez nem veja.<\/span><\/p>\n
Escolha do formato adequado<\/span><\/h3>\n
Escolher o formato certo para cada imagem ajuda a<\/span> equilibrar qualidade e tamanho<\/b>. Cada formato tem caracter\u00edsticas e usos ideais, ent\u00e3o optar pelo tipo adequado evita arquivos desnecessariamente pesados e melhora a velocidade do site.\u00a0<\/span><\/p>\n
Veja um resumo dos principais formatos recomendados para web.<\/span><\/p>\n