Gerador de imagens responsivas
Gere tamanhos de imagem srcset para páginas web mais rápidas
Crie múltiplas larguras de imagem para layouts responsivos em um único lote. Exporte breakpoints comuns e copie-cole código HTML ou Next.js diretamente no seu projeto.
Processamento local — sem uploadsGerar imagens responsivas
Faça upload de uma imagem e selecione tamanhos de saída. Escolha proporções de escala, larguras de breakpoint ou adicione dimensões personalizadas.
Dica: Comece com uma imagem de alta resolução para os melhores resultados em todos os tamanhos.
Carregar ou arrastar suas imagens
Suporta arquivos PNG, JPG e WebP de até 25 MB cada. Os arquivos nunca saem do seu navegador.
Arraste e solte imagens ou clique para navegar
PNG, JPG, WebP
Gere imagens em diferentes fatores de escala relativos ao tamanho original
Larguras de viewport comuns para srcset — selecione os tamanhos necessários
5 sizes selected
Imagens responsivas permitem que navegadores escolham o tamanho certo para cada dispositivo, melhorando tempos de carregamento e Core Web Vitals. Esta ferramenta gera variantes de largura comuns a partir de uma única imagem fonte.
Faça upload uma vez, exporte tamanhos de 320px a 1920px e obtenha marcação srcset pronta para usar. Tudo roda localmente — suas imagens permanecem privadas.
Múltiplos breakpoints de uma vez
Gere larguras de 320, 640, 960, 1280 e 1920px em uma única exportação em lote.
Trechos de código prontos para copiar
Obtenha marcação HTML srcset ou Next.js Image pronta para inserir no seu código.
Otimizado para LCP
Sirva imagens de tamanho apropriado para melhorar pontuações de Largest Contentful Paint.
Breakpoints responsivos recomendados
Larguras comuns que cobrem viewports móveis, tablet e desktop.
Como gerar imagens responsivas
Crie variantes de imagem otimizadas para srcset em poucos passos.
Faça upload da imagem fonte
Selecione um JPG, PNG ou WebP de alta resolução. Uma fonte maior produz resultados mais nítidos ao reduzir.
Adicione tamanhos responsivos
Use a exportação multi-tamanho para adicionar larguras de 320, 640, 960, 1280 e 1920px.
Mantenha a proporção bloqueada para preservar as proporções originais em todos os tamanhos.
Processe e baixe
Clique em Redimensionar para gerar todas as variantes, depois baixe cada arquivo ou todos de uma vez.
Copie o trecho srcset
Use o trecho HTML ou Next.js gerado para adicionar imagens responsivas às suas páginas.
Quando usar imagens responsivas
Imagens hero e banners
Sirva 1920px para desktops e arquivos menores para celulares, reduzindo drasticamente tempos de carregamento móvel.
Miniaturas de blog e artigos
Gere múltiplas larguras para que leitores em qualquer dispositivo tenham uma prévia rápida e nítida.
Fotos de produtos e-commerce
Forneça imagens de listagem de tamanho apropriado para melhorar velocidade de página e taxas de conversão.
Recursos
Exportação multi-tamanho em lote
Adicione várias larguras e gere todas de uma única fonte em uma passagem.
Proporção preservada
Alturas escalam proporcionalmente para que imagens nunca sejam esticadas ou comprimidas.
Código pronto para usar
Copie trechos HTML srcset ou específicos do framework diretamente no seu projeto.
Privado e local
Todo processamento acontece no seu navegador. Imagens nunca são enviadas para um servidor.
Perguntas frequentes sobre imagens responsivas
Como escrevo o atributo sizes?
O atributo sizes diz ao navegador qual será a largura da imagem em cada viewport. Por exemplo, `(max-width: 640px) 100vw, 50vw` significa largura total do viewport em telas pequenas e metade em maiores. Ajuste ao seu layout CSS.
Quantos breakpoints devo usar?
Cinco a sete larguras cobrindo móvel a desktop é um bom padrão. Mais tamanhos adicionam flexibilidade mas aumentam armazenamento. Comece com 320, 640, 960, 1280 e 1920 e ajuste com base em análises.
E as imagens retina 2x?
Navegadores selecionam do srcset por largura do viewport e densidade de pixels. Se sua maior fonte é 1920px, um celular retina pode escolher a versão de 1280px. Forneça larguras maiores se renderização retina nítida for importante.
Como isso ajuda o Largest Contentful Paint (LCP)?
LCP mede quão rápido o maior elemento visível carrega. Ao servir imagens menores para móvel, você transfere menos bytes e renderiza o hero mais rápido, melhorando diretamente sua pontuação Core Web Vitals.
Posso usar essas imagens com o componente Image do Next.js?
Sim. Se você auto-hospeda, coloque os arquivos em /public e configure as fontes de imagem adequadamente. Para mais controle, o loader embutido do Next.js também pode gerar tamanhos on-the-fly, mas pré-gerar pode reduzir carga do servidor.
Preciso converter para WebP ou AVIF?
Formatos modernos reduzem ainda mais o tamanho dos arquivos. Você pode converter em uma etapa separada ou usar ferramentas squoosh junto com este gerador. Navegadores que suportam o formato carregarão arquivos menores enquanto outros recorrem a JPG/PNG.
Abrir o redimensionador de imagens
Pronto para gerar imagens responsivas? Faça upload de uma foto e exporte múltiplas larguras para seu site.
Abrir o redimensionador de imagens