网站图片尺寸优化方案

netkiller- 发布于 2014/05/16 22:51
阅读 308
收藏 13

网站图片尺寸优化方案

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

MrNeo 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

摘要

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


加载中
返回顶部
顶部