Introdução ao formato WebP
WebP é um novo formato de imagem desenvolvido pelo Google. Ele oferece suporte à compressão com perdas, à compressão sem perdas e à transparência, e os arquivos comprimidos são menores que os de JPEG, PNG e outros formatos. Assim, é possível economizar largura de banda, reduzir o tempo de carregamento das páginas e diminuir o consumo de dados dos usuários.
Os aplicativos Android e iOS podem oferecer suporte ao formato WebP com muita facilidade, bastando incorporar a biblioteca de decodificação fornecida pelo Google. Na web, porém, o suporte ao WebP ainda não é muito difundido, segundo Dados do Can I Use，atualmente, apenas os navegadores Chrome e Opera, além do WebView do Android, oferecem suporte ao WebP. Mas, com tantas vantagens das imagens WebP, será que podemos usá-las em páginas web? Sim. Este artigo vai discutir essa questão.
Converter as imagens existentes para o formato WebP
Para usar o formato WebP, você precisa criar uma versão nesse formato de todas as imagens utilizadas no seu site. Se você usa um provedor de CDN, ele geralmente oferece uma opção de conversão para WebP. Por exemplo, a Upyun:
Após adicionar essa configuração, podemos usar os recursos na versão WebP acrescentando o sufixo correspondente à URL da imagem.
Você também pode usar plugins do webpack e do gulp para converter formatos de imagem em lote. Não entrarei em detalhes aqui.
Usar o formato WebP no navegador
Como nem todos os navegadores oferecem suporte ao formato WebP, temos duas abordagens: usar WebP apenas nos navegadores que oferecem suporte a esse formato; ou fazer com que os navegadores sem suporte passem a aceitá-lo.
Abordagem um: <picture>Tags
<picture>é uma nova tag do HTML5, semelhante a <video>Ele também permite especificar recursos em vários formatos, para que o navegador escolha e carregue um formato compatível.
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
Se o navegador oferecer suporte ao formato WebP, carregará image.webp，caso contrário, carregará image.jpg。
Mesmo que o navegador não ofereça suporte a <picture>tag, a imagem continuará sendo exibida normalmente, mas o CSS talvez não consiga selecioná-la corretamente picture elementos. Por exemplo, no IE8, o CSS abaixo não terá efeito:
.picture img { width: 100px; height: 100px;
}Mas é possível definir o estilo da imagem assim:
.image { width: 100px; height: 100px;
}Mesmo que o navegador use imagens no formato WebP, no fim ainda será aplicado img o estilo dos elementos.
Porém, desde que se utilize html5shiv，fazendo com que navegadores antigos aceitem essa tag e os seletores CSS possam funcionar normalmente.
Esse método é o mais simples, mas não funciona com imagens definidas em CSS (como imagens de fundo).
Abordagem dois: usar JS para substituir a URL da imagem.
Muitas de nossas páginas costumam usar o “carregamento sob demanda” de imagens — geralmente colocando a URL da imagem em img em um atributo personalizado do elemento e, depois, usar JS para atribuir a URL a src atributo. Aplicando um princípio semelhante, podemos, de acordo com o suporte do navegador ao formato WebP, atribuir a img atribuir diferentes ao elemento src valor.
Primeiro, precisamos usar JS para verificar se o navegador oferece suporte ao formato WebP. O método consiste em fornecer ao navegador uma imagem WebP e verificar se ele consegue renderizá-la corretamente. Esse método é assíncrono, portanto as operações seguintes precisam ser escritas em uma função de callback. Podemos armazenar o resultado em localStorage dentro, para que depois não seja necessário verificar novamente.
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}Depois, use o código abaixo para substituir o src correspondente conforme haja ou não suporte a WebP.
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);A vantagem dessa abordagem é poder combiná-la com funções existentes de carregamento sob demanda. Além disso, usando JS, também podemos processar imagens no CSS (como imagens de fundo).
Abordagem três: usar JS para decodificar imagens WebP
Já que o decodificador de WebP é de código aberto, seria possível implementá-lo em JS? Claro que sim,Alguém chegou a escrever um decodificador de WebP em JS。A inclusão dessa biblioteca JS permite decodificar todas as imagens WebP com JS e convertê-las em base64，e depois substituir a URL original. Assim, navegadores que originalmente não ofereciam suporte a WebP conseguem exibi-lo normalmente. Essa biblioteca é muito simples de usar; basta consultar as instruções na página.
A desvantagem desse método é que, como o JS precisa decodificar a imagem WebP, é necessário solicitar novamente, de forma assíncrona, a URL em src（mas, como a imagem já havia sido baixada uma vez, o cache é usado diretamente）；além disso, a decodificação em JS é relativamente lenta e afeta o desempenho, de modo que a imagem pode demorar um pouco para aparecer.
Essas são algumas maneiras de usar imagens WebP no navegador; você pode escolher conforme sua situação. Na nossa experiência, após adotar o formato WebP, o tamanho das imagens geralmente diminuiu em mais de 1/3, acelerando o carregamento e economizando o tráfego de dados dos usuários. Recomendamos fortemente começar a usar esse formato desde já.
