![]()
: Elemento IMG
Última atualização: 2026-09-12
<img>Elemento IMG
O elemento <img> incorpora uma imagem na página. É um elemento vazio (sem tag de fechamento). Os atributos src e alt são obrigatórios: src especifica a URL da imagem, alt fornece texto alternativo (importante para acessibilidade e SEO).
| Categoria | Links e Mídia |
|---|---|
| Modelo de Conteúdo | Nenhum (elemento vazio) |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de frase |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
<img src="url-da-imagem" alt="texto alternativo" width="largura" height="altura">⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
src | URL | The URL of the image file, either relative or absolute. |
alt | Text | Alternative text shown when the image can't load; also read by screen readers. |
width | Pixels | The display width of the image in pixels. |
height | Pixels | The display height of the image in pixels. |
loading | Keyword | The loading strategy for the image.
|
srcset | URL list | A list of candidate images for different screen sizes (responsive images). |
sizes | Media condition list | Describes the display width of the image at different viewports. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <img> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Aviso： Não omita o atributo alt — é essencial para leitores de tela e SEO. Use alt="" para imagens puramente decorativas.
❓ Perguntas Frequentes
QO atributo alt é obrigatório para ![]()
?
ASim, o atributo
alt é obrigatório para acessibilidade. Use alt="" (vazio) para imagens puramente decorativas, e um texto descritivo para imagens informativas. Leitores de tela dependem do alt para descrever imagens a usuários cegos.QQual a diferença entre ![]()
e ?
A
<img> carrega uma única imagem. <picture> contém múltiplos elementos <source> para servir diferentes imagens com base no viewport, resolução ou suporte de formato (como WebP vs JPEG).QDevo usar atributos width e height em ![]()
?
ASim, sempre inclua os atributos
width e height (correspondendo às dimensões intrínsecas da imagem). Isso evita Cumulative Layout Shift (CLS) e melhora as pontuações do Core Web Vitals.🏷️ Tags Relacionadas
💡 Casos Relacionados
📚 Tutoriais Relacionados
