Imagens

Astro providencia diversas formas de você utilizar imagens em seu site, estejam elas armazenadas localmente dentro do seu projeto, vinculadas de uma fonte remota ou armazenadas em um CMS ou CDN!

Astro utiliza elementos <img> ou <img /> padrões do HTML para mostrar imagens em seus arquivos .astro. Todos os atributos de imagens HTML são suportados.

---
import foguete from '../imagens/foguete.svg';
---
<!-- Imagem remota em outro servidor -->
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

<!-- Imagem local armazenada em public/assets/estrelas.png -->
<img src="/assets/estrelas.png" alt="O céu de uma noite estrelada.">

<!-- Imagem local armazenada em src/imagens/foguete.svg -->
<img src={foguete} alt="Um foguete no espaço."/>

Você pode utilizar a sintaxe ![]() padrão do Markdown ou tags <img> padrão do HTML em seus arquivos .md para imagens localizadas no seu diretório public/ ou imagens remotas em outro servidor.

# Minha Página Markdown

<!-- Imagem local armazenada em public/assets/estrelas.png -->
![O céu de uma noite estrelada.](/assets/estrelas.png)
<img src="/assets/estrelas.png" alt="O céu de uma noite estrelada.">

<!-- Imagem remota em outro servidor -->
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

Você pode utilizar a sintaxe ![]() padrão do Markdown ou tags <img /> do JSX em seus arquivos .mdx. Assim como em arquivos Markdown, arquivos MDX podem mostrar imagens do seu diretório public/ ou servidores remotos. Eles podem também importar e usar imagens localizadas no diretório src do seu projeto, assim como componentes Astro.

import foguete from '../imagens/foguete.svg';

# Minha Página MDX

// Imagem local armazenada em src/imagens/foguete.svg
<img src={foguete} alt="Um foguete no espaço."/>

// Imagem local armazenada em public/assets/estrelas.png
![O céu de uma noite estrelada.](/assets/estrelas.png)
<img src="/assets/estrelas.png" alt="O céu de uma noite estrelada." />

// Imagem remota em outro servidor
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro" />

Ao adicionar imagens em um componente de framework de UI (e.x React, Svelte), utilize a sintaxe de imagem apropriada para aquele particular framework de componente.

Suas imagens armazenadas em src/ podem ser utilizadas por outros componentes os importando de um caminho de arquivo relativo ou atalho de importação e então utilizando a importação como o atributo src da imagem.

---
// Acesse imagens em `src/imagens/`
import logo from '../imagens/logo.png';
---
<img src={logo} width="40" alt="Astro" />

O diretório public/ é para arquivos e assets que não precisam ser processados durante o processo de build do Astro. Imagens armazenadas nele serão copiadas no diretório da build intocadas. Estas não são importadas em seu arquivo .astro, e o atributo src da sua imagem é relativo ao diretório public.

---
// Acesse imagens in `public/imagens/`
---
<img src="/imagens/logo.png" />

A integração de imagens oficial do Astro providencia dois componentes Astro diferentes para renderizar imagens otimizadas: <Image /> e <Picture />.

Após instalar a integração (EN), você pode importar e utilizar esses dois componentes aonde você quiser no seus componentes Astro, incluindo arquivos .mdx!

O componente <Image /> (EN) do Astro te permite otimizar uma imagem e especificar a largura, altura, e/ou a proporção da tela. Você pode até mesmo transformar sua imagem para um formato de saída específico, que pode ser utilizado para evitar checagens do tipo de arquivo de imagens remotas.

Este componente é útil para imagens que você quer manter com um tamanho consistente entre telas ou minuciosamente controlar a qualidade da imagem (e.x. logos).

Arquivos de imagem no diretório fonte do seu projeto podem ser importados no frontmatter e passados diretamente para o atributo src do componente <Image />. Todas as outras propriedades são opcionais e serão definidas como as propriedades padrões da imagem se não providenciadas.

Imagens remotas precisam de uma URL completa como a src da imagem. Você também precisa providenciar width e height ou uma das dimensões mais o obrigatório atributo aspectRatio para o componente <Image />.

---
import { Image } from '@astrojs/image/components';
import imagemLocal from '../assets/local.png';
const urlImagem = 'https://astro.build/assets/logo.png';
---

// imagem local otimizada, mantendo a largura, altura e formato da imagem
<Image src={imagemLocal} />

// altura será recalculada para se igualar a original (local apenas) ou proporção de tela especificada
<Image src={imagemLocal} width={300} />
<Image src={urlImagem} width={300} aspectRatio={16/9} />

// cortando para uma largura e altura específica
<Image src={localImage} width={300} height={600} />
<Image src={urlImagem} width={544} height={184} />

// cortando para uma proporção de tela específica e convertendo para o formato avif
<Image src={localImage} aspectRatio="16:9" format="avif" />
<Image src={urlImagem} height={200} aspectRatio="16:9" format="avif" />

// importações de imagem local também podem ser feitas diretamente em linha
<Image src={import('../assets/local.png')} />

O componente <Picture /> (EN) do Astro pode ser utilizada para providenciar imagens responsivas no seu site, incluindo múltiplos tamanhos de imagem, formatos e layouts. Você pode deixar o navegador do usuário escolher o tamanho, resolução e tipo de arquivo apropriados para a imagem baseado em fatores como o tamanho da tela e a banda larga. Ou, você pode especificar regras que o navegador deve obedecer baseado em media queries.

Este componente é útil para otimizar o que o seu usuário vê em vários tamanhos de tela ou para direção de arte.

Por padrão, o componente <Picture /> irá incluir os formatos avif e webp em adição ao formato original da imagem.

Arquivos de imagens locais no diretório src do seu projeto podem ser importados no frontmatter e passados diretamente para o componente <Picture />. src, widths e sizes são propriedades obrigatórias.

Em adição a src, widths e sizes, aspectRatio também é obrigatório para garantir que a height correta possa ser calculada em tempo de build.

---
import { Picture } from '@astrojs/image/components';
import imagemLocal from '../assets/imagemLocal.png';
const urlImagem = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
---

// Imagem local com múltiplos tamanhos e formatos
<Picture src={imagemLocal} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats=['avif', 'jpeg', 'png', 'webp'] alt="Minha imagem local" />

// Imagem remota (proporção de tela é obrigatória)
<Picture src={urlImagem} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="Minha imagem remota" />

// Importações em linha são suportadas
<Picture src={import("../assets/imagemLocal.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="Minha imagem local" />

Em arquivos .mdx, <Image /> e <Picture /> podem receber a src da sua imagem através de importações e exportações.

import { Image, Picture } from '@astrojs/image/components';
import foguete from '../assets/foguete.png';
export const galaxia = 'https://astro.build/assets/galaxia.jpg';

<Image src={import('../assets/logo.png')} alt="Astro"/>
<Image src={foguete} width={300} alt="Espaçonave se aproximando da lua.">
<Picture src={foguete} widths=[{200, 400, 800}] sizes="(max-width: 800px) 100vw, 800px" alt="Um foguete decolando." />
<Picture src={galaxia} widths=[{200, 400, 800}] aspectRatio={16/9} sizes="(max-width: 800px) 100vw, 800px" alt="Espaço sideral." />

CDNS de imagens funcionam com Astro. Utilize sua URL como o atributo src da imagem como você faria ao escrever HTML ou JSX ou como o atributo src de uma imagem remota com os componentes <Image /> e <Picture />.

Alternativamente, se o CDN providencia um SDK Node.js, você pode utilizá-lo no seu projeto. Por exemplo, o SDK da Cloudinary podem gerar a tag <img> com a src apropriada para você.

Em adição a integração oficial @astrojs/image (EN), tem várias integrações de imagens da comunidade feitas por terceiros para otimizar e trabalhar com imagens em seu projeto Astro.