网站图片尺寸优化方案
Mr. Neo Chen (netkiller), 陈景峰(BG7NYT)
中国广东省深圳市龙华新区民治街道溪山美地
518131
+86 13113668890
+86 755 29812080
<netkiller@msn.com>
版权 © 2011, 2012, 2013, 2014 http://netkiller.github.io
版权声明
转载请与作者联系,转载时请务必标明文章原始出处和作者信息及本声明。
|
|
2014-04-21
1. 背景
某天我的前同事给我打电话,说他们的负载很高,经查发现网站首页有20M,原因是首页直接引用高清图片,没有安装分辨率生成缩图。于是我便想出了下面的方案。
-
图片压缩
-
尺寸修改
-
图片缓存
-
带宽因素
例如用户使用手机访问网站,手机屏幕尺寸非常多样化,常见的有QVGA(320×240)、HGVA(480×320)、WVGA(800×480)、QCIF(176×144)、SVGA(640x480)、WXGA(1280×800)。如果一个用户的手机屏幕是320×240,打开网站后显示1027*768图片很不切合实际。同时用户也多出不少带宽开销。
我们需要给用户更好的体验,就要多从用户的角度去考虑,如根据用户网速,带宽,分辨率,为用户提供更适合他终端的多媒体资源。
2. 实现思路
B/S结构应用程序无法获取客户端的分辨率等信息,我们将采用Javascript取出参数,然后告知服务器端。
-
通过cookie
-
post传递给服务器,然后存储在session中
-
get 传递给服务器,然后存储在session中
仅举一个例子
<script type="text/javascript">
$(function(){
var width=window.screen.height;
var height=window.screen.width;
$.post('http://www.example.com/screen/resize.html',{w:width,h:height});
});
</script>
HTML页面中的图片的引用路径
<img src="http://img.example.com/sample.jpg" />
图片服务器rewrite处理
http://img.example.com/sample.jpg => http://img.example.com/index.php/sample.jpg
index.php会首先载入sample.jpg文件,然后综合网速,带宽,分辨率等因素,重新压缩图片,修改尺寸,发送mime头,输出正文。
3. web或代理服务器插件实现方案
首先我们要将分辨率参数放到cookie中,因为web服务器是可以跟踪cookie数据的
通过 web 扩展实现,例如我们开发一个apache插件,编译后是".so"文件,配置httpd.conf载入插件,插件具体功能是综合网速,带宽,分辨率等因素,重新压缩图片,修改尺寸,最后展现图片。
反向代理与web服务器实现原理相同