Gerador de srcset
NovoCrie marcação <img> responsiva com srcset e sizes a partir das suas larguras.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
Gera srcset, sizes e markup picture num único lugar
Escrever markup de imagens responsivas à mão é trabalhoso — a lista srcset, o atributo sizes correspondente, o bloco <picture> com fallbacks WebP e AVIF — e um único erro de digitação faz com que o browser descarregue silenciosamente o ficheiro errado. Este gerador de srcset constrói a etiqueta completa por si: introduza um nome de ficheiro e as suas larguras e produz um elemento <img> ou <picture> responsivo completo e pronto a copiar, com descritores correctos, carregamento diferido e descodificação assíncrona.
É um gerador de imagens responsivas gratuito que funciona inteiramente no browser — sem registo, nada é enviado, e continua a funcionar offline após o carregamento.
srcset e sizes, explicados
Uma imagem responsiva precisa de duas partes a trabalhar em conjunto. srcset é a lista de ficheiros e as suas larguras reais — hero-640.jpg 640w diz ao browser que esse ficheiro tem 640 píxeis de largura. sizes descreve a largura de apresentação da imagem na sua disposição, por exemplo (max-width: 600px) 100vw, 600px. O browser lê sizes, multiplica pela relação de píxeis do dispositivo, e descarrega o candidato srcset mais próximo.
Mude o descritor para x e obterá markup de densidade de píxeis — logo.png 1x, logo@2x.png 2x — ideal para imagens de tamanho fixo como logótipos e ícones em ecrãs retina, onde os descritores w e sizes seriam excessivos.
Quando usar o elemento picture em vez disso
O srcset simples trata da comutação de resolução — a mesma imagem em tamanhos diferentes. Use o elemento <picture> quando precisar de mais controlo: servir formatos modernos com fallback, ou direção de arte (um recorte diferente em dispositivos móveis e em desktop).
No modo <picture>, esta ferramenta emite um <source type="image/avif">, um <source type="image/webp"> e um fallback <img> JPEG ou PNG, para que os browsers modernos obtenham o formato mais pequeno e os mais antigos ainda vejam uma imagem.
Redimensiona a tua imagem para cada largura, localmente
O markup é apenas metade do trabalho — ainda precisa dos ficheiros redimensionados reais. Arraste uma imagem para a ferramenta e esta vai redimensioná-la para cada uma das suas larguras diretamente numa canvas HTML, permitindo depois descarregar o conjunto completo com nomes de ficheiro que correspondam exatamente ao markup gerado (hero-320.jpg, hero-640.jpg, etc.).
Não há upload nem pipeline de compilação. Como ampliar além do original apenas adiciona desfoque, a ferramenta assinala qualquer largura que seja maior que a fonte para que o conjunto de imagens seja preciso.
Como se compara com Squoosh, Responsivebreakpoints.com e Cloudflare Image Resize
Squoosh (da Google) destaca-se na compressão e conversão de imagens individuais — é excelente para escolher a definição de qualidade certa para um WebP ou AVIF. Mas não gera markup srcset nem produz uma etiqueta de imagem responsiva completa para colar em HTML. É uma ferramenta de compressão, não um gerador de markup.
Responsivebreakpoints.com da Cloudinary envia a sua imagem para os servidores da Cloudinary para calcular breakpoints optimais e gerar imagens redimensionadas. Os resultados são sólidos, mas o seu ficheiro sai da sua máquina e aplicam-se os termos da Cloudinary. O Cloudflare Image Resize e o Imgix são serviços CDN — processam imagens no momento da entrega mas requerem configuração de conta, integração de API e faturação contínua. O gerador de srcset da UtiloKit ocupa uma posição diferente: gera markup HTML completo e redimensiona imagens localmente, do lado do cliente, sem upload, sem conta, sem custo e sem limites de tamanho de ficheiro.
Larguras, breakpoints e Core Web Vitals
Um conjunto de larguras fiável é 320, 640, 960, 1280 e 1920, aproximadamente duplicando em cada passo para cobrir telemóveis até ecrãs retina grandes; adicione 2560 para heroes a ecrã completo. Servir uma imagem do tamanho certo é um dos maiores ganhos para os Core Web Vitals: menos bytes significa um Largest Contentful Paint mais rápido, e adicionar atributos width e height evita o deslocamento de layout (CLS) que prejudica tanto os utilizadores como as classificações.
Adicione loading="lazy" a imagens fora do ecrã para que carreguem apenas quando forem visíveis, e fetchpriority="high" ao seu hero para que carregue primeiro — ambos são opções de um clique aqui.
Privado, instantâneo e offline — funciona em qualquer dispositivo
Não há nada para instalar nem conta para criar. Cada etiqueta é montada no seu browser enquanto escreve, e qualquer imagem que redimensione é processada localmente com a API canvas — nada é enviado. O gerador funciona offline após o carregamento da página, para que possa criar markup img srcset e <picture> responsivo em qualquer lugar — num avião, num telemóvel, sem Wi-Fi.
Frequently asked questions
O que é srcset e para que serve?
O atributo srcset permite listar várias versões da mesma imagem em larguras diferentes para que o browser possa descarregar a que melhor se adapta ao dispositivo. Em vez de enviar um ficheiro grande a todos os visitantes, escreve srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" e o browser escolhe a imagem mais pequena que ainda parece nítida, poupando largura de banda em telemóveis e servindo imagens nítidas em portáteis retina, tudo sem JavaScript.
Quando devo usar srcset?
Use srcset sempre que uma imagem seja apresentada em tamanhos diferentes em ecrãs diferentes — banners hero, imagens de artigos, fotos de produtos, tudo o que seja fluido. É a ferramenta certa para a comutação de resolução: a mesma imagem, apenas maior ou menor. Se precisar de mudar o recorte ou a imagem real em certos breakpoints (direção de arte), use o elemento picture. Ícones e logótipos pequenos de tamanho fixo não precisam de srcset.
Como uso srcset e sizes em conjunto?
srcset lista os ficheiros e as suas larguras reais em píxeis (640w significa que o ficheiro tem 640 píxeis de largura); sizes diz ao browser a largura de apresentação da imagem antes de o layout ser calculado. Em conjunto: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". O browser lê sizes — 'largura total do viewport abaixo de 600px, caso contrário 600px' — calcula os píxeis necessários (largura de apresentação × relação de píxeis do dispositivo) e escolhe o candidato srcset mais próximo.
Qual é a diferença entre os descritores w e x?
Os descritores w descrevem a largura real de cada ficheiro em píxeis — image-640.jpg 640w — e devem ser combinados com sizes; o browser faz os cálculos para qualquer ecrã. Os descritores x descrevem apenas a densidade de píxeis — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — e são adequados para imagens de tamanho fixo como um logótipo que apenas precisa de parecer nítido em ecrãs retina. Use w para imagens fluidas e x para imagens de dimensões fixas.
Como sirvo WebP e AVIF com um fallback?
Use picture com um source por formato moderno e um img normal como fallback: source type="image/avif" srcset="…", depois source type="image/webp" srcset="…", depois img src="hero.jpg" …. O browser usa o primeiro formato que suporta e recorre ao JPEG ou PNG img se não entender nenhum, para que os browsers mais antigos ainda obtenham uma imagem. Ative AVIF e WebP no modo picture e esta ferramenta escreve o bloco completo, descritores incluídos.
Que larguras de imagem devo gerar?
Um conjunto de propósito geral sólido é 320, 640, 960, 1280 e 1920 — cobrindo telemóveis pequenos até ecrãs retina grandes — aproximadamente duplicando em cada passo. Para imagens hero a ecrã completo adicione 2560; para conteúdo que nunca exceda, por exemplo, 800px de largura, não precisa de nada mais largo do que cerca de 1600 (800 × 2 para retina). Não gere tantas que os passos sejam inúteis; quatro a seis larguras é geralmente suficiente.
Porque é que o meu srcset não funciona?
Os culpados habituais: (1) está a testar num ecrã onde o browser decidiu corretamente que o ficheiro maior não é necessário — redimensione a janela ou limite a uma ligação lenta para ver a comutação; (2) sizes está em falta ou incorreto, por isso o browser assume 100vw e descarrega um ficheiro grande; (3) os ficheiros listados não existem realmente nesses caminhos (verifique o separador de Rede para ver 404s); (4) a cache está a servir um tamanho já descarregado. srcset é uma sugestão, e o browser pode escolher uma imagem em cache maior — isso é por design.
Related tools
Ver todas as ferramentas
Novo Escape / Unescape de JSON
Faça o escape de texto bruto para uma string segura em JSON e reverta o processo.
Novo Códigos de estado HTTP
Referência pesquisável de códigos de estado HTTP com significados em linguagem comum.
Novo Folha de consulta de regex
Referência pesquisável de tokens e flags de expressões regulares.
Novo Tabela ASCII
Códigos de caracteres pesquisáveis em decimal, hexadecimal, octal e binário.
Novo Conversor de PX para REM
Converta entre px, rem, em e pt em relação a um tamanho de fonte raiz.
Novo Conversor de colunas de folha de cálculo
Converta o número de uma coluna de folha de cálculo na sua letra (1 → A) e vice-versa.