网站图片尺寸优化方案

网站图片尺寸优化方案

http://netkiller.github.io/journal/image.html

Mr. Neo Chen (netkiller), 陈景峰(BG7NYT)

中国广东省深圳市龙华新区民治街道溪山美地
518131
+86 13113668890
+86 755 29812080
<netkiller@msn.com>

版权 © 2011, 2012, 2013, 2014 http://netkiller.github.io

版权声明

转载请与作者联系，转载时请务必标明文章原始出处和作者信息及本声明。

文档出处: http://netkiller.github.io http://netkiller.sourceforge.net

 

2014-04-21

摘要

我的系列文档

Netkiller Architect 手札	Netkiller Developer 手札	Netkiller PHP 手札	Netkiller Python 手札	Netkiller Testing 手札	Netkiller Cryptography 手札
Netkiller Linux 手札	Netkiller Debian 手札	Netkiller CentOS 手札	Netkiller FreeBSD 手札	Netkiller Shell 手札	Netkiller Security 手札
Netkiller Web 手札	Netkiller Monitoring 手札	Netkiller Storage 手札	Netkiller Mail 手札	Netkiller Docbook 手札	Netkiller Version 手札
Netkiller Database 手札	Netkiller PostgreSQL 手札	Netkiller MySQL 手札	Netkiller NoSQL 手札	Netkiller LDAP 手札	Netkiller Network 手札
Netkiller Cisco IOS 手札	Netkiller H3C 手札	Netkiller Multimedia 手札	Netkiller Perl 手札	Netkiller Amateur Radio 手札

---

1. 背景

某天我的前同事给我打电话，说他们的负载很高，经查发现网站首页有20M，原因是首页直接引用高清图片，没有安装分辨率生成缩图。于是我便想出了下面的方案。

我认为方案需求有如下几个要素：

1. 图片压缩

2. 尺寸修改

3. 图片缓存

4. 带宽因素

例如用户使用手机访问网站，手机屏幕尺寸非常多样化，常见的有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取出参数，然后告知服务器端。

有下面几种实现方式：

1. 通过cookie

2. post传递给服务器，然后存储在session中

3. 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服务器实现原理相同