网站图片尺寸优化方案-阿里云开发者社区

开发者社区> netkiller> 正文

网站图片尺寸优化方案

简介:
+关注继续查看

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7800 0
大量图片优化
http://blog.csdn.net/yifei1989/article/details/19906821 最近在练习中用GridView加入相册中图片发现加入大量的相片之后,GirdView会变得很卡,想到或许可以用异步加载的方式来解决,但是能力有限,想得到却无法实现。在读了一些大牛的博客和代码之后,终于实现了。 1  在异步加载之前的代码的和普通加载代码一样,只
1137 0
silverlight.net官方网站图片切换源码
下午心血来潮,想看看MS的开发人员是如何做silverlight的,出于学习目的把silverlight.net官方首页的图片轮换通过分析html源代码,下载xap后反编译了一下,分析后的源代码略作修改备份于此,希望对大家学习silverlight有用,请勿用于非法商业用途。
851 0
+关注
netkiller
Nickname:netkiller | English name: Neo chen | QQ: 291379 | 订阅号:netkiller-ebook | 网站:http://www.netkiller.cn
216
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载