Ao otimizar o desempenho de um sítio Web, a escolha do formato de imagem é um fator essencial, e o formato de imagem WebP tornou-se a escolha ideal para acelerar muitos sítios Web, devido ao seu excelente desempenho de compressão e à sua rica funcionalidade. Neste artigo, iremos abordar o formato de imagem WebP em pormenor.compatibilidadesituação, e como oDiferentes plataformase utilizá-lo no seu browser.
Introdução ao formato WebP
O WebP é um formato de imagem moderno desenvolvido pela Google e concebido para proporcionar uma compressão de imagem superior, mantendo uma elevada qualidade de imagem. As suas principais caraterísticas incluem:
- Tamanho de ficheiro mais pequenoAo contrário dos JPEGs e PNGs, o WebP normalmente forneceFicheiros mais pequenostamanho, eNenhuma redução significativaQualidade de imagem.
- Funcionalidade rica: ApoioCom e sem perdasCompressão, transparência (semelhante a PNG) e animação (semelhante a GIF).
- Tecnologia de compressão avançadaWebP: O WebP utiliza um algoritmo de compressão avançado que pode ser comparado ao JPEG. declínio 25%-34% O tamanho do ficheiro do
Compatibilidade com o navegador 🌍
O formato WebP é suportado nos browsers modernos da seguinte forma:
- Google ChromeSuporte total (versões desktop e móvel).
- Mozilla FirefoxSuporte total (versões desktop e móvel).
- Microsoft EdgeSuporte total (versão baseada no kernel do Chromium).
- ÓperaSuporte total (versões desktop e móvel).
- SafariSuporte desde o macOS Big Sur e iOS 14.
Para navegadores mais antigos que não suportam o formato WebP (como o Internet Explorer (IE)), pode utilizar o JavaScript ou ferramentas do lado do servidor para executar um fallback de formatação para garantir que a imagem é apresentada corretamente.
Práticas recomendadas para usar imagens WebP
- Recusa de formatoPara se certificar de que todos os utilizadores podem ver a imagem, pode utilizar a função html
<picture>fornece vários formatos de imagem.
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Imagem de exemplo"> </picture>
- Ferramentas de conversão de imagensConverta imagens existentes para o formato WebP utilizando ferramentas online ou offline.
- Ferramentas online: Convertio, RedKetchup.io, CloudConvert
- Ferramentas offlineXnConvert, IrfanView (Windows), WebP Converter, ImageMagick (Mac)
- Configuração do servidor: Certifique-se de que o seu servidor consegue lidar corretamente com o formato WebP. Isto pode ser feito configurando a opção Nginx talvez Apache para suportar imagens WebP.
- Suporte WordPress: De WordPress 5.8 Para começar, o WordPress suporta o formato de imagem WebP de imediato e não são necessárias definições especiais para processar corretamente as imagens WebP.
Verificar a compatibilidade de imagens WebP
- Utilizar as ferramentas de programador do browserCarregamento da página no browser e utilização das ferramentas de desenvolvimento para verificar se a imagem é carregada no formato WebP.
- Guardar imagemClique com o botão direito do rato na imagem e selecione "Guardar imagem como", verifique se a extensão do ficheiro não é
.webp.
observações finais
O formato de imagem WebP é excelente para melhorar o desempenho do sítio Web e a experiência do utilizador. Embora algunsNavegadores mais antigosPode não ser suportado, mas com o fallback de formato adequado e a configuração do servidor, é possível garantir que todos os utilizadores usufruem de velocidades de carregamento de imagem optimizadas. A utilização do formato de imagem WebP pode melhorar significativamente o desempenho geral do seu sítio Web, resultando em posições mais elevadas nas classificações dos motores de busca.
