Largura necessária
w = s × d
Um espaço de 390 px com densidade 3 precisa de 1170 px: é escolhida a variante 1280w.
Gerador de imagens responsivas
Gere localmente variantes PNG, JPEG ou WebP e obtenha marcação HTML responsiva pronta a integrar.
- Área de transferência
- Processamento em lote
- Exportar
Os seus ficheiros são processados localmente no navegador e nunca são enviados para os nossos servidores.
Adicione uma imagem PNG, JPEG ou WebP. As variantes são geradas localmente no navegador.
Largue o seu ficheiro aqui
Tamanho recomendado: até 25 MB
Precisas de mais opções?
Utiliza várias ferramentas de edição num único espaço, com o ficheiro aberto e as alterações em curso.
Abrir o editor completoEsta ferramenta foi útil?
Como funciona esta ferramenta?
Uma única imagem grande torna os telemóveis lentos e uma única imagem pequena fica desfocada num ecrã Retina. Este gerador cria várias larguras da mesma imagem em WebP, JPEG ou PNG e escreve a marcação HTML picture com srcset e sizes: o navegador descarrega depois o ficheiro mais adequado ao ecrã e ao layout. Tudo é calculado no seu navegador.
Importe uma imagem PNG, JPEG ou WebP com até 25 MB. Marque as larguras pretendidas entre 320, 480, 640, 768, 1024, 1280, 1600 e 1920 px (as seis primeiras vêm marcadas) ou escreva larguras personalizadas separadas por vírgulas. A altura segue sempre as proporções do original.
Escolha os formatos (WebP e JPEG por predefinição, PNG opcional) e a qualidade JPEG/WebP, de 40 a 100 % (82 % por predefinição). As larguras superiores ao original são ignoradas, a menos que permita a ampliação. Cada variante chama-se nome-largura.extensão, por exemplo praia-verao-640.webp: o nome fica em minúsculas, sem acentos nem espaços.
O código gerado contém um elemento picture: uma etiqueta source por formato moderno (WebP primeiro) e uma img de recurso em JPEG, ou em PNG se não houver JPEG, cujo src aponta para a maior variante. O atributo sizes retoma o que escreveu e são acrescentados loading="lazy" e decoding="async". Descarregue todas as variantes e copie o código.
Como usar esta ferramenta
Importe a imagem
Adicione a versão maior e mais nítida de que dispõe.
Ajuste as variantes
Escolha larguras, formatos, qualidade e o atributo sizes do seu layout.
Descarregue e integre
Guarde os ficheiros, copie o código e preencha o atributo alt.
Que largura descarrega o navegador?
O navegador multiplica a largura indicada em sizes pela densidade de píxeis do ecrã e, em geral, escolhe a variante mais pequena do srcset que atinge esse valor.
- w
- largura necessária da imagem em píxeis
- s
- largura de apresentação dada por sizes, em píxeis CSS
- d
- densidade de píxeis do ecrã (devicePixelRatio)
Casos de uso
Imagem principal de um artigo
Sirva 320 px aos telemóveis e 1280 px aos ecrãs grandes a partir de uma só fotografia.
Passar um site para WebP
Ofereça WebP aos navegadores que o suportam, mantendo um JPEG de recurso.
Melhorar o LCP
Reduza o peso da imagem mais visível de uma página para que apareça mais depressa.
Exemplos
Fotografia de 2400 × 1600 px com as predefinições
Seis larguras × dois formatos. O código coloca primeiro a source WebP e uma img praia-verao-1280.jpg com o seu srcset JPEG como recurso.
Entrada
Praia verão.jpg, larguras de 320 a 1280, WebP + JPEG, qualidade 82 %Resultado
12 ficheiros, de praia-verao-320.webp (320 × 213) a praia-verao-1280.jpg (1280 × 853)Que ficheiro escolhe o navegador?
Num computador com densidade 1, o espaço de 768 px usa a variante 768w; com densidade 2 seriam precisos 1536 px: marque 1600 px para o cobrir.
Entrada
sizes="(max-width: 768px) 100vw, 768px"Resultado
Telemóvel de 390 px com densidade 3: 1170 px → variante 1280wDicas e boas práticas
- Escreva um atributo sizes fiel ao layout: com 100vw numa imagem mostrada a 600 px, o navegador descarrega um ficheiro demasiado pesado.
- Inclua uma variante com cerca do dobro da largura máxima de apresentação para os ecrãs de alta densidade.
- O código contém alt="": substitua-o por uma descrição, exceto numa imagem puramente decorativa.
- Não use loading="lazy" na imagem principal visível ao carregar: retire-o para não atrasar o LCP.
Fontes e referências
- WHATWG, HTML Living Standard — Images and responsive images (abre num novo separador)Página em inglês
Perguntas frequentes
Para que serve o atributo sizes?
Indica a largura com que a imagem é apresentada consoante o ecrã. Com o srcset, o navegador deduz que ficheiro descarregar antes mesmo de conhecer o layout.
Porque não foram geradas algumas larguras?
Ultrapassam a largura do original. Ampliar não acrescenta detalhe; ative a opção apenas se precisar.
Porquê WebP e JPEG em conjunto?
O WebP é mais leve com a mesma qualidade; o JPEG da etiqueta img serve de recurso para navegadores ou ferramentas que não leem WebP.
Os ficheiros são agrupados num ZIP?
Não, cada variante é descarregada separadamente; o navegador pode pedir-lhe que permita várias transferências.
A qualidade aplica-se ao PNG?
Não. O PNG é sem perdas: o controlo de qualidade só afeta JPEG e WebP.
A minha imagem é enviada para um servidor?
Não. O redimensionamento e a codificação são feitos no seu navegador.
Ferramentas relacionadas
Continue com estas ferramentas
Ferramentas semelhantes ou complementares a esta.
Ferramentas semelhantes
Redimensione uma imagem definindo precisamente a largura e a altura antes de descarregar.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Aligeire uma imagem ajustando a qualidade ou apontando para um peso em KB, com o peso final mostrado antes de transferir.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Converta uma imagem para PNG, JPEG ou WebP e ajuste a qualidade antes de descarregar.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Leia também
GuiaFormatosIniciante
PNG, JPEG, WebP ou AVIF: que formato escolher?
Escolha o formato adequado para fotografia, captura, transparência ou interface sem sacrificar desnecessariamente qualidade e desempenho.
31 de agosto de 20263 min
TutorialBoas práticasIniciante
Como comprimir uma imagem sem perder qualidade?
Reduza o tamanho de uma imagem escolhendo dimensões, formato e qualidade adequados sem introduzir degradação visual desnecessária.
31 de agosto de 20263 min
GuiaBoas práticasIntermédio
Imagens responsivas: compreender srcset e sizes
Compreenda como srcset e sizes permitem ao navegador escolher uma imagem adequada à largura de apresentação, densidade de píxeis e contexto responsive.
31 de agosto de 20263 min
AtualidadeFormatosIntermédio
WebP, AVIF, JPEG XL: que formatos de imagem escolher em 2026?
WebP, AVIF e JPEG XL respondem a necessidades diferentes. Compatibilidade, compressão, transparência, HDR e fallback: como escolher em 2026.
30 de agosto de 20264 min