Como dividir uma imagem em duas colunas no Markdown

Na documentação técnica e documentos comerciais, exibir imagens lado a lado oferece numerosos benefícios importantes:

• Análise comparativa: Apresentar claramente comparações de produtos antes/depois, diferenças de versão e resultados de testes A/B
• Eficiência de espaço: Poupar espaço vertical mantendo a estrutura compacta do documento
• Impacto visual: Agrupar imagens relacionadas para captar a atenção do leitor
• Melhoria profissional: Melhorar a qualidade e credibilidade do documento através de layout organizado

1. Design UI/UX: Exibir comparações de mockups e diferenças em fluxos de utilizador
2. Visualização de dados: Apresentar comparações de gráficos e resultados de análise de tendências
3. Demos de produtos: Mostrar claramente comparações de funcionalidades antes/depois e diferenças de versão
4. Documentação técnica: Exibir passos de ecrã de configuração e resultados de execução de código em paralelo

<div style="display:flex; gap:20px; align-items:center; justify-content:center; background:#f8f9fa; padding:16px; border-radius:8px;">
  
  <figure style="margin:0; text-align:center;">
    <img src="before-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface antes da otimização">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figura 1: Interface Antes da Otimização</figcaption>
  </figure>
  
  <figure style="margin:0; text-align:center;">
    <img src="after-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface depois da otimização">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figura 2: Interface Depois da Otimização</figcaption>
  </figure>
</div>

Principais vantagens:

• Design responsivo: Ajusta-se automaticamente ao tamanho do ecrã
• Controlo preciso: Definições detalhadas para espaçamento, alinhamento, fundo e bordas
• Acessibilidade: Fornece estrutura semântica com tags figure/figcaption
• Compatibilidade multiplataforma: Funciona com quase todos os renderizadores Markdown

![Interface antes da otimização](before-ui.png){width=45%} ![Interface depois da otimização](after-ui.png){width=45%}

*Figura 1 e Figura 2: Comparação de otimização de interface de utilizador*

Características:

• Escrita concisa: Alcança efeito máximo com notação mínima
• Suporte de plataforma: Funciona em motores como Obsidian, Hugo, Jekyll, etc.
• Manutenção fácil: Não são necessárias tags HTML, mantém a simplicidade do Markdown

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('Gráfico antes da otimização', 'Gráfico depois da otimização')}
library(ggplot2)

# Preparação de dados
before_data <- data.frame(x = 1:10, y = rnorm(10, mean = 5, sd = 2))
after_data <- data.frame(x = 1:10, y = rnorm(10, mean = 7, sd = 1))

# Criação de gráficos
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("Antes da Otimização")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("Depois da Otimização")

# Visualização lado a lado
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

Características profissionais:

• Layout automático: fig.show='hold' organiza automaticamente a disposição lado a lado
• Tamanho consistente: parâmetro out.width para controlo preciso da largura
• Gestão de legendas: fig.cap para definir legendas individuais

<div style="display:flex; flex-wrap:wrap; gap:clamp(12px, 2vw, 24px); justify-content:center;">
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="mobile-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Vista Móvel</p>
  </div>
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="desktop-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Vista de Secretária</p>
  </div>
</div>

<div role="group" aria-label="Imagens de comparação de interface">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="Interface desorganizada antes da otimização" style="width:48%;">
    
    <figcaption id="fig1-caption">Figura 1: Antes da Otimização - A informação está densa</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="Interface organizada depois da otimização" style="width:48%;">
    
    <figcaption id="fig2-caption">Figura 2: Depois da Otimização - A informação está organizada e a legibilidade melhorada</figcaption>
  </figure>
</div>

1. Comparação de presets de layout:

   • Modo Deck: Para apresentações, margens generosas
   • Modo Móvel: Layout vertical, orientado para redes sociais
   • Modo Focus: Ênfase em conteúdo, adequado para comparações

2. Otimização de temas de cor:

   • Fundo claro: Documentos comerciais, relatórios
   • Fundo escuro: Demonstrações, apresentações
   • Cores de marca: Materiais de marketing

/* Exemplo de estilo personalizado */
.image-comparison-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.comparison-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.comparison-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

• PNG: Alta qualidade e universalidade, adequado para todas as plataformas
• SVG: Gráficos vetoriais com escalabilidade infinita, perfeito para documentos técnicos
• WebP: Formato moderno com tamanho de ficheiro menor, orientado para web

### Dashboard de nova funcionalidade
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>Dashboard Antigo</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Interface antiga do dashboard">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Informação dispersa</li>
      <li>Navegação pouco clara</li>
      <li>Resposta lenta</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>Dashboard Novo</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Interface nova do dashboard">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Informação chave à primeira vista</li>
      <li>Navegação intuitiva</li>
      <li>Atualizações em tempo real</li>
    </ul>
  </div>
</div>

### Análise de desempenho Q4 2024
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>Tendência de Receita</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Gráfico de tendência de receita">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Aumento de 120% ano após ano alcançado
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>Quota de Mercado</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Gráfico circular de quota de mercado">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Garantido 35% de quota de mercado
    </p>
  </div>
</div>

1. Problema de distorção de imagem:

   • Causa: Forçar imagens com diferentes proporções para o mesmo tamanho
   • Solução: Usar object-fit: contain; para manter proporções

2. Problemas de visualização móvel:

   • Causa: Usar larguras fixas
   • Solução: Combinar flex-wrap: wrap; com min-width

3. Problemas de velocidade de carregamento:

   • Causa: Usar ficheiros de imagem grandes diretamente
   • Solução: Otimizar imagens e escolher formatos apropriados

## Lista de verificação de acessibilidade
✅ Atributos alt apropriados definidos para cada imagem
✅ Relação de contraste de cor cumpre padrões WCAG (4.5:1 ou superior)
✅ Descrições fornecidas para leitores de ecrã
✅ Navegação por teclado é possível
✅ O conteúdo é legível em modo de alto contraste
✅ A visualização funciona corretamente a 200% de ampliação do ecrã