Guia Completo para Usar o Formato de Imagem WebP

WebP, ou não oficialmente pronunciado como weppy, é um formato de imagem introduzido pelo Google Developers há cerca de 5 anos. Se você é um web designer, ou um desenvolvedor que se esforça para reduzir e otimizar o tamanho do arquivo de imagem, o que o WebP é capaz de fazer deve colocar um sorriso em seu rosto.

Em resumo, aqui estão algumas das coisas importantes que você precisa saber sobre esse formato de imagem não tão novo, mas ainda assim legal:

WebP passa pela extensão de arquivo de .webp.
WebP adota compactação com perdas e sem perdas.
Imagens com perda de WebP são potencialmente 25-34% menor que JPEG.
Imagens sem perda de WebP são potencialmente 25% menor em comparação ao PNG.
O WebP suporta transparência sem perdas, ou seja, PNG com canal alfa.
O WebP suporta animação. ou seja, GIFs animados.

Em suma, o WebP é capaz de reduzir significativamente o tamanho do arquivo de imagem JPEG, GIF, PNG. Aqui está uma atualização no WebP que você deve verificar antes de entrarmos nas coisas divertidas.

Um experimento

As melhores coisas sobre reclamações na Web são que podemos sempre executar experimentos para verificar a veracidade e autenticidade. Aqui estão algumas experiências que fiz para descobrir quão pequena uma imagem pode potencialmente depois de serem convertidos de vários formatos de imagem (JPEG, PNG e GIF) para WebP.

1. JPEG - imagem com perdas

Aqui está uma imagem JPEG aleatória que eu peguei da Pexels. Arquivo original - 165kb. ↓

A imagem é otimizada com o JpegMini. Novo tamanho de arquivo - 101kb. ↓

Finalmente, a mesma imagem é convertida para o formato WebP. Tamanho final do arquivo - 70kb. ↓

Em uma nota lateral: Aqui estão os diferentes arquivos se a mesma imagem foi convertida para os seguintes formatos:

GIF - 285kb
PNG 8 - 241,2 kb
PNG 24 - 657,6 kb

2. PNG - imagem sem perdas

Agora, vamos tentar com o PNG com transparência. (Fonte). Arquivo original - 587kb. ↓

Aqui está a imagem otimizada com tinypng. Novo tamanho de arquivo - 278 kb. ↓

E por último, a imagem convertida em formato WebP. Tamanho final do arquivo - 112kb. ↓

3. GIF animado

Quando convertida para WebP, uma imagem JPEG passou de 165kb para 70kb, enquanto uma imagem PNG passou de 587kb para 112kb.

Vamos ver como um GIF animado se comporta:

Tamanho original - 6.8mb
WebP tamanho do arquivo - 6.3mb

Resumo:

Aqui está uma tabela para resumir toda a experiência:

	Perdido (JPG)	Sem perdas (PNG)	Gif Animado
Original	165kb	587kb	6,8mb
Otimizado com ferramentas	101kb	278 kb	-
Formato WebP	70kb	112kb	6,3mb

Sem nos concentrarmos muito nos cálculos matemáticos, esses números indicam uma redução substancial do tamanho dos arquivos e, a julgar pelas imagens, você não pode realmente dizer a diferença em termos de clareza e resolução. Tamanhos de arquivo menores e mais leves com o mesmo nível de qualidade de imagem, o WebP definitivamente vale a pena.

Convertendo para o WebP com ferramentas

Se você já está a bordo e gostaria de começar a lançar imagens no formato WebP, vamos ver como você pode converter suas imagens facilmente para este formato. Todos os métodos mencionados abaixo variam em termos de controles, facilidade de uso e convinência. Escolha seu veneno.

WebPonize para Mac

WebPonize é provavelmente a maneira mais simples e rápida de converter imagens para o formato WebP no Mac. Tudo que você precisa fazer é apenas arrastar e soltar suas imagens no WebPonize e ele fará a conversão. Você receberá a saída, o tamanho anterior, depois do tamanho e a porcentagem de redução do arquivo original. [Download WebPonize]

Webpconv para janelas

Se você estiver executando o Windows, o Webpconv é o aplicativo que você deve instalar. Ele também vem em versão portátil para que você possa executá-lo independentemente em sua unidade flash. [Download do Webconv]

Convertendo com linhas de comando

Se você está se sentindo nerd, provavelmente você vai querer extirpar a conversão usando linhas de comando. cwebp converte suas imagens JPEG, PNG ou TIFF em formato WebP e dwebp converte-os de volta para o formato PNG. Vamos ver como isso funciona.

Nota: O seguinte guia para o Mac OS X. Para usuários do Windows e Linux, clique aqui.

Configurando MacPorts no Mac OSX

Primeiro, verifique se você tem o Xcode instalado e siga estas etapas:

Baixe e instale o MacPorts. Se você já tem o MacPorts instalado no seu Mac, vá para a etapa 2.
Lançamento terminal.
Tipo "sudo port selfupdate"e aperte enter. Isso atualizará seu MacPorts para a última versão.
Em seguida, digite "sudo port install webp"e aperte enter. Isso instalará libwebp (Biblioteca WebP).

É isso aí. Agora vamos dar uma olhada como converter imagens para o WebP usando a linha de comando.

Comandos para converter / reverter

Aqui estão os comandos para:

I - Converta arquivos de imagem JPEG / PNG para o formato WebP

Formato: cwebp -q [image_quality] [nome_da_fila_JPG / PNG] -o [nome_do_arquivo_Web]

Exemplo:

cwebp -q 80 example.png -o example.webp

II - Arquivos de imagem do Covert WebP de volta ao PNG

Formato: dwebp [WebP_filename] -o [PNG_filename]

Exemplo:

dwebp image.webp -o image.png

Mais: Se você perfer conversão por outros meios, aqui estão as instruções para o uso de tarefas Grunt e Gulp para converter arquivos JPG / PNG para WebP.

Converter com ferramentas on-line

Se você não deseja instalar nenhum aplicativo em seu sistema operacional para executar essa tarefa, opte por essas ferramentas on-line. Aqui estão alguns que eu vim a conhecer:

Online-converter.com
Webp-convertor.com
Zamzar

Gorjeta: Se você google converter webp online , você provavelmente encontrará mais opções.

Plugin do Photoshop

Você pode ficar feliz em saber que há também um Plugin do Photoshop que permite salvar imagens no formato WebP via Photoshop. Este plugin suporta Mac OS X (CS 2- CS 6) e Windows (32 bits e 64 bits). [Baixe o plugin aqui.]

Nota: Só pensei que você deveria saber que eu tentei no Photoshop CC. Não funcionou lá.

Suporte ao Navegador WebP

Por último, vamos falar sobre compatibilidade. Atualmente, você pode visualizar imagens no formato WebP nos seguintes navegadores (ref):

Chrome / Chrome para iOS
Opera / Opera Mini

Não muita sorte para Raposa de fogo e Safári, que ainda não suportam o formato WebP nativamente. No entanto, você pode usar a biblioteca JavaScript WebPJS para converter imagens do WebP em string dataURI no site do cliente.

Volte para outros formatos de imagem

É sempre uma boa ideia usar um fallback para evitar a exibição de erros de imagem devido a navegadores não compatíveis. Nesse caso, o fallback será para a imagem no formato JPG ou PNG. Veja como você faz isso.

  fonte srcset = "example.webp 1x" tipo = "imagem / webp">

Para este código, images / complete-guide-to-usando-webp-imagem-format_13.jpg será carregado se o usuário usou o Firefox ou Safari.

Visualizando imagens do WebP

Você pode visualizar imagens do WebP em brindes do Chrome e do Opera. Mas se você quiser fazer isso localmente em sua máquina, você precisará de algumas ferramentas.

Usuários do Mac podem usar o WebPQuickLook para visualizar imagens no formato WebP usando a função Quick Look (com a imagem selecionada ou realçada, pressione a barra de espaço).

Para usuários do Windows, o WebPCodec exibirá uma visualização em miniatura das imagens do WebP no Gerenciador de arquivos. Ambos os equivalentes WebP e JPEG serão mostrados. Em certos sistemas operacionais Windows suportados (Vista, 7, 8), a imagem WebP também pode ser mostrada no Windows Photo Viewer.

Mais: O ReSCR.it entrega imagens no formato WeBP automaticamente e está disponível se você armazenar suas imagens com o MaxCDN. (Consulte Mais informação)

Referências adicionais

Convertendo GIF Animado para WebP
Como funciona o WebP
Implantando o WebP via Accept Content Negotiation
Web mais rápida, menor e mais bonita com o WebP
Implantando novos formatos de imagem na Web
Documentação da API WebP