Tutoriais

HEIC para WebP: O Formato Moderno para Desenvolvedores Web

koboshiCo-founder
·5 min de leitura
Resumo

O WebP oferece compressão moderna sem a bagagem de compatibilidade do HEIC, e quase todo navegador o suporta há anos. Este guia mostra como converter arquivos HEIC para WebP para a web, como é a comparação de tamanhos e como integrar isso a um pipeline.

Um usuário envia uma foto tirada em um iPhone. O arquivo é HEIC, cerca de 1.8 MB. Sua tag <img> não pode contar com ele: o HEIC não tem suporte nativo no Chrome, Firefox ou Edge. Então a imagem vira um JPG de 3.4 MB ou um WebP de cerca de 1.2 MB sem diferença visível. Essa diferença é por que o WebP é a resposta para fotos que chegam em HEIC.

Este guia cobre a conversão de HEIC para WebP, como é a comparação de tamanhos entre formatos e as opções que vão de uma ferramenta no navegador a um comando de shell que você pode inserir em um build.

Por Que WebP e Não HEIC

O HEIC é excelente para armazenar fotos, com cerca de metade do tamanho do JPEG em qualidade igual. Também é inútil na web como formato de entrega. Chrome, Firefox, Edge e Safari suportam WebP há anos, enquanto o suporte a HEIC existe apenas no Safari e em alguns lugares específicos de fabricantes. Você não pode depender do HEIC para imagens enviadas por usuários, e é exatamente por isso que os pipelines de conversão existem.

O WebP cobre o mesmo terreno que o HEIC: é um formato com perdas construído sobre compressão moderna, com um modo sem perdas e transparência alpha. Para uma foto, a diferença prática entre WebP e JPG na mesma qualidade visual é um arquivo cerca de 25 a 35 por cento menor. É uma economia significativa em uma página cheia de imagens.

A Comparação de Tamanhos

A mesma foto de 12 MP, a mesma qualidade visual:

FormatoTamanhoNavegadoresObservações
HEIC~1.8 MBsomente Safariformato de origem dos iPhones
JPG~3.4 MBtodoslinha de base
WebP~1.2 MBtodoscom perdas, com suporte a alpha
PNG~24 MBtodossem perdas, não para fotos

O guia de formatos de imagem para web traz a comparação completa se você precisar do contexto sobre onde o WebP se posiciona diante de JPG e PNG.

Opção 1: Converta no Navegador

O caminho mais simples é uma ferramenta que roda inteiramente no dispositivo. O conversor HEIC para WebP decodifica o HEIC localmente com WebAssembly e grava arquivos WebP, então as fotos nunca saem da máquina. Você pode definir a qualidade, converter uma pasta inteira e baixar os resultados como um ZIP. Isso funciona para conversões avulsas e para um designer ou editor que não se sente confortável na linha de comando.

Opção 2: Converta na Linha de Comando

Para um pipeline, a pilha clássica é libheif mais libwebp. No macOS com Homebrew:

brew install libheif webp

Depois converta com heif-convert e cwebp:

heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp

Ou pule o arquivo intermediário com ffmpeg:

ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp

Ambos os comandos respeitam um argumento de qualidade, e o cwebp tem o conjunto mais amplo de controles, incluindo o modo sem perdas e o -m 6 para a saída mais lenta e menor. Para uma pasta, faça um loop:

for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done

Isso é o suficiente para integrar a um script de shell ou a um job de CI que processa uploads no lado do servidor.

Escolhendo Qualidade e Formato no WebP

Duas decisões afetam a saída mais do que qualquer outra coisa:

  • Com perdas vs sem perdas. cwebp -lossless ou -q 100 com a flag sem perdas mantém cada pixel, mas produz arquivos maiores. Use para capturas de tela, logotipos e qualquer coisa com cor chapada e texto. Use com perdas para fotos.
  • O número da qualidade. -q 82 é um padrão razoável para fotos: visivelmente limpo e muito menor que o JPG. Para alvos de alta qualidade, o -q 90 custa mais bytes, mas fica mais próximo da origem. É a mesma troca das configurações de qualidade do JPG, que HEIC para JPG sem perder qualidade explica em detalhes.

O WebP também lida com alpha, então uma imagem HEIC com canal de transparência sobrevive à viagem, algo que o JPG descartaria.

Uma Nota Sobre Formatos Mais Novos

O AVIF, o sucessor baseado em AV1, geralmente vence o WebP em tamanho, e agora é suportado em todos os navegadores principais. Se você está construindo um pipeline novo e pode escolher seu decodificador, vale a pena testar o AVIF contra o WebP para suas imagens específicas. A contrapartida é a velocidade do codificador e a maturidade das ferramentas, que é por que o WebP continua sendo o padrão seguro para a maioria das equipes. O guia de formatos de imagem para web tem mais sobre onde cada formato se encaixa.

O Resumo

Converta HEIC para WebP para qualquer coisa que vá parar em um site. Ele é suportado em todos os lugares, menor que a alternativa JPG em qualidade igual e conversível com uma ferramenta no navegador ou um pipeline de shell com dois comandos. Mantenha o HEIC original como fonte da verdade, converta no momento do upload ou em um job em lote, e deixe o formato fazer as contas do tempo de carregamento por você.

Mais posts do blog