# Construtor de art direction responsiva Picture / srcset Gera marcação completa com recortes de art direction: elementos 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. > Página canônica: https://elysiatools.com/pt/tools/responsive-picture-srcset-art-direction-builder - **Categoria:** Development - **Palavras-chave:** elemento picture, gerador srcset, art direction, imagens responsivas, breakpoints, avif webp ## Visão geral O Construtor de art direction responsiva Picture / srcset gera marcações HTML e JSX robustas para o elemento , permitindo estruturar recortes artísticos específicos por breakpoint, camadas modernas em AVIF/WebP e atributos otimizados contra Cumulative Layout Shift (CLS). ## Entradas - **Fontes de art direction (uma por linha: minWidth URL \[larguras\])** (textarea): 1280 /img/hero-wide.jpg 768 /img/hero-mid.jpg 0 /img/hero-mobile.jpg - **Opcional: carregar variantes recortadas (até 6 imagens)** (file): Optional — upload the narrow crop, mid crop, wide crop… - **Modo de descritores** (select) - **Densidades** (text): 1x,2x - **Atributo sizes (modo w)** (text): (min-width: 1024px) 960px, 100vw - **URL do de fallback** (text): /img/hero-mobile.jpg - **Texto alternativo** (text): Fresh sourdough loaves on a marble counter - **Camada de formato** (select) - **Sabor de marcação** (select) - **Adicionar atributos loading/decoding** (checkbox) ## Quando usar - Ao precisar exibir enquadramentos e proporções de imagem diferentes entre telas mobile, tablet e desktop. - Ao configurar camadas de formatos modernos como AVIF e WebP com fallback seguro para navegadores legados. - Ao implementar regras de densidade de pixels (1x, 2x) ou descritores de largura (w) com tamanhos responsivos em projetos HTML ou React. ## Como funciona - Informe os breakpoints e URLs de cada recorte visual no campo de fontes de art direction, ou faça o upload opcional das variantes. - Selecione o modo de descritor (densidade de pixels 1x/2x ou largura com modelo {w}), definindo o atributo sizes e a URL do elemento img de fallback. - Escolha as camadas de formato desejadas (AVIF, AVIF+WebP ou original) e o formato de saída entre HTML padrão ou JSX para React. - Copie a marcação gerada com tags , atributos de carregamento assíncrono e notas de conformidade com a especificação. ## Casos de uso - Banners e seções hero que necessitam de corte vertical fechado no celular e imagem panorâmica expansiva no desktop. - Catálogos de comércio eletrônico que precisam servir AVIF e WebP leves com fallback em JPEG para manter o carregamento rápido. - Aplicações em React que requerem marcação JSX estrita para imagens responsivas sem erros de lint ou avisos de hidratação. ## Perguntas frequentes ### 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. ## Ferramentas relacionadas - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Conversão de Imagens em Lote](https://elysiatools.com/pt/tools/batch-convert): Converter múltiplas imagens para diferentes formatos com configurações de qualidade - [Conversão de Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-convert): Converta múltiplos arquivos de imagem entre diferentes formatos como JPG, PNG, WebP, AVIF, TIFF, GIF com configurações de qualidade e processamento em lote - [Visualizador de Informações de Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-info): Visualize informações básicas de várias imagens de uma vez - dimensões, formato, tamanho do arquivo e presença de metadados - [Redimensionador de Imagem](https://elysiatools.com/pt/tools/image-resize): Ferramenta profissional de redimensionamento de imagem com múltiplos métodos, preservação de proporção e conversão de formato, incluida a funcionalidade de desenfoque de fundo, suportando GIF/Animated WebP/APNG e JPEG/PNG/WEBP. - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Corte de Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-crop): Cortar múltiplas imagens para dimensões específicas ou proporção de aspecto com posicionamento personalizado. Retorna imagens cortadas como download ZIP. - [Composição de Imagens](https://elysiatools.com/pt/tools/image-composite): Compor múltiplas imagens juntas com controle preciso sobre posição, opacidade e modos de mistura ## Exemplos - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagens Web TypeScript](https://elysiatools.com/pt/samples/web-image-processing-typescript): Exemplos de processamento de imagens Web TypeScript incluindo leitura/salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato ## Conteúdo relacionado - [Ferramentas de redação, destaque e formatação de apresentação de texto](https://elysiatools.com/pt/hubs/text-format): Compare ferramentas para mascarar texto sensível, detectar PII, normalizar telefones, destacar frases, centralizar texto e formatar diffs em um único hub. - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de conversão de caixa, codificação e normalização de texto](https://elysiatools.com/pt/hubs/text-convert): Compare conversão de caixa de texto, conversão de largura de caracteres, conversão de codificação, tratamento de quoted-printable e normalização de texto em um único hub. - [Ferramentas de limpeza, acabamento e preparo em lote de imagens](https://elysiatools.com/pt/hubs/image-utility): Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual.