Qual é a diferença entre o modo de densidade e o modo de largura?

O modo de densidade gera sufixos como 1x e 2x para telas com alta densidade de pixels (Retina), enquanto o modo de largura usa descritores numéricos (ex.: 800w, 1200w) combinados ao atributo sizes para layouts fluidos.

Como funciona o modelo de template {w} nas URLs?

Ao fornecer uma lista de larguras e usar {w} na URL (ex.: /img/banner-{w}.jpg), a ferramenta substitui dinamicamente a variável pelo valor de cada resolução no atributo srcset.

As camadas AVIF e WebP substituem a imagem original?

Não. Elas são inseridas como elementos e adicionais antes do fallback, mantendo compatibilidade total com navegadores que não suportam formatos modernos.

Qual é a vantagem de exportar no formato JSX?

A saída em JSX converte atributos para a sintaxe do React (como srcSet em camelCase) e garante tags com auto-fechamento estrito prontas para componentes React.

Os atributos loading e decoding ajudam na performance?

Sim. Definir loading="lazy" e decoding="async" adia o carregamento de imagens fora da tela inicial e melhora a renderização de elementos sem travar a thread principal.

Elysia Tools

Navegação

Development

Construtor de art direction responsiva Picture / srcset

Gera marcação <picture> completa com recortes de art direction: elementos <source media> por breakpoint, candidatas 1x/2x ou descritores de largura por modelo {w}, camadas AVIF/WebP opcionais, tratamento de sizes, width/height anti-CLS e sabores HTML e JSX com notas de lint baseadas na especificação.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

Hero clássico com três recortes, modo densidade

Uma linha por recorte de art direction: hero largo a partir de 1280px, recorte médio a partir de 768px e o recorte vertical estreito como fallback do <img>. As densidades 1x,2x geram candidatas @2x no estilo retina.js, e os atributos loading/decoding mantêm o hero fora do caminho crítico.

<section class="pb-wrap">breakpoint ladder 1280→768→img · <picture> HTML block with two media sources (1x/@2x candidates) and a lazy fallback img · JSX twin · clean lint banner</section>

Descritores de largura + sizes + camadas AVIF/WebP em JSX

Modelo de URL com {w} e larguras reais de arquivo (800/1024/1600), atributo sizes para o navegador escolher pela largura do layout em vez de assumir 100vw, e camadas AVIF+WebP repetindo a fonte por tipo MIME — saída em JSX do React com srcSet camelCase e tags auto-fechadas.

<section class="pb-wrap">breakpoint ladder 1024→img · JSX block: three <source> elements (avif/webp/original) each with srcSet="…{800w,1024w,1600w}" and sizes · lint note about combining art-direction media with media conditions inside sizes</section>

Entradas

As opções estão agrupadas para deixar formulários longos mais fáceis de revisar.

10 opções

ArquivosEnvie os arquivos de origem para este fluxo.1

Opcional: carregar variantes recortadas (até 6 imagens)fileOpcional

Tamanho máximo para cada arquivo: 20 MB / Máx. arquivos: 6Tipos aceitos: image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

ConteúdoCole ou digite os valores principais.5

Fontes de art direction (uma por linha: minWidth URL [larguras])textareaOpcionalDensidadestextOpcionalAtributo sizes (modo w)textOpcionalURL do <img> de fallbacktextOpcionalTexto alternativotextOpcional

ConfiguraçõesAjuste formatos, intervalos, números e modos.3

Modo de descritoresselectObrigatórioCamada de formatoselectObrigatórioSabor de marcaçãoselectObrigatório

AlternânciasAtive ou desative comportamentos opcionais.1

Adicionar atributos loading/decodingcheckboxOpcionalAtivo quando marcado

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

sources: "768 /img/hero-mid.jpg\n1280 /img/hero-wide.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Pães artesanais sobre bancada" formatLayer: "none" flavor: "html" lazyAttrs: true

Construtor de art direction responsiva Picture / srcset

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Hero de página inicial com três recortes e densidades 1x/2x

2. Galeria de produto responsiva com camadas AVIF/WebP em JSX

Perguntas frequentes

Exemplos de Processamento de Imagem Web Python

Exemplos de Processamento de Imagens Web TypeScript

Exemplos de Processamento de Imagem Android Java

Exemplos de Processamento de Imagem Android Kotlin

Gerador de Data URI

Conversão de Imagens em Lote

Conversão de Imagens em Lote

Visualizador de Informações de Imagens em Lote

Ferramentas de redação, destaque e formatação de apresentação de texto

Ferramentas de conversao de formatos de imagem e exportacao animada

Ferramentas de conversão de caixa, codificação e normalização de texto

Ferramentas de limpeza, acabamento e preparo em lote de imagens