Eu quero otimizar algumas imagens no meu site usando o formato WebP.
Imagens webp são jpegs e pngs altamente compactados com a ajuda de algoritmos desenvolvidos no Google.
No entanto, as imagens da webp podem ser exibidas apenas no Chrome e no Opera modernos.
Se o navegador suportar webp, ele especifica image/webp em Accept cabeçalho HTTP.
É uma boa idéia fazer check-in no nginx se o navegador suportar o formato webp e se a versão webp da imagem existir no disco e, se for o caso, exibir imagem webp, se não for - exibir imagem padrão.
Por exemplo:
http://example.com/dog.png , Accept: image/webp, image/png, image/jpeg . nginx deve enviar dog.png.webp
http://example.com/dog.png , Accept: image/png, image/jpeg . nginx deve enviar dog.png
Um pouco mais de explicação pode ser encontrada nesta configuração do nginx https: // github.com/igrigorik/webp-detect/blob/master/nginx.conf e https: // github.com/kavu/sprockets-webp #nginx
Tudo bem. Mas estou usando o CloudFlare CDN para acelerar a entrega de recursos.
Com essas condições de veiculação de imagem, devemos adicionar o cabeçalho Vary: Accept , para que o cache no navegador e no proxy funcione corretamente. Mas há um problema! CloudFlare suporta apenas Vary: Accept-Encoding . Isso é descrito aqui .
Os clientes receberão a versão da imagem que foi armazenada em cache pela CloudFlare primeiro (webp ou regular) e, se o cliente não suportar webp, ela não verá a imagem e será terrível.
Existe alguma solução?