Enviei um logotipo convertido para o site de um cliente uma vez e ele voltou com um retângulo preto onde o fundo transparente costumava ser. Eu havia convertido um PNG para JPEG sem pensar nisso. A parte estranha foi que eu esperado branco - cada artigo que EU tinha lido dizia transparência & quot; torna-se branco." tornou-se preto, e EU passei vinte minutos assumindo que meu código estava quebrado antes de ler a especificação HTML e descobrir que o navegador estava fazendo exatamente o que foi dito.
Esse é o tema honesto deste guia. o conversor de formato de imagem no Toolz.dev é um invólucro fino sobre o navegador' s codificador de tela próprio Isso lhe dá vantagens reais - nada carrega, it' s instantâneo, ele funciona offline uma vez carregado - e limites reais que a maioria dos & quot; converter qualquer imagem para qualquer formato" páginas não admitirá a. Eu construí este, então I & #39; vou dizer-lhe ambas as metades.
tl;dr: o conversor de formato de imagem Recebe qualquer imagem que seu navegador possa abrir e a codifica novamente como PNG, JPEG ou WebP- aqueles três, e apenas aqueles três Não há saída AVIF, GIF, ou SVG, porque a ferramenta usa o navegador' s canvas codificador e que é o que a tela suporta Escolha um alvo, arraste o controle deslizante de qualidade (JPEG e WebP apenas - PNG ignora), download Duas coisas para saber antes de você converter: Transparência composta em preto ao segmentar JPEG, por especificação e Os metadados EXIF são removidos Em cada conversão, porque uma nova codificação de canvas carrega apenas pixels. Para reduzir os arquivos, emparelhe-os com o compressor de imagem e o Redimensionamento da imagem ferramenta.
O que esse conversor realmente suporta?
Vamos primeiro obter o escopo certo, porque é aqui que a maioria dos guias de formatos é exagerada.
Entrada: O seletor de arquivos aceita image/*, e o arquivo é carregado em um plano <img> elemento. assim, se o seu navegador pode exibi-lo, a ferramenta pode lê-lo - PNG, JPEG, WebP, GIF, BMP, AVIF, e na maioria dos navegadores modernos, SVG.
Saída: PNG, JPEG, Webp. Três botões. Essa é a lista.
A razão não é a preguiça, é a plataforma. A ferramenta desenha sua imagem para um <canvas> e liga canvas.toBlob(callback, type, quality). O padrão de vida HTML exige que todos os navegadores suportem image/png Para essa chamada e deixa outros formatos opcionais; na prática, image/jpeg e image/webp são suportados em todos os lugares e image/avif codificação não é. Não há API do navegador para escrever um AVIF ou um GIF a partir de uma tela Um site que oferece saída AVIF é ou enviar um codificador WebAssembly (centenas de kilobytes de download) ou - muito mais frequentemente - carregar sua imagem para um servidor Nem é o que esta ferramenta faz.
Então, aqui está a tabela de comparação honesta, primeiro a ferramenta:
| você quer | esta ferramenta | por que |
|---|---|---|
| PNG → JPEG | sim | codifica o código da tela image/jpeg |
| png → webp | sim | codifica o código da tela image/webp |
| JPEG → WebP | sim | A conversão mais útil aqui |
| WebP → PNG/JPEG | sim | Para ferramentas que ainda não conseguem ler o WebP |
| AVIF → WebP | Sim (avif para apenas) | O navegador decodifica AVIF; não pode codificá-lo |
| Qualquer coisa → Avif | não | Não existe codificador de canvas AVIF |
| GIF animado → WebP animado | não | um <img> Dá à tela um quadro |
| Qualquer coisa → SVG | não | SVG é vetorial; este é um pipeline raster |
| lote de 200 arquivos | não | Um arquivo de cada vez |
Se você precisar de AVIF ou WebP animado, use squoosh localmente, cwebp/avifenc Na linha de comando ou na etapa de imagem do pipeline de compilação. Prefiro enviar-lhe um lugar útil do que fingir.
Por que o JPEG torna meu fundo transparente preto?
Porque a especificação diz isso, e só aprendi isso depois do e-mail do cliente.
JPEG não possui canal alfa. Quando você pede a uma tela para serializar para um formato que não suporta alfa, o padrão de vida do HTML é explícito: o bitmap deve ser composto em um fundo preto sólido antes da codificação. não branco. preto. Chrome, Firefox e Safari seguem isso, e é por isso que o comportamento é consistente e por que surpreende a todos exatamente uma vez.
Então: Converter um logotipo PNG transparente para JPEG lhe dará uma caixa preta atrás dele. cada vez. Isso não é um bug na ferramenta, é a plataforma sendo consistente e nenhuma quantidade de arrastar o controle deslizante de qualidade o resolve.
O que fazer em vez disso:
- Manter a transparência? alvo png ou WebP. Ambos carregam alfa. O WebP geralmente será o menor dos dois.
- Precisa especificamente do JPEG? Achate a imagem na cor de fundo que você realmente deseja em um editor primeiro, então converter.
- Convertendo apenas uma foto? As fotos não têm transparência, então isso nunca aparece. converter embora.
Esta é a maneira mais comum de danificar uma imagem com um conversor, e vale a pena internalizar: Alfa é uma propriedade do formato, não do seu arquivo. Escolher JPEG é jogar fora o canal alfa.
O que mais se perde em uma nova codificação do Canvas?
Uma tela contém pixels. Apenas pixels. Todo o resto do arquivo original é descartado quando o navegador recodifica, e isso pega as pessoas:
Exif se foi. Marca e modelo da câmera, lente, exposição, data de captura, campos de direitos autorais e coordenadas de GPS todos desaparecem Esta é uma vitória de privacidade por acidente - converter uma foto de telefone antes de postá-la retira o local em que foi tirada - mas se você & #39; for um arquivista ou precisar do campo de direitos autorais para sobreviver, não execute originais através de qualquer conversor baseado em tela Converta uma cópia.
Os perfis de cores ficam achatados. Uma imagem marcada com um perfil de ampla gama como o Display P3 ou o Adobe RGB é desenhada para uma tela que, na prática, trata-a como sRGB. Para imagens da web, é isso que você deseja. Para o trabalho de impressão, não é.
A animação é recolhida para um quadro. um <img> Elemento entrega a tela, qualquer que seja o quadro que esteja mostrando. Coloque um GIF animado de doze segundos e você terá um único still. A ferramenta não avisa sobre isso, o que considero uma aresta genuína em vez de um recurso.
Todo o resto recodifica a partir de pixels decodificados. O que nos leva à regra que mais importa.
O que é perda de geração e como evitá-la?
Sempre que você salva um formato com perdas, o codificador joga fora os dados. Jogue fora os dados, decodifique-os e jogue mais fora e os compostos de dano. Esta é a perda de geração e é a razão pela qual seus modelos de memes parecem que foram enviados por fax.
A regra é curta: Sempre converta do melhor original que você possui, nunca de uma cópia convertida.
Concretamente, JPEG → WebP → JPEG é pior que o JPEG original, duas vezes. Os artefatos do primeiro codificação são tratados como detalhes reais da segunda codificação, que gasta fielmente os bits preservando-os. Se você tiver um arquivo bruto ou uma exportação PNG, comece aí.
Há um corolário que faz tropeçar nas pessoas: Converter JPEG para PNG não restaura a qualidade. PNG é sem perdas, por isso irá preservar a sua imagem perfeitamente - incluindo cada artefato de compressão já cozido nos pixels Você obtém a mesma imagem danificada em um arquivo três ou quatro vezes maior PNG-de-JPEG só vale a pena como uma etapa intermediária quando você' está prestes a fazer muitas rodadas de edição e quer evitar a re-compressão em cada salvamento.
Qual formato devo escolher?
Pule a taxonomia do formato; aqui está a decisão na ordem que eu realmente tomo.
É uma fotografia? WebP em 80–85. Se algo em seu pipeline não puder ler o WebP, JPEG em 80–85.
Tem transparência? Webp. PNG Se você precisar de compatibilidade máxima.
É uma captura de tela, uma simulação de interface do usuário, um gráfico ou qualquer coisa com texto e cores planas? PNG, ou WebP. JPEG' s discreta cosseno transforma esfrega bordas afiadas em ruído visível do mosquito em torno de letras - foi projetado no final de 1980 para fotografias de tom contínuo (o formato é padronizado como ITU-T T.81 /ISO/IEC 10918-1) e texto é exatamente o conteúdo que ele lida pior.
É um logotipo ou um ícone do qual você controla a fonte? Nenhum dos dois - use SVG e don' coloque-o em um conversor raster.
Para as especificações por trás disso: PNG é ISO/IEC 15948, e o WebP foi finalmente publicado como RFC 9649 Em 2024, quatorze anos após o Google ter enviado em tamanho, o Google & #39; estudo de comparação próprio coloca WebP perda em cerca de 25% menor do que JPEG em SSIM equivalente, e WebP sem perdas em cerca de 26% menor do que PNG Esses são o fornecedor & #39; números no fornecedor & #39; s corpus - tratá-los como uma dica forte, não uma promessa sobre a sua imagem específica A razão I & #39; m confortável citando-los é que eles & #39; tem correspondido meus resultados suficientemente próximos em capturas de tela reais e fotos ao longo dos anos, Sua pode diferir, e é por isso que a ferramenta mostra o tamanho da fonte antes de você converter.
Como faço para converter uma imagem no Toolz.dev?
Passo 1: Abra o conversor
vá para o conversor de formato de imagem. Nada para instalar, nenhuma conta.
Etapa 2: carregue sua imagem
Clique na área de upload e escolha um arquivo Ele carrega em seu navegador através de um URL de objeto - o arquivo nunca é enviado para lugar nenhum You'll ver o nome do arquivo e seu tamanho.
Etapa 3: verifique a leitura do formato
A ferramenta mostra Atual → Alvo. "Atual" é lido do tipo MIME do arquivo, então um .jpg Relatórios de arquivo como JPEG. Verifique a sanidade útil quando alguém renomeou a extensão de um arquivo sem realmente convertê-lo, o que acontece mais do que você imagina.
Passo 4: Escolha seu alvo
PNG, JPEG ou WebP.
Passo 5: Defina a qualidade - se for aplicável
O controle deslizante de qualidade (1–100, padrão para 90) Aparece apenas para JPEG e WebP. Isso é deliberado: PNG não tem perdas e canvas.toBlob Ignora inteiramente o argumento da qualidade para image/png, então mostrar um controle deslizante que não faz nada seria uma mentira.
Pois onde definir 90 é o padrão e é quase indistinguível do original para a maioria dos conteúdos. 80 você 85 é onde eu realmente trabalho - significativamente menor, ainda limpo. Abaixo de 60 você e #39; verei nas fotos e em qualquer coisa com texto você e #39; verei muito mais cedo.
Passo 6: Converter e fazer o download
golpe converter e baixar. A codificação acontece em sua máquina e o arquivo é salvo como converted_<original-name>.<ext>. As dimensões são preservadas exatamente - o conversor passa sua imagem e #39; largura e altura próprias, portanto esta etapa altera a codificação e nada mais.
Converter ou comprimir - qual eu preciso?
As pessoas procuram um conversor quando desejam um arquivo menor e, muitas vezes, essa é a ferramenta errada. Três empregos diferentes, três ferramentas diferentes:
| meta | ferramenta | O que muda |
|---|---|---|
| Alterar a codificação | conversor de formato | formato, qualidade |
| Mesmo formato, arquivo menor | compressor de imagem | Apenas qualidade |
| menos pixels | Redimensionamento da imagem | dimensões |
E a maior vitória é quase sempre aquela que as pessoas pulam. Se você estiver servindo uma foto de 4000×3000 em um layout de 1200 px, Redimensionamento bate em todas as opções de formatos combinadas- você & #39;re jogando fora 90% dos pixels que o navegador estava indo para diminuir e descartar de qualquer maneira Redimensionar primeiro, em seguida, converter Fazendo-o nessa ordem rotineiramente leva um PNG de 4 MB sob 200 KB, e nenhuma quantidade de seleção de formato inteligente no original em tamanho real chega perto.
Mais um hábito que vale a pena construir: mantenha seus originais. Archive Lossless Masters, gere derivados com perdas para distribuição. Quando o AVIF-Everywhere finalmente chegar ou o próximo formato depois dele, você irá reexportar de fontes limpas em vez de aumentar o repto.
Perguntas frequentes
Qual formato de imagem é melhor para sites?
WebP, para a maioria dos conteúdos It' s menor que JPEG para fotos e menor que PNG para gráficos, suporta transparência, e todo navegador atual lê - Safari foi o último resquício e suporte adicionado na versão 14. AVIF comprime melhor ainda, mas você pode' t produzi-lo em uma tela de navegador; você precisa de uma etapa de construção ou um codificador de desktop.
Essa ferramenta pode converter minha imagem em AVIF?
não . O conversor gera PNG, JPEG e WebP apenas, porque usa o codificador de canvas do navegador e nenhum navegador pode codificar AVIF de uma tela. Seu navegador pode descodificar Avif, para que você possa converter um arquivo AVIF até WebP ou PNG aqui - apenas não a outra direção Para saída AVIF, use um codificador de linha de comando como avifenc ou o pipeline de imagens do seu framework.
Por que meu PNG transparente obteve um fundo preto após a conversão para JPEG?
Como o JPEG não possui um canal alfa, a especificação HTML diz que uma serialização de tela para um formato sem suporte alfa deve compor a imagem em um fundo preto sólido. É um comportamento obrigatório, não é um bug, e é o mesmo em todos os navegadores. Converta para PNG ou WebP se precisar de transparência preservada.
A conversão de uma imagem remove seus dados EXIF?
Sim - tudo isso, incluindo coordenadas GPS, configurações da câmera e data de captura A ferramenta atrai sua imagem para uma tela e recodifica os pixels, e uma tela não carrega metadados. Isso e #39; é útil se você e #39; está retirando dados de localização antes de postar uma foto e um problema se precisar dos metadados, portanto, mantenha um original não convertido de qualquer maneira.
Posso converter um GIF animado em um WebP animado?
Não com esta ferramenta. Ele carrega sua imagem em um <img> elemento e captura um único quadro para a tela, então um GIF animado sai como uma imagem estática WebP animado requer um codificador multi-quadro real - use gif2webp Com as ferramentas do WebP do Google ou converter a animação para MP4, que será dramaticamente menor que qualquer um deles.
A conversão de JPEG para PNG melhorará a qualidade?
No. PNG é sem perdas, por isso preserva exatamente o que ele' s dado - incluindo os artefatos de compressão já cozidos nos pixels JPEG' s. Você acaba com uma imagem de aparência idêntica em um arquivo muito maior Os dados perdidos são perdidos; nenhuma mudança de formato traz de volta.
Existe um limite de tamanho de arquivo?
Nenhum limite rígido é aplicado O teto prático é o seu dispositivo' s memória, uma vez que toda a imagem é decodificada em um bitmap de tela em aproximadamente largura × altura × 4 bytes - uma foto 8000×6000 precisa de cerca de 192 MB de RAM como pixels brutos antes mesmo de a codificação começar Os navegadores de mesa lidam com a saída típica da câmera sem reclamação; telefones mais antigos podem ter dificuldades com arquivos muito grandes.
Qual é a diferença entre PNG e JPEG?
JPEG tem perdas e é construído para fotografias: descarta detalhes finos para alcançar pequenos arquivos e não possui transparência. O PNG não tem perdas e é construído para gráficos, capturas de tela e logotipos: ele mantém todos os pixels exatamente e suporta um fundo transparente, ao custo de arquivos maiores para fotos. Você pode converter entre eles aqui, mas lembre-se de que um PNG transparente salvo, pois o JPEG obtém um plano de fundo sólido, pois o JPEG não possui um canal alfa.
Como faço para converter uma imagem para WebP gratuitamente?
Carregue seu PNG ou JPEG, escolha WebP como formato de saída, defina a qualidade se quiser um arquivo menor e baixe - ele é gratuito e roda inteiramente em seu navegador WebP é geralmente a conversão que vale a pena fazer para a web, uma vez que é menor que JPEG e PNG, embora ainda suporte transparência e é lido por todos os navegadores atuais.
Minha imagem é carregada em um servidor?
Não. O arquivo é lido localmente com um URL de objeto, decodificado pelo seu navegador, recodificado pelo seu navegador & #39; s canvas e salvo pelo seu navegador. Você mesmo pode verificar isso: abra o DevTools, vá para a guia Rede e converta uma imagem - você e #39; não verá upload. Depois que a página for carregada, a conversão funciona com o Wi-Fi desligado.
a versão curta
Um canvas do navegador é um bom e honesto conversor de imagens para três formatos e ruim para todo o resto. Em PNG, JPEG e WebP, é instantâneo, privado e gratuito, e cobre a conversão que realmente importa para a web: levar suas fotos ao WebP. Fora essas três, não pode ajudar e prefiro dizer isso do que deixar você descobrir com um retângulo preto na página inicial de um cliente.
Antes de converter qualquer coisa, pergunte se você precisa de transparência (então não JPEG), se você precisa dos metadados (então mantenha o original) e se a imagem é simplesmente demasiados pixels (então redimensionar primeiro). Obtenha os três certos e a escolha do formato é a parte mais fácil.
o conversor de formato de imagem está aqui. Para o restante do fluxo de trabalho de imagens, há o compressor de imagem, o Redimensionamento da imagem ferramenta, e - para recortes de fundo plano - o removedor de fundo. A imagem mais ampla está no Guia de ferramentas de imagem e o Guia de compressão de imagens.
