Sintaxe de imagens

As imagens são elementos visuais importantes. O Markdown oferece uma sintaxe simples para inserir e gerir imagens.

Sintaxe básica

Imagem inline

Usa ![texto alternativo](URL):

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png)

Imagem com título

Adiciona um título opcional:

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png "Logótipo oficial do Markdown")

O título é mostrado ao pairar o rato sobre a imagem.

Imagem por referência

Básico

![texto alternativo][id-da-imagem]

[id-da-imagem]: https://www.markdownlang.com/image.jpg "Título opcional"

Simplificado

Quando o rótulo for igual ao alt text:

![Markdown Logo][]

[Markdown Logo]: https://www.markdownlang.com/markdown-logo.png

Tipos de caminho

URL absoluta

![imagem na web](https://www.markdownlang.com/images/photo.jpg)

Caminho relativo

![imagem local](./images/photo.jpg)
![imagem no diretório superior](../images/photo.jpg)
![imagem no mesmo diretório](photo.jpg)

Caminho absoluto (root)

![imagem no diretório raiz](/images/photo.jpg)

Funcionalidades avançadas

Imagem com link

Envolver uma imagem numa ligação:

[![descrição da imagem](image.jpg)](https://www.markdownlang.com)

Resultado: clicar na imagem abre o link.

Controlar com HTML

Tamanho

<img src="image.jpg" alt="texto descritivo" width="300" height="200">

Alinhamento

<!-- Centrado -->
<div align="center">
  <img src="image.jpg" alt="imagem centrada" width="400">
</div>

<!-- Direita -->
<div align="right">
  <img src="image.jpg" alt="imagem alinhada à direita" width="300">
</div>

Responsiva

<img src="image.jpg" alt="imagem responsiva" style="max-width: 100%; height: auto;">

Composições

Lado a lado

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

Grelha de imagens

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

Imagem com texto

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

Este texto envolve a imagem flutuante à esquerda, útil para perfis ou descrições de produto.

<div style="clear: both;"></div>

Boas práticas de alt text

Descritivo

✅ Recomenda‑se: descreve o conteúdo
![Utilizador a escrever código num portátil num ambiente de trabalho](workspace.jpg)

❌ Evitar: textos vazios/irrelevantes
![imagem](workspace.jpg)
![clique aqui](workspace.jpg)

Imagens funcionais

✅ Recomenda‑se: explica a função
![botão de pesquisa](search-icon.png)
![ligação para repositório GitHub](github-logo.png)

❌ Evitar: repetir texto adjacente
Clique em ![clique](search-icon.png) para pesquisar

Imagens decorativas

✅ Recomenda‑se: alt vazio para decoração
![](decorative-border.png)

❌ Evitar: descrições desnecessárias
![moldura decorativa](decorative-border.png)

Formatos comuns

Formatos web‑friendly

Formato	Uso	Características
JPEG	Fotos, imagens complexas	Tamanho reduzido, com perdas
PNG	Ícones, transparência	Sem perdas, suporta alfa
WebP	Web moderno	Menor tamanho, boa qualidade
SVG	Vetores, ícones	Escalável, leve
GIF	Animações simples	Animação, cores limitadas

Escolha do formato

✅ Recomenda‑se:
![Foto](photo.jpg)           ← JPEG para fotos
![Ícone](icon.png)           ← PNG para ícones
![Vetor](logo.svg)           ← SVG para vetores
![Animação](animation.gif)   ← GIF para animações simples

❌ Evitar:
![Ícone](icon.jpg)           ← JPEG não é ideal
![Foto](photo.png)           ← PNG tende a ser grande

Otimização de imagens

Tamanho de ficheiro

1. Resolução adequada

   <!-- Sugestão para web -->
   <img src="image.jpg" width="800" alt="descrição">  ← 2x para ecrãs HiDPI

2. Compressão adequada

   <!-- JPEG ~70–80% -->
   ![Foto otimizada](optimized-photo.jpg)

3. Lazy‑load

   <img src="image.jpg" alt="描述" loading="lazy">

CDN e hosting de imagens

<!-- CDN para acelerar -->
![imagem via CDN](https://cdn.example.com/images/photo.jpg)

<!-- Hosting de imagens -->
![imagem hospedada](https://img.example.com/upload/photo.jpg)

Erros comuns e soluções

1) Caminho incorreto

❌ Incorreto:
![Imagem](images/photo.jpg)    ← caminho inválido

✅ Correto:
![Imagem](./images/photo.jpg)  ← caminho correto
![Imagem](/assets/photo.jpg)   ← root relativo correto

2) Alt text em falta

❌ Incorreto:
![](important-chart.jpg)     ← imagem importante sem descrição

✅ Correto:
![Gráfico de vendas 2023 — comparação](important-chart.jpg)

3) Tamanho descontrolado

❌ Problema: imagem demasiado grande
![Imagem grande](huge-image.jpg)   ← pode quebrar o layout

✅ Solução:
<img src="huge-image.jpg" alt="Imagem grande" style="max-width: 100%;">

4) Sintaxe de imagem com link

❌ Incorreto:
[![Imagem](image.jpg)(https://www.markdownlang.com)  ← sintaxe errada

✅ Correto:
[![Imagem](image.jpg)](https://www.markdownlang.com)

Casos práticos

1) Documentação técnica

## Passos de instalação

1. Descarrega o instalador

   ![Captura da página de download](download-page.png)

2. Executa o instalador

   ![Ecrã do assistente de instalação](installer-wizard.png)

3. Concluir instalação

   ![Confirmação de instalação concluída](installation-complete.png)

2) Apresentação de produto

## Funcionalidades

### Interface moderna

<div align="center">
  <img src="ui-screenshot.png" alt="captura da interface do produto" width="600">
  <p><em>Interface simples e intuitiva</em></p>
</div>

### Suporte multiplataforma

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3) Perfil pessoal

## Sobre mim

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

Olá! Sou developer full‑stack focado em tecnologias web modernas, com 5+ anos de experiência.

### Stack

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4) Tutorial

## Configuração do editor

Segue os passos para configurar o ambiente:

1. **Abrir definições**

![Entrada das definições do VS Code](vscode-settings-1.png)

2. **Procurar opção**

![Procurar configuração](vscode-settings-2.png)

3. **Alterar valor**

![Alterar configuração](vscode-settings-3.png)

> 💡 Dica: reinicia o editor após configurar para aplicar as definições.

Acessibilidade

Alt text significativo

✅ Recomenda‑se: descreve com detalhe
![Gráfico de barras do 3.º trimestre de 2023 com crescimento de 15% e seta vermelha ascendente](revenue-chart-q3.png)

❌ Evitar: rótulos genéricos
![gráfico](revenue-chart-q3.png)

Descrição estruturada

![Foto de equipa: fila da frente da esquerda para a direita..., fila de trás ...](team-photo.jpg)

Saída HTML

Imagem em Markdown convertida para HTML:

![Texto alternativo](image.jpg "Título da imagem")

Converte para:

<img src="image.jpg" alt="Texto alternativo" title="Título da imagem">

Imagem por referência:

![Texto alternativo][ref]

[ref]: image.jpg "Título"

Converte para:

<img src="image.jpg" alt="Texto alternativo" title="Título">

Sintaxe relacionada

• Ligações
• HTML
• Blocos de código cercados

Exercícios

Cria:

1. Uma página de produto com várias imagens
2. Um tutorial técnico com capturas e explicação
3. Uma página de equipa com fotos e perfis
4. Um gráfico comparativo com evolução

Ferramentas recomendadas

Edição de imagens

• Online: Canva, Figma, Photopea
• Desktop: GIMP, Paint.NET, Adobe Photoshop
• Capturas: Snipaste, Lightshot, nativas do SO

Otimização

• Compressão: TinyPNG, ImageOptim, Squoosh
• Conversão: CloudConvert, Online‑Convert
• Batch: ImageMagick, XnConvert

Hosting/CDN de imagens

• Grátis: GitHub, Gitee, sm.ms
• Pago: Qiniu, Aliyun OSS, Tencent COS
• CDN: jsDelivr, Cloudflare, AWS CloudFront