Transformar imagens JPG e PNG em WebP

Resumidamente, WebP é um formato de imagem, desenvolvido pela Google, que usa compressão com perdas e sem perdas, suportando animação e transparência. A proposta é a de gerar arquivos menores e com a mesma qualidade (ou superior com mesmo tamanho) que outras imagens em JPG, PNG ou GIF.

Desejava aumentar a pontuação nas páginas que testam desempenho de sites e, um dos pontos questionados, era de que as imagens do site não eram WebP.

Decidi resolver usando um script bash nos diretórios que haviam os arquivos específicos. Pra mim deu super certo e, por isso, disponibilizo o que fiz para quem quiser utilizá-lo.

Pode não ser o script mais otimizado. Sendo assim, se houver alguma sugestão, me envie uma mensagem ou um comentário (disponibilizei no github, também).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#!/bin/bash

#Irá rodar na pasta que se encontra e funcionará conforme configuração das variáveis

######################
# VARIÁVEIS
######################
#pastas separadas por | se tiver mais de uma
#PASTAS="dir1|dir2|dir3"
PASTAS="static/images|content"
#extensões das imagens que irá transformar em WebP (se mais de um, separar por |)
EXTENSOESIMAGENS="jpg|png"
#extensões dos arquivos texto que serão modificados de jpg|png para WebP (se mais de um, separar por |)
#EXTENSOESTEXTOS="php|html|htm"
EXTENSOESTEXTOS="md"

#organiza as extensões para o sed, para ficar jpg\|png por exemplo
EXTENSOESIMAGENSSED="`echo $EXTENSOESIMAGENS | sed -e 's@|@\\\|@g'`"


######################
# COMEÇANDO
######################
#checa se tem o WebP instalado
if ! command -v cwebp &> /dev/null
then
    echo "O pacote WebP não foi instalado!"
    echo "Instale-o para executar o script"
    echo "Se Debian/Ubuntu, execute: sudo apt install WebP"
    exit
fi


echo "
##############################
## Gerando os arquivos WebP ##
##############################
"
find . -type f -regextype posix-egrep -regex "./($PASTAS)/.*.($EXTENSOESIMAGENS)" -exec bash -c 'for arg; do cwebp -quiet -q 80 $arg -o ${arg%.*}.webp ; done' find+bash {} +


echo "
###########################################################
## Modificando arquivos para referenciarem os novos WebP ##
###########################################################
"
find . -type f -regextype posix-egrep -regex "./($PASTAS)/.*.($EXTENSOESTEXTOS)" -print0 | xargs -0 sed -i "s@\($EXTENSOESIMAGENSSED\)@webp@g"


echo "
##############################
## Apagando os arquivos $EXTENSOESIMAGENS
##############################
"
find . -type f -regextype posix-egrep -regex "./($PASTAS)/.*.($EXTENSOESIMAGENS)" -exec \rm {} \;

Espero que possa ter lhe ajudado em alguma coisa e até mais. 🙂

Photo by Aaron Burden on Unsplash