nginx webp 响应式图片

作者 : 开心源码 本文共4325个字,预计阅读时间需要11分钟 发布时间: 2022-05-11 共82人阅读

nginx webp 响应式

nginx webp 响应式图片

说是“响应式”,其实就是针对同一个图片URL,根据用户端能否支持 webp 图片,返回webp版本或者者原图, 实在不知道怎样起个名字(Naming is the most difficult thing in programming),就跟潮流使用个所谓的 “响应式”吧……

现状分析

目前H5上用了非常多的图片,由于很多页面都是经营、产品直接通过内部的 page builder系统生成, 大量的2x图片,导致页面渲染很慢。

尽管我们静态资源都会缓存在CDN上,但是手机里看H5,还是发现很慢,貌似并没有缓存住,每次都发了请求。

处理方案

最终效果:希望可以做到 同一个图片URL,针对不同终端返回不同的图片,即具体业务开发时,对图片URL 不需要做任何修改,在支持 webp 的终端,返回 webp 版本;其余情况返回原图。

假如不修改图片URL,那怎样处理被CDN缓存的问题呢?在下面腾讯云的这篇文章里,看到了 Vary 这个 http header,能使用来实现,同一个URL在CDN上根据不同的 http request header 来缓存不同 的内容,具体能看文末的 MDN 文档。

处理了CDN缓存问题,现在面临 webp 图片怎样生成的问题了,主要这两个办法:

· 在CMS上传图片时,当时就生成对应的 webp 版本

· 在 nginx 上,收到图片请求时,第一次动态生成 webp,以后就读取生成的图片

第1个方案,实现上要简单些,并且操作是离线的,不会影响线上业务;但也有缺点,线上已经存在的大量图片, 需要想办法来产出webp版本。

第2个方案,表面看是在线实时生成,其实也能认为是离线的。由于我们在页面里用图片,都是先上传CMS, 而后会在各个环境里访问,这时候,nginx上已经生成了webp,等到线上普通使用户访问的时候,其实是不会 动态生成的。当然,对于那些已经存在的图片,还是会在第一次访问的时候,动态去生成webp版本。

看了网上少量文章,大多是在 nginx 上直接使用 lua脚原本生成的,看来这个方案在生产环境还是比较稳固了。 就采使用方案2了。

采使用方案2,其实还有个问题,我们知道,现在前台的图片资源,一般都是 强缓存(设置很大的 max-age) 的, 保证图片会在浏览器、CDN上都缓存很长时间,但有的时候,我们在源站修改了图片,需要强制终端刷新,假如 不可以修改图片的文件名,那一般就是在图片的 URL 上加个 query 参数,来强制终端和CDN刷新。但是 上这个 webp 的响应式方案后,假如回源到服务器的图片请求,含有query参数 ,怎样办呢?我们 当然 不可以 每次都重新生成 webp版本,毕竟这个还是要耗费服务器资源的。大概方法还是有2个:

· 简单做,针对包含了 query 参数的图片请求,直接返回原图,不尝试webp版本

· 完美点,不同 query的图片对应不同的 webp版本,这就需要在生成 webp时,把 query 也作为 文件名的一部分来存储。

昨天原本想简单搞的,现在看来,还是先尝试完美一点的方案吧~; 针对不同query的图片都生成一份 webp版本,容易被攻击,还是放弃这个方案了,假如图片请求包含了query参数,直接返回原图

demo开发中,遇到个问题,在location中用了add_header Vary 'Accept' ; 来添加响应的header, 但是发现实际没生效,应该和lua代码中的ngx.exec(somePath)有关系。

不仅上面这个问题,即便在lua代码中,用 ngx.header.Vary = 'Accept' 增加的header,也有个诡异 的问题,加上这个header后,Content-Type 变了,不是返回的 image/webp, 而是原图对应的 MIME。 这就尴尬了……

撸码过程

nginx lua支持

嗯,第一步就卡住了,发现我们目前的 nginx 没有支持 lua脚本,还得找OP同学帮忙重新编译 nginx了。

安装 lua 5.1.5

下载安装 lua 5.1.5,

lua 包依赖:

yum install readline readline-devel

tar xzf lua-5.1.5.tar.gz

cd lua-5.1.5

make linux

make test

make install

安装 LuaJIT 2.0.5

下载 LuaJIT 2.0.5,

make

make install

下载 ngx_devel_kit

下载

cd ngx_devel_kit-0.3.0

下载 lua-nginx-module

下载

cd lua-nginx-module-0.9.20/

编译 Tengine 1.5.2

用的是 Tengine 1.5.2, 对应 nginx 1.2.9

坑爹啊,这个版本的 tengine 1.5.2 编译 lua-nginx-module-0.9.20 总是报错,后来重新下载 才编译通过!!

cd tengine-1.5.2

export LUAJIT_LIB=/opt/app/LuaJIT-2.0.5/lib

export LUAJIT_INC=/opt/app/LuaJIT-2.0.5/include/luajit-2.0

./configure –prefix=/home/tomcat/program/tengine –with-ld-opt=”-Wl,-rpath,/opt/app/LuaJIT-2.0.5/lib” –pid-path=/home/tomcat/program/tengine/var/run/nginx.pid –lock-path=/home/tomcat/program/tengine/var/run/nginx.lock –with-openssl=../openssl-1.0.1t –user=tomcat –group=tomcat –with-http_ssl_module –with-http_gzip_static_module –with-http_upstream_check_module –with-http_stub_status_module –add-module=/home/tomcat/source/ngx_devel_kit-0.3.0 –add-module=/home/tomcat/source/lua-nginx-module-0.7.19

上述nginx安装完只,在 nginx.conf 中加入测试代码:

location /hello {

default_type 'text/plain';

content_by_lua 'ngx.say(“hello, lua”)';

}

重新nginx, 浏览器访问 /hello,终于OK了 🙂

安装过程参考资料:

* http://tengine.taobao.org/documentation.html

* https://laijinman.com/installing-nginx-and-lua

* https://github.com/openresty/lua-nginx-module/tree/v0.9.20#installation

CentOS上安装 libwebp

CentOS上安装依赖包:

yum install libjpeg libjpeg-devel

yum install libpng libpng-devel

yum install giflib giflib-devel

yum install libtiff libtiff-devel

# yum install freetype freetype-devel # 官网上没有安装这个

完成上面的依赖安装,再下载 libwebp-0.6.0.tar.gz ,从源码安装:

tar xvzf libwebp-0.6.0.tar.gz

cd libwebp-0.6.0

./configure

make

sudo make install

根据官方文档,安装完了之后,提到一个环境变量 LD_LIBRARY_PATH,说是需要把 /usr/local/lib/ 加入到这个环境变量里:

The library will usually be installed under the /usr/local/lib/ directory. To avoid run-time errors, make sure that your LD_LIBRARY_PATH environment variable includes this location

这个在正式环境安装的时候,需要注意下。

lua入门

lua官方网站,貌似没有详细的学习文档!!

* https://www.lua.org/start.html#installing

* http://coolshell.cn/articles/10739.html

* http://www.runoob.com/lua/lua-tutorial.html

lua with nginx

* https://moonbingbing.gitbooks.io/openresty-best-practices/ngx_lua/phase.html

* http://jinnianshilongnian.iteye.com/blog/2190344

相关链接

* https://www.qcloud.com/community/article/164816001481011868

* https://github.com/ShowJoy-com/showjoy-blog/issues/10

* https://www.maxcdn.com/blog/how-to-reduce-image-size-with-webp-automagically/

* https://developers.google.com/speed/webp/

* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary

* https://my.oschina.net/eduosi/blog/169606?utm_source=tuicool&utm_medium=referral

* https://www.igvita.com/2013/05/01/deploying-webp-via-accept-content-negotiation/

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » nginx webp 响应式图片

发表回复