Imagens WEBP no WordPress

Introdução Extensão WEBP No WordPress.

Aqueles que estão envolvidos no desenvolvimento em aplicativo voltados para WEB estão se deparando com uma nova extensão de arquivos para imagens, a extensão WEBP .webp. Essa extensão foi criada em 2010 pela gigante da web Google e promete reduzir em ate 35% do peso das imagens com JPG e em 25% do peso das imagens salvas com extensão PNG sem perda significativa da qualidade. Parece pouco, porém, se comparamos as inúmeras imagens que as páginas webs exibem em suas homepages, esses valores se tornam bem significativos. E caso avaliarmos os dispositivos mobile que requer mais recursos para processar as imagens e o consumo de banda consideráveis economizados com pacotes de dados, parece bem interessante essas porcentagens à menor nas imagens.

Desde da versão cinco o Worpdress já é compatível com a extensão .webp então os desenvolvedores WP que esse recurso de imagem pode ser usado em seus projetos sem problemas. Outra novidade que a nova versão 10.1 do Jetpack foi incluído a compatibilidade com a imagem CDN com suporte ao formato WEBP, isso significa total suporte a essa extensão deixando o wordepress, Woocommerce totalmente compatível com a extensão webp.

Contudo, nem tudo e mar de rosas… Alguns navegadores ainda não consegui interpretar essa extensão, porém, os browsings mais populares já contam com o recurso Edge, Opera, Chrome e Firefox, esses são os que eu já testei. Entretanto, as matérias que li na internet tem a informações que o navegador Safari ainda não tinha a capacidade de interpretar essa extensão, eu não pude testar por dois motivos; o primeiro que Não há mais suporte pro safari para Windows, o segundo é devido eu não ter nenhum dispositivos com esse navegador para testar.

Uma outra importância na atenção na utilização dessa extensão é para quem desenvolve o método SEO em suas web páginas. Uma imagem bem compactada e de boa qualidade vai alavancar nos sites de buscas, isso é só um exemplo no ganho que podem ter para usar a extensão.

Vamos ao real motivo desse artigo. Já realizando alguns projetos com e-commerce, a maioria dos clientes não querem ter custo com serviço de distribuição CDN, e acaba optando por deixar suas imagens hospedadas no seu próprio domínio apesar de explicar os beneficio de se adquiri tais serviços.

Como desenvolvedor tenho que tentar adequar as necessidade do cliente com seu poder aquisitivo, sempre buscando a melhor clausula para que tudo sai como ele planejou, e pensando nisso que comecei a pesquisar sobre a extensão de arquivos de imagens .webp. Devido há alguns problemas já relatados, fui protelando a utilização dele, porém, quando o WordPress começou a da suporte e o recurso do de CDN implementado pelo seu principal plugin, já animei para começar a adequar as páginas web dos nosso clientes.

Hoje nos temos duas situações; os clientes que já tem seus sites publicados e os novos clientes.

Para aqueles que tem seu sites publicados e desejam trabalhar com a extensão WEBP, devido a centenas de imagens (se for um e-commerce estamos nos referindo até milhares de imagens) e como se deve imaginas com extensões JPG, PNG e GIF, pode ocorrer dificuldades para migrar todas as imagens par a nova extensão, se esse for seu caso. Em breve vamos publicar outro artigo falando de um plugin que vai facilitar sua vida.

Mas no caso de um novo projeto, onde começaremos do zero, acho que é interessante já podermos trabalho com webp. Criando seus sites já com a extensão WEBP ou .webp é limitaremos o problema de ter que no futuro migrar as extensões. Para esse processo, teremos dois artigos, como habilitar o Photoshop e o Gimp para salvar seus projetos com essa extensão.

Caso deseje testar o navegador e as versões que são compatíveis com o webp basta abrir essa página no navegador que queira testar, a imagem da direita do seu monitor e a imagem com a extensão .webp a imagem da esquerda é uma extensão .png, caso a imagem da direita não abra, seu navegador não é compatível com a extensão, caso contrário… Deu bom! Arrastando o limitador no meio da imagem para um lado ou outro podemos comparar a qualidade entre as imagens.

Para ver o poder de compactação webp, o arquivo da imagem acima em .png 7,92kb quando salvei para .webp o peso da imagem caiu para 2,64kb.

Eu dei uma grande resumida no assunto, mais na internet, fazendo uma breve pesquisa, tem vários artigos tratando sobre a extensão com maiores detalhes técnicos, recomendo a leitura.