图片合并

本应用的能将列表中相同尺寸的图片合并成一个,然后通过css的sprite技术展示,极大降低请求次数,优化页面的打开速度。

图文混排是网页设计中常见的展示方式,能极大丰富网页的表现力、提高内容点击率。但是其带来的一个负面作用是,图片成倍增加静态页面的请求次数,拖慢整个页面的打开速度。为解决这个问题,加速页面打开速度的优化,统称为“前端优化”。

优化图片请求过多的通用做法的学名叫sprites(有人叫它CSS精灵,参考资料:http://baike.baidu.com/view/2173476.htm),它的原理是将多个图片请求合并成1个请求,但具体的实施过程比较繁琐,合并图片需要人工完成,图片位移量的计算也容易出错,所以只应用于不常变化的页面模板,而不能用于更新较频繁的动态数据。

AKCMS官方的“图片合并”应用的作用就是将上述的优化过程智能化和自动化,应用于动态数据中的图片的合并显示。下面回答一些常见的疑问:

显示效果受影响吗?没有影响

下面我们看两个页面1和页面2,页面1是用传统方法调用的,页面2使用了“图片合并”应用,二者从视觉上说完全一样,所以不用担心优化后会影响你的页面。从HTML代码上说,使用的仍然是<img>标签,你现有的CSS也无需修改。

注:合并后的图片的CSS属性padding的值会被强制置为0。

使用复杂吗?非常简单

其次再看看具体的调用方法,传统方法是<img src="1.gif" />这样的标签,使用“图片合并”后,对原来的标签稍加修改,在<img>的后面紧跟一个参数sprite="宽:高"。修改后的是这样的:<img sprite="100:60" src="1.gif" />。标签修改好之后再应用一下过滤器,既可以在标签层应用,也可以在页面层应用。

效果明显吗?图片越多效果越明显

一次调用的图片如果少于3张,则没有什么效果,如果大于3张效果就明显了,图片越多效果越明显。我上面的例子,一次调用39个小图标,效果就非常明显了。原来的图片请求就是实打实的39次,优化后的图片请求2次,效果非常明显。AKCMS的主站首页(http://www.akhtm.com/)的应用列表就使用了“图片合并”技术,使用后页面的打开速度明显加快,效果明显。

同类图片合并的效果最好,不同类型的图片不适合合并,比如:一些颜色简单的gif,中间有一张jpeg风景照片,这会造成合并后的图片非常大(因为jpeg丰富的颜色把颜色表给撑大了)。

四 会增加服务器压力吗?会降低服务器压力

图片合并的操作,只有图片列表更新时才会执行一次,大部分情况下,服务器都不需要额外的运算。而且对于请求频繁的页面,会极大降低图片开销,会降低服务器的压力。

五 列表发生变化时(比如录入了一篇新内容),图片会自动更新吗?会自动更新

整个过程都是自动的,无需关心。

本产品为收费应用,请购买后安装,价格:19.00元(2个序列号) 立即支付
(每个序列号可绑定1个根域名和它下属的子域名)(使用上如果有问题请联系客服

说明:付费应用在支付成功后可以在 用户中心 > 我的软件 查看已购买的应用
0 站长互动
昵称
内容
关于AKCMS
产品理念
产品特性
产品动态
我们的产品
AKCMS授权
AKCMS模板中心
AKCMS域名商城
首页广告投放
官方主机
联系我们
工单
为什么只支持工单?
技术服务(收费)
联系方式
邮件订阅
收听微博
邮件反馈
论坛反馈
退款