Gerador para lazy load: imagens otimizadas e LQIP
Prepare imagens para lazy loading: um arquivo otimizado em tamanho cheio e um placeholder minúsculo de baixa qualidade (LQIP) para efeitos de desfoque, feitos no navegador.
Carregando Gerador de imagens para lazy load (LQIP)…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de imagens para lazy load (LQIP)
- 1
Abra Gerador de imagens para lazy load (LQIP) nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Como criar imagens e placeholders para lazy loading
Lazy loading significa que as imagens abaixo da dobra só são baixadas quando o visitante rola até perto delas. Navegadores modernos suportam isso nativamente com o atributo loading="lazy" na tag img, e muitos sites adicionam um placeholder de imagem de baixa qualidade (LQIP): uma versão minúscula e desfocada da imagem que aparece na hora e é substituída pela imagem real quando ela chega. As duas técnicas dependem de ter os arquivos certos, e é isso que esta página ajuda a produzir.
Fique claro o que o gerador faz. Ele comprime suas imagens com qualidade 80 no formato e tamanho originais, prontas para lazy loading. Mudando duas configurações, ele também cria o placeholder: uma versão com poucas dezenas de pixels de largura em baixa qualidade, normalmente bem abaixo de 1 KB. Ele não escreve HTML nem CSS e não desfoca a imagem em si; o desfoque é aplicado no navegador com CSS quando o placeholder é ampliado.
Como usar o Gerador de imagens para lazy load (LQIP)
- Arraste suas imagens para a área de envio, clique nela para escolher arquivos ou cole uma imagem com Ctrl+V. Esta página aceita arquivos JPG, PNG, WebP, GIF e BMP, vários de uma vez e com até 80 MB cada.
- Primeira rodada, imagens completas: mantenha os padrões (qualidade 80, tamanho original) ou mude para WebP em Format e baixe os arquivos otimizados.
- Segunda rodada, placeholders: abra Resize, escolha Max e digite 32 × 32, baixe a qualidade para cerca de 30 a 40 e defina o padrão de nome em More options como {name}-lqip. Baixe também esses arquivos minúsculos.
- Confira o resultado com o controle antes/depois: arraste o divisor sobre a prévia e veja abaixo as novas dimensões, o tamanho do arquivo, a qualidade e a porcentagem economizada. Qualquer mudança nas configurações reprocessa todas as imagens automaticamente.
- Baixe uma imagem avulsa ou use Download all (ZIP) para o lote inteiro. Em More options você também pode definir um valor de DPI e um padrão de nome de arquivo com {name}, {w} e {h}.
Dicas de lazy loading
- Nunca use lazy load na imagem LCP. A imagem de destaque ou a primeira imagem grande deve carregar na hora; atrasá-la piora o Largest Contentful Paint. Otimize-a com o otimizador para sites.
- Reserve espaço. Dê a cada imagem com lazy load os atributos width e height (a linha After mostra o tamanho exato) para nada pular quando ela carregar.
- Embuta o placeholder. Um placeholder de poucas centenas de bytes pode ser incorporado como data URI ou usado como fundo CSS e desfocado com um filtro CSS até a imagem completa carregar.
- Mantenha leves também as imagens completas. O lazy loading adia bytes, não os elimina; converta para WebP ou passe pastas grandes pelo compressor em lote.
Privado, grátis e rápido
Todo o trabalho acontece no seu navegador: as imagens são decodificadas, redimensionadas e recodificadas no seu próprio dispositivo, então nada é enviado a um servidor. Não há cadastro, marca d'água nem limite diário, e os dados de localização e da câmera (EXIF) são removidos de cada resultado.
Recursos
- Imagens completas otimizadas com qualidade 80
- Placeholders LQIP minúsculos via redimensionamento Max
- Padrões de nome como {name}-lqip
- Saída WebP ou AVIF opcional
- Dimensões exatas de saída para width e height
- Processamento em lote com download ZIP
Perguntas frequentes
O que é um LQIP?
Um placeholder de imagem de baixa qualidade: uma versão muito pequena e bem comprimida de uma imagem que carrega na hora e é exibida, normalmente desfocada, até a imagem completa chegar.
Esta ferramenta gera código de lazy loading?
Não. Ela produz só os arquivos de imagem. O lazy loading em si é feito com o atributo loading="lazy" ou com uma biblioteca JavaScript no seu próprio HTML.
Quão pequena deve ser a imagem de placeholder?
Cerca de 16 a 40 pixels de largura em baixa qualidade, o que geralmente dá um arquivo de algumas centenas de bytes. Defina Max como 32 × 32 e a qualidade em torno de 30 a 40.
Como crio o efeito de desfoque (blur-up)?
Mostre o placeholder minúsculo esticado para o tamanho total com um filtro CSS de desfoque e faça a transição para a imagem completa quando ela carregar. A ferramenta fornece os dois arquivos; o efeito vem do seu CSS.
Toda imagem deve ter lazy load?
Não. Imagens visíveis no primeiro carregamento, principalmente a maior, devem carregar normalmente. O lazy loading é para imagens mais abaixo na página.
Minhas imagens são enviadas a um servidor?
Não. As imagens são processadas localmente no seu navegador e nunca saem do seu dispositivo. Ao fechar a aba, elas são descartadas.