Resposta rápidapara gerar miniaturas de imagens, defina os tamanhos que o layout usa (em geral entre 150 e 600 px), escolha entre corte quadrado (grade alinhada) ou proporcional (imagem inteira), gere cada tamanho em dobro para telas de celular e salve em WebP para site ou JPG para outros destinos. Em vez de exportar foto por foto, gere todas as miniaturas de todas as imagens num único lote.
O portfólio tem 120 projetos. A página de trabalhos mostra 24 cartões, e cada cartão carrega a foto original de 3 MB reduzida pelo navegador. Resultado: a página pesa mais de 70 MB, demora no 4G e o cliente desiste antes de ver o seu melhor trabalho.
Saber gerar miniaturas de imagens é o tipo de cuidado que ninguém nota quando está certo — e todo mundo nota quando está errado. Este guia mostra os tamanhos usuais, as decisões de corte e como produzir várias miniaturas por imagem sem abrir o editor.
Por que a galeria precisa de miniaturas de verdade
Reduzir uma imagem com CSS (width: 300px) muda só o tamanho na tela. O arquivo baixado continua sendo o original, com todos os pixels. O navegador gasta dados para baixar e processador para reduzir, a cada visita.
Uma miniatura de verdade é um arquivo novo, pequeno, com os pixels de que o cartão precisa. A diferença é grande: uma foto de 4000 × 3000 px tem 12 milhões de pixels; uma miniatura de 600 × 600 px tem 360 mil, cerca de 3% disso. Mesmo antes de qualquer compressão, o arquivo encolhe na mesma proporção.
O efeito aparece onde o cliente sente:
- Página de listagem rápida: galeria, catálogo e blog abrem antes que o visitante perca a paciência.
- Menos dados no celular: importante para quem navega em plano pré-pago.
- Melhor nota de desempenho: segundo o web.dev, um Largest Contentful Paint de até 2,5 segundos é considerado bom, e imagens pesadas são um dos motivos mais comuns para passar disso.
- Servidor mais leve: menos banda gasta a cada visita.
Tamanhos usuais de miniatura
Não existe tamanho oficial; existe o tamanho que o seu layout exibe. Como referência, o WordPress gera por padrão uma miniatura quadrada de 150 × 150 px, uma versão média de até 300 px e uma grande de até 1024 px. A tabela abaixo reúne medidas comuns por uso:
| Uso | Medida exibida (aprox.) | Gerar para telas 2x | Corte |
|---|---|---|---|
| Avatar, ícone de lista | 48 a 80 px | 96 a 160 px | Quadrado |
| Grade de galeria | 150 a 300 px | 300 a 600 px | Quadrado |
| Cartão de portfólio ou blog | 300 a 400 px | 600 a 800 px | Proporcional ou 4:3 |
| Vitrine de catálogo | 250 a 400 px | 500 a 800 px | Quadrado |
| Prévia em lightbox | 800 a 1200 px | 1200 a 1600 px | Proporcional |
Por que gerar o dobro
Celulares e notebooks modernos têm telas de alta densidade: cada pixel do layout usa dois ou três pixels físicos por lado. Uma miniatura de 300 px exibida num celular de densidade 2 parece levemente borrada; a de 600 px fica nítida. É por isso que vale gerar dois ou três tamanhos de cada miniatura e deixar o navegador escolher, como explica o guia de imagens responsivas com srcset.
Quadrada ou proporcional
- Quadrada (corte): a imagem é recortada para preencher exatamente o quadrado. A grade fica alinhada, mas as bordas da foto se perdem. Bom para catálogo e galeria.
- Proporcional (encaixe): a imagem é reduzida até caber dentro da medida, sem corte. Nada se perde, mas os cartões ficam com alturas diferentes. Bom para fotografia autoral e peças gráficas.
Pasta Mágica
Gere todas as miniaturas do portfólio de uma vez
Escolha até oito tamanhos, corte quadrado ou proporcional e o formato. Cada foto vira um conjunto de miniaturas nomeadas pelo tamanho.
Como gerar miniaturas de imagens passo a passo
O roteiro serve para portfólio, blog, catálogo ou banco de imagens:
- Inspecione o layout e anote a medida em que cada tipo de miniatura aparece.
- Defina os tamanhos de cada uso e acrescente a versão em dobro, como 300 e 600 px.
- Escolha o corte: quadrado para grades alinhadas, proporcional quando nada pode ser cortado.
- Escolha o formato: WebP para site, JPG para catálogo em PDF e e-mail.
- Teste com 5 imagens difíceis: retrato com o rosto na borda, panorâmica, foto vertical, peça com texto.
- Confira o corte de cada uma. Se o assunto estiver longe do centro, ajuste a foto original ou use o corte proporcional.
- Gere o lote inteiro com o padrão aprovado.
- Nomeie com o tamanho no final, como
projeto-cafe-300.webp, para que o desenvolvedor encontre cada arquivo sem perguntar.
Erros comuns
- Usar a miniatura como imagem principal: ao clicar, o visitante precisa ver a versão grande, não a miniatura ampliada.
- Gerar a miniatura a partir de outra miniatura: sempre parta do original de maior qualidade.
- Esquecer a orientação: foto de celular pode virar de lado na miniatura se o EXIF não for aplicado; veja por que a foto aparece girada no site.
- Qualidade alta demais: em miniatura, qualidade entre 70 e 80 costuma bastar. O olho não vê o detalhe que você está pagando para entregar.
- TIFF ou AVIF na miniatura: TIFF não abre em navegador; prefira WebP ou JPG.
Antes e depois num estúdio
Pense num fotógrafo que publica 40 ensaios por ano no portfólio, com 30 fotos cada. Exportar três tamanhos de miniatura por foto no editor, com ação gravada, ainda exige abrir, conferir e renomear: são 3.600 arquivos por ano. Com um lote único por ensaio, ele solta as 30 fotos, recebe as 90 miniaturas nomeadas e gasta o tempo escolhendo quais imagens entram — que é o trabalho que realmente importa.
Miniatura, srcset e otimização geral
Miniatura é uma peça do quebra-cabeça. Um site rápido costuma combinar três coisas: miniaturas leves nas listagens, várias larguras da imagem principal com srcset e compressão adequada em tudo. Para o panorama completo, leia como otimizar imagens para site.
| Recurso | Para que serve | Onde aparece |
|---|---|---|
| Miniatura | Versão pequena, muitas vezes recortada | Grades, listas, catálogos |
| Srcset | Mesma imagem em várias larguras | Página do projeto ou produto |
| Compressão | Menos KB por arquivo | Em todas as versões |
| Placeholder (LQIP) | Prévia borrada enquanto carrega | Antes da imagem real |
O atributo loading="lazy" também ajuda nas grades longas: as miniaturas abaixo da dobra só são baixadas quando o visitante rola a página. A documentação da tag img no MDN explica o atributo e as demais opções.
Perguntas frequentes
Depende de onde ela aparece. Grades de galeria e listas de produto costumam usar de 150 a 400 px de lado; cartões de blog e portfólio, de 300 a 600 px. Gere o dobro da medida exibida para telas de alta densidade, como as de celular.
Quadrada quando a grade precisa ficar alinhada, como em galerias e catálogos; o corte pode tirar parte das bordas. Proporcional quando a imagem inteira importa, como em fotos de arquitetura ou peças gráficas; a grade fica irregular, mas nada é cortado.
A miniatura é uma versão pequena e muitas vezes recortada, usada em listas e grades. O srcset oferece a mesma imagem em várias larguras, com o mesmo enquadramento, para o navegador escolher conforme a tela. Sites bem otimizados costumam usar as duas coisas.
Sim. Por padrão, o WordPress cria versões em miniatura, média e grande ao subir uma imagem, e temas e plugins podem acrescentar outras. Fora do WordPress, em sites estáticos, portfólios e catálogos em PDF, você precisa gerar as miniaturas por conta própria.
WebP é uma boa escolha para site, porque gera arquivos pequenos e é exibido pelos navegadores atuais. Para catálogos em PDF, e-mail ou sistemas antigos, JPG é mais seguro. PNG só se a miniatura tiver transparência.
Como automatizar isso com a Pasta Mágica
A Pasta Mágica gera miniaturas com bibliotecas de imagem tradicionais — sem IA redesenhando suas fotos. O fluxo para um portfólio ou catálogo:
- Crie sua conta em pastamagica.com.br/cadastrar. A cota grátis permite testar com fotos reais.
- Escolha Gerar miniaturas. Se a página do projeto também precisar de várias larguras da imagem principal, rode Conjunto responsivo (srcset) no mesmo lote.
- Ajuste as opções: até oito tamanhos entre 16 e 4096 px (o padrão é 150, 300 e 600 px), corte quadrado ou encaixe proporcional, formato (manter, JPG, PNG ou WebP) e qualidade.
- Solte as imagens. Cada uma é conferida pelo conteúdo, a orientação da foto é aplicada e cada miniatura sai nomeada como
foto-300.webp. No modo "manter", TIFF e AVIF viram WebP, porque o navegador não exibiria a miniatura. - Acompanhe arquivo por arquivo e baixe tudo num ZIP pronto para o site.
O custo em créditos é fixo, cobrado por imagem enviada e não por miniatura gerada, e aparece antes de rodar. Se uma imagem falhar, a reserva dela volta sozinha. Os limites de cada plano estão na tabela de preços.
Pasta Mágica
Galeria leve sem exportar foto por foto
Salve o fluxo de miniaturas de cada cliente e reutilize a cada novo projeto.
