0Pricing
HTML Academy · Aula

O elemento img: src, alt, width e height

Incorporar imagens corretamente com todos os atributos obrigatórios.

O elemento img: src, alt, width e height é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento img

O elemento <img> incorpora uma imagem à página:

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

O atributo src

O atributo src especifica a origem da imagem:

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

O atributo alt

O atributo alt fornece texto alternativo para imagens:

  • É exibido quando a imagem não consegue ser carregada
  • É lido em voz alta por leitores de tela
  • É indexado por mecanismos de busca
  • É obrigatório para acessibilidade (WCAG)

Escrevendo um bom texto alt

Como escrever um texto alt eficaz:

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Atributos width e height

Sempre especifique width e height nas imagens:

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

Proporção e CSS

Definir width e height em HTML permite que o CSS calcule a proporção:

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Formatos de imagem na web

Formatos de imagem comuns e quando usá-los:

  • JPEG/JPG — fotografias e imagens complexas com muitas cores
  • PNG — imagens que exigem transparência
  • WebP — formato moderno: menor que JPEG/PNG e compatível com transparência
  • AVIF — próxima geração: compressão ainda melhor que WebP
  • SVG — ícones e ilustrações vetoriais, com escala ilimitada
  • GIF — animações simples, em grande parte substituídas por vídeo

Atributo loading

Controle quando as imagens são carregadas com o atributo loading:

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

Atributo decoding

O atributo decoding controla o comportamento de decodificação das imagens:

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

Atributo fetchpriority

O atributo fetchpriority indica a prioridade de carregamento da imagem:

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Exemplo completo de img

Uma imagem totalmente acessível e otimizada para desempenho:

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Verificação rápida

Por que você deve sempre incluir os atributos width e height nos elementos img?

Recapitulação: elemento img

Elementos essenciais para incorporar imagens:

  • src — URL da imagem, relativa ou absoluta
  • alt — descrição obrigatória; vazio para imagens decorativas
  • width e height — sempre definidos para evitar deslocamentos no layout
  • loading="lazy" para imagens abaixo da área visível inicial
  • Escolha o formato correto: WebP/AVIF para fotografias e SVG para ícones

Perguntas Frequentes

A aula “O elemento img: src, alt, width e height” é grátis?

Sim — o texto completo de “O elemento img: src, alt, width e height” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento img: src, alt, width e height”?

Incorporar imagens corretamente com todos os atributos obrigatórios. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O elemento img: src, alt, width e height”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento img: src, alt, width e height
  2. Imagens responsivas com srcset e sizes
  3. O elemento picture para direção artística
  4. figure e figcaption
← Voltar para HTML Academy