O Insights também recomenda que você transmita imagens em formatos de próxima geração, como WebP e AVIF, em vez de PNG ou JPEG:
Sirva imagens em WebP ou AVIF para ajudar sua página a carregar mais rapidamente – Fonte: PSI Quais são os benefícios de transmitir imagens em um formato de próxima geração como o WebP? As imagens WebP são cerca de 30% menores em comparação com PNG ou JPEG. Como mostrado abaixo, o formato PNG faz um bom trabalho na otimização de imagens, mas está desatualizado pelo WebP (este último). Smashing WebP File Size Images – Fonte: Smashing Magazine Note que, para a maioria dos sites, as imagens são os principais culpados para desacelerar o seu site. Imagens grandes não só retardam seu site, mas também aumentam o peso da página. Isso afetará o desempenho do seu celular, pois uma página pesada levará mais tempo para carregar em redes móveis.Finalmente, a velocidade do site é um fator importante levado em conta pelo Google na determinação dos rankings. Se você não quiser que ele apareça na página 5, lembre-se de otimizar suas imagens usando um formato de próxima geração como o WebP. Vamos ver como converter suas imagens para WebP no WordPress. Como executar imagens em formatos de próxima geração no WordPress A maneira mais fácil e rápida de converter imagens para formatos de próxima geração é usar um plugin WordPress. No entanto, você pode otimizar e converter imagens manualmente. Vamos rever ambos.
Opção 1 – Como converter imagens para formatos de próxima geração com um plugin Como sempre, usar um plugin WordPress economiza uma quantidade preciosa de tempo. Até o Google recomenda usar um plugin para converter imagens carregadas para WebP ou Avif. PSI recomenda plugins WordPress Existem seis plugins principais que você pode usar para otimizar suas imagens e servi-las em formatos
próxima geração, a saber: Imaginy – um plugin de conversão WebP gratuito para cerca de 200 imagens. Também Imagify redimensiona e comprime imagens para aumentar o desempenho (bônus: tutorial completo e teste de desempenho incluídos em nosso artigo). WebP express – adiciona uma linha simples de código para servir imagens WebP. EWWW – uma opção de conversão inteligente para obter o formato de imagem certo para o trabalho (JPG, PNG, GIF ou WebP). Shortpixel Image Optimizer – converte qualquer JPEG, PNG ou GIF para WebP e AVIF. Smush – converte para WebP e veicula automaticamente imagens no formato WebP de próxima geração (apenas versão pro). WebP Media Converter – substitui arquivos nos formatos JPEG, PNG e GIF padrão pelo formato WebP. Como converter imagens para WebP usando o Imaginy
Vamos ver um exemplo de conversão WebP usando o plugin Imagify. Leva apenas três passos Passo 1 – Baixe e instale Imagify gratuitamente. Ative o plugin e crie sua chave de API. Passo 2 – Vá para Configurações > Imagem e role até a guia Otimização. Selecione \ Nota importante: Imagens WebP recém-geradas não serão exibidas na biblioteca WordPress. Se você quiser verificar se a conversão foi bem-sucedida, abra a página da Web que mostra a imagem. Em seguida, vá para a guia Desenvolvedor do Chrome > Inspecionar Item > Rede > Filtrar por IMG e olhe para a coluna Tipo. Agora você deve ver o formato \
detalhado sobre a transmissão de imagens para WebP usando Imagify.
Opção 2 – Como transmitir imagens em formatos de próxima geração sem um plugin Se você não quiser usar um plugin para converter suas imagens para o formato de próxima geração, você pode adicionar manualmente um pedaço de código. Aqui estão duas opções diferentes que você pode seguir para o seu site. WordPress. 1. Edite seu arquivo WordPress diretamente. htaccess Recomendamos que você só siga esta opção se você se sentir muito confortável codificando e editando arquivos do site. O ficheiro. htaccess é um poderoso arquivo de site que controla a configuração de alto nível do seu site.
Coloque o seguinte código do GitHub em seu arquivo. . htaccess para substituir imagens jpg\/png\/gif por imagens WebP: RewriteCond%{HTTP_ACCEPT} image\/webp # Verifique se a imagem de substituição do WebP existe RewriteCond%{DOCUMENT_ROOT}\/$1. webp -f # Serve imagem WebP em vez de RewriteRule (+)\. (jpe?g|png|gif)$ $1. webp [T=image\/webp,E=REQUEST_image] # Variar: Aceitar para todas as solicitações para jpeg, png e gif Cabeçalho anexar Vary Aceitar env=REQUEST_image AddType image\/webp. webp 2. Use o item de HTML
A modificar o ficheiro. htaccess pode ser difícil. Uma opção mais responsável é usar o rótulo . Neste caso, o navegador escolherá automaticamente o formato de arquivo apropriado para exibição. Como visto acima, você pode usar o plugin Imagify para converter suas imagens WordPress para WebP, o formato de próxima geração recomendado pelo Google. Imagify também permite otimizar várias imagens redimensionando e comprimindo-as automaticamente (e em massa).
Seria interessante fazer alguns testes de desempenho para confirmar o que eu disse. Vou executar dois cenários: Cenário 1 – Resultados de desempenho com imagens JPEG (sem imagem) 13 imagens servidas em formato JPEG Imagens
75\/100 a 92\/100 no telemóvel! Pontuação PSI melhorada em dispositivos móveis usando Imagify
KPIs
Pontuação móvel – imagens JPEG ( Sem imagem )
Pontuação móvel – Imagens WebP e modo agressivo (com Imagify)
Tempo de carregamento
2,890 s
| Nota Geral | |
| 92\/100 | |
| 1,059 s | „ Servir imagens em formatos de nova geração\
|