Especificações de GIF e galeria para lançar no Product Hunt

Qual é o tamanho do thumbnail do Product Hunt, e ele pode ser um GIF?

O thumbnail é o pequeno quadrado ao lado do nome do seu produto no feed e na sua página de lançamento. A central de ajuda do Product Hunt diz que o ideal é usar dimensões quadradas e recomenda 240×240 pixels.

Ele pode ser animado. O Product Hunt afirma que você pode usar um GIF no thumbnail desde que ele tenha menos de 3 MB e não seja "chamativo" demais. Isso faz do thumbnail o único lugar de uma página de lançamento em que um mascote em loop ou um logo animado aparece diretamente no feed.

O limite de 3 MB é generoso para um quadrado de 240 pixels. Alguns segundos de um loop simples nesse tamanho costumam ficar bem abaixo disso, o que deixa espaço para um movimento suave sem artefatos pesados de compressão.

Quando o GIF do thumbnail se anima?

Só ao passar o mouse. O Product Hunt diz que os GIFs "só se animam enquanto o cursor está sobre um post". Quem rola o feed sem apontar para o seu post vê um frame parado, e dispositivos de toque nem têm hover.

Isso muda a forma como você deve montar o loop:

• Faça do primeiro frame uma imagem completa. O primeiro frame deve mostrar o personagem ou o logo inteiro, centralizado e legível, e não um início em branco ou um borrão no meio do movimento.
• Coloque o ponto alto logo no começo. As passadas de mouse são curtas. Um aceno, um pulinho ou uma piscada no primeiro segundo têm mais chance de ser vistos do que uma construção lenta.
• Faça um loop perfeito. Se o último frame salta de volta para o primeiro, o tranco se repete a cada ciclo enquanto alguém está lendo.

O Product Hunt também avisa que GIFs com efeitos estroboscópicos, cortes rápidos ou texto ilegível não são recomendados e podem ser editados pela equipe do Product Hunt. Um loop idle ou attention tranquilo de um mascote se encaixa bem nessas regras; uma montagem rápida de capturas de tela, não.

Qual é o tamanho das imagens da galeria, e quantas eu preciso?

O Product Hunt recomenda 1270×760 para as imagens da galeria. A galeria precisa de pelo menos duas imagens antes de ficar visível, e você pode enviar várias de uma vez.

A galeria é onde você explica o produto, então trate cada imagem como uma ideia:

1. Uma imagem principal: nome do produto, promessa em uma linha e seu mascote ou logo.
2. O fluxo de trabalho principal em uma captura de tela, com uma legenda curta.
3. Um par antes/depois ou entrada/saída.
4. Preços ou "para quem é", se essa for uma pergunta comum.

Uma tela de 1270×760 tem proporção de aproximadamente 5:3. Se as renderizações da sua animação forem quadradas (por exemplo, 1080×1080), coloque o personagem de um lado e o título do outro, em vez de esticar a imagem. Exporte um frame parado da animação para a imagem principal da galeria, assim o thumbnail e a galeria compartilham a mesma pose e as mesmas cores.

Posso adicionar um vídeo de lançamento, e quais links funcionam?

Sim, mas só do YouTube. A central de ajuda do Product Hunt diz que, para vídeos, "apenas links do YouTube são suportados", que você deve colar uma URL completa porque links encurtados não carregam, e que deve confirmar antes do lançamento que o vídeo não está definido como privado.

Pontos práticos:

• Envie com dias de antecedência. O Product Hunt recomenda fazer o upload antes do lançamento. Isso dá tempo para o YouTube processar as resoluções mais altas.
• Use a URL de exibição. Copie o endereço youtube.com/watch?v=..., não um link de compartilhamento youtu.be.
• Não listado funciona para prévias, desde que não seja privado. Confira em uma janela do navegador sem login.
• Abra com o produto. Uma vinheta curta da marca é aceitável, mas mostre o produto nos primeiros segundos.

O Product Hunt não hospeda arquivos de vídeo diretamente, então um MP4 do seu mascote só chega à página de lançamento pelo YouTube. O GIF do thumbnail é a única animação enviada diretamente.

Como transformo um MP4 quadrado em um GIF de 240×240 com menos de 3 MB?

Comece com um loop quadrado e perfeito, como um MP4 de 1080×1080. O método de paleta em duas etapas do FFmpeg gera cores de GIF muito melhores do que uma conversão direta: palettegen cria uma paleta de 256 cores a partir do clipe e paletteuse mapeia cada frame para ela.

ffmpeg -t 3 -i idle.mp4 \
  -vf "fps=15,scale=240:240:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" \
  -loop 0 ph-thumbnail.gif

• -t 3 mantém os 3 primeiros segundos; remova se o loop completo for curto.
• fps=15 é mais que suficiente para um thumbnail e mantém a contagem de frames baixa.
• scale=240:240:flags=lanczos redimensiona com um filtro nítido.
• -loop 0 diz ao muxer de GIF para repetir para sempre.

Confira o resultado com ls -lh ph-thumbnail.gif. Se passar de 3 MB, reduza o fps para 12, encurte o clipe ou adicione palettegen=max_colors=128. Fundos chapados comprimem muito melhor do que degradês, então um fundo sólido atrás do mascote ajuda.

Como faço um mascote animado ficar legível em 240 pixels?

Em 240 pixels, e menos ainda nos feeds de celular, os detalhes desaparecem. Pense na silhueta:

• Preencha o quadrado. Recorte de modo que o personagem ocupe a maior parte do frame. Espaço vazio é desperdício nesse tamanho.
• Não coloque texto no GIF. O nome do seu produto já fica ao lado do thumbnail, e texto pequeno é uma das coisas que o Product Hunt aponta.
• Use um único movimento claro. Um pulinho, um aceno ou uma piscada são mais legíveis do que vários movimentos sobrepostos.
• Use um fundo sólido e contrastante. A transparência do GIF é de 1 bit, então bordas suaves ficam serrilhadas contra a página. Uma cor sólida evita a franja.

Se você já tem um mascote ou logo, o Charmotion pode gerar os loops de origem: envie a imagem e receba 17 animações em poucos minutos, depois exporte cada uma como MP4 de 1080×1080 a 60 fps com prévias em GIF de 480 pixels em cerca de um minuto. Todo conjunto dos planos pagos inclui MP4 e GIF, o que cobre a miniatura, as imagens da galeria e um vídeo do YouTube.

Como preparar os visuais de lançamento no Product Hunt a partir de uma animação de mascote

1. Escolha um loop tranquilo. Escolha um loop perfeito de repouso (idle), aceno ou chamada de atenção, com um primeiro frame forte e sem efeitos piscantes.
2. Crie o GIF do thumbnail. Converta o MP4 quadrado em um GIF de 240×240 com os filtros palettegen e paletteuse do FFmpeg, a cerca de 15 fps.
3. Confira o tamanho. Confirme que o GIF tem menos de 3 MB; se não tiver, reduza a taxa de frames, a duração do clipe ou o tamanho da paleta.
4. Monte as imagens da galeria. Crie pelo menos duas imagens de 1270×760, começando por uma imagem principal que reaproveite um frame parado do mascote.
5. Envie o vídeo para o YouTube. Faça o upload antes do lançamento, defina como público ou não listado e cole a URL de exibição completa no Product Hunt.

Perguntas frequentes

O GIF do thumbnail do Product Hunt tem reprodução automática?

Não. O Product Hunt diz que os GIFs de thumbnail só se animam enquanto alguém passa o mouse sobre o post. Todos os outros, incluindo a maioria dos visitantes no celular, veem um frame parado, então o primeiro frame precisa funcionar sozinho como uma imagem clara e centralizada do seu logo ou mascote.

Posso enviar um MP4 para o Product Hunt?

Não como vídeo de lançamento. O Product Hunt aceita apenas links do YouTube para vídeo, informados como URL completa (não um link encurtado), e o vídeo não pode ser privado. Envie seu MP4 para o YouTube primeiro e depois cole a URL de exibição no seu lançamento.

O que acontece se meu GIF for chamativo demais?

O Product Hunt diz que GIFs com efeitos estroboscópicos, cortes rápidos ou texto ilegível não são recomendados e podem ser editados pela equipe. Use um loop suave e perfeito (sem emendas), com um único movimento claro e sem texto pequeno, e mantenha o arquivo abaixo do limite de 3 MB.

A galeria pode usar um tamanho diferente de 1270×760?

O Product Hunt recomenda 1270×760, então outros tamanhos podem ser cortados ou ganhar faixas nas bordas. Criar exatamente nesse tamanho, com o conteúdo principal longe das bordas, é a forma mais segura de controlar como as imagens da sua galeria aparecem na página de lançamento.

Respostas rápidas deste guia

• O thumbnail do Product Hunt pode ser um GIF?
• Qual é o tamanho das imagens da galeria do Product Hunt?

Fontes

• How to pick a thumbnail and gallery images, Product Hunt Help Center
• FFmpeg filters documentation (palettegen, paletteuse, scale, pad), FFmpeg
• FFmpeg formats documentation (gif and mov/mp4 muxers), FFmpeg