Fluxo

Preparar uma imagem de produto para publicação

Publique um JPEG pequeno de um desenho que já está em fundo branco e confira o que muda quando o arquivo é transparente.

Objetivo

Obter um JPEG de 160 px no lado maior a partir de um desenho de produto com fundo branco, e um segundo JPEG que mostra o que a conversão faz com pixels transparentes.

Esta página é HTML estático. O compressor e o conversor precisam de JavaScript porque redesenham a imagem num canvas do navegador. Dá para ler a sequência, as medidas e os limites com JavaScript desligado.

Entradas

Os dois PNGs são desenhos originais feitos para este guia, não fotografias. O retângulo vermelho é #d91f2a e a faixa verde-azulada é #0f766e. Nenhum arquivo contém dados pessoais.

Retângulo branco com um bloco vermelho acima de uma faixa verde-azulada.
product-on-white.png Entrada. PNG de 240×160 com fundo branco, 367 bytes.
Bloco vermelho acima de uma faixa verde-azulada, sobre fundo transparente.
product-transparent.png Entrada. O mesmo desenho com fundo transparente, 707 bytes. O quadriculado não faz parte do arquivo.
Versão menor do desenho vermelho e verde-azulado em fundo branco.
product-on-white-compressed.jpg Saída do compressor. JPEG de 160×107, 1518 bytes.
O mesmo desenho exportado como JPEG, com fundo branco no lugar da transparência.
product-transparent.jpg Saída do conversor. JPEG de 240×160, 2226 bytes, com o canto antes transparente agora branco.

Decisões

Não remover o fundo destes arquivos

O primeiro arquivo já tem o fundo branco que um JPEG pode publicar. O segundo já é transparente. Nenhum dos dois precisa do removedor de fundo.

Usar o compressor quando o lado maior precisa encolher

O Compressor de Imagens muda formato, qualidade e o lado maior. O conversor mantém 240×160. Para um anúncio limitado a 160 px, o compressor é a ferramenta desta sequência.

Usar o conversor para ver a transparência virar branco

O Conversor de Imagens preenche o canvas de branco antes de exportar JPEG. Isso responde o que acontece depois de uma remoção de fundo, sem encadear as ferramentas.

Sequência verificada

As ferramentas não recebem o arquivo desta página. Baixe cada entrada e escolha o arquivo de novo na ferramenta. Nada é enviado para a Kitly.

  1. Baixe product-on-white.png e product-transparent.png acima.
  2. Abra o Compressor de Imagens e escolha product-on-white.png.
  3. Depois do carregamento, o formato fica PNG e o controle de qualidade fica desativado. Mude o formato para JPEG. O rótulo de qualidade deve mostrar 78%, que é o valor inicial. Mude a dimensão máxima de 240 para 160.
  4. Clique em Comprimir imagem. As dimensões devem mostrar 160 x 107. No Chrome 154, o tamanho aparece como 1.5 KB e a comparação como A saída ficou maior, 313.6%. Baixe product-on-white-compressed.jpg.
  5. Abra o Conversor de Imagens numa visita nova e escolha product-transparent.png. Mude o formato para JPEG. Não mova o controle de qualidade. Se ele já foi movido, recarregue a página: o valor inicial é 0.86 e o controle não mostra esse número.
  6. Clique em Converter. As dimensões continuam 240 x 160. No Chrome 154, o tamanho aparece como 2.2 KB. Baixe product-transparent.jpg e confira que o canto transparente ficou branco.
  7. Pare por aqui. Não abra o Removedor de Fundo de Imagem para estes dois arquivos.

Resultado observado

Medido no macOS com Headless Chrome 154.0.8037.99, repetindo o canvas das ferramentas: createImageBitmap, preenchimento branco antes do JPEG e canvas.toBlob na qualidade indicada. Os JPEGs foram abertos de novo e amostrados. Os botões da página não foram clicados nesta medição; compare o tamanho mostrado se o seu navegador for outro.

Medidas conferidas
product-on-white.png Entrada. PNG de 240×160, 367 bytes. O pixel (0, 0) é 255, 255, 255, 255. O pixel (120, 50) é 217, 31, 42, 255. O pixel (120, 110) é 15, 118, 110, 255.
JPEG do compressor product-on-white-compressed.jpg. JPEG de 160×107, 1518 bytes, mostrado como 160 x 107 e 1.5 KB. Comparação: A saída ficou maior, 313.6%. Reaberto, (0, 0) é 255, 255, 255, 255. A amostra escalada de (120, 50) em (80, 33) continuou 217, 31, 42, 255. A amostra escalada de (120, 110) em (80, 74) ficou 14, 118, 107, 255.
product-transparent.png Entrada. PNG de 240×160, 707 bytes. O pixel (0, 0) é 0, 0, 0, 0. As amostras vermelha e verde-azulada coincidem com o arquivo de fundo branco.
JPEG do conversor product-transparent.jpg. JPEG de 240×160, 2226 bytes, mostrado como 240 x 160 e 2.2 KB. O arquivo não tem canal alfa. Reaberto, (0, 0) é 255, 255, 255, 255. (120, 50) continuou 217, 31, 42, 255. (120, 110) ficou 16, 117, 111, 255.

Limites

  • Estes são desenhos chapados. Uma fotografia não vai repetir estes tamanhos de arquivo.
  • O tamanho do JPEG depende do codificador do navegador. Estes bytes vêm do Chrome 154 no macOS.
  • O compressor oferece JPEG, PNG e WebP quando o navegador consegue codificá-los. AVIF não foi usado.
  • O removedor de fundo não foi executado. Na primeira utilização ele pode baixar um modelo, e pode usar um fallback de cor da borda que também remove cores parecidas do assunto.
  • A exportação por canvas não preserva metadados de câmera. Estes desenhos não tinham metadados.
  • Nenhuma ferramenta passa o arquivo para a seguinte. Um arquivo pequeno pode ficar maior: 367 bytes viraram 1518 bytes.

Ferramentas neste idioma

Abra cada ferramenta neste mesmo idioma. A página da ferramenta não recebe estes arquivos automaticamente.

  • Compressor de Imagens Reduz o lado maior para 160 px e exporta o JPEG do desenho com fundo branco.
  • Conversor de Imagens Exporta o desenho transparente como JPEG de 240×160 e pinta a transparência de branco.
  • Removedor de Fundo de Imagem Não faz parte do resultado medido. Use só quando o fundo da foto não for o fundo que você quer publicar.