WEB 线上图片优化操作

考虑到 UI 反馈图片压缩后图像变模糊，故取消图片压缩。以下操作不压缩，不改变原有图片，仅做无损转码与 webp 自适应式配。

执行步骤

第一步在 magenta 项目 pub/media 目录下执行

find ./ -name "*.jpg" -exec cwebp -q 85 {} -o {}.webp \;
find ./ -name "*.png" -exec cwebp -q 85 {} -o {}.webp \;
find ./ -name "*.gif" -exec gif2webp -q 100 {} -o {}.webp \;

第二步

Nginx 增加 webp 自适应选择选择

    map $http_accept $webp_suffix {
        default   "";
    "~*webp"  ".webp";
    }

    server{
        ……
        location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
        ……

            add_header Vary "Accept-Encoding";
        try_files $uri$webp_suffix $uri =404;

        ……
    }

第三步

CloudFront 增加 header 白名单：

    Accept

优化支持的浏览器

![截屏2020-10-15 上午11.52.27](https://img.vexrobot.cn/docs/截屏2020-10-15 上午 11.52.27.png)

撤销优化：删除 media 下所有 .webp 格式文件，取消配置即可。

参考资料：

https://www.zmxcn.cn/291.html

https://www.friism.com/webp-content-negotiation-cloudfront/

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Accept

https://www.jefftk.com/p/webp-quality-settings

https://centminmod.com/webp/

https://xbl.github.io/2016/09/01/WebP%E4%B8%8ENginx%E5%AE%9E%E8%B7%B5/

跨域的问题：

https://sijie.wang/posts/cloudfront-cors/

WEB 线上图片优化操作