卢松松博客

15个网站图片优化的原则

 人参与 | 时间:2012年07月07日 09:05

现在的网站大量的使用图片,那么这些图片如何优化才好呢?这里DavidYin列出了15个优化原则,与大家分享。

1)在网站设计之初,就先要做好规划,比如背景图片如何使用等等,做到心中有数。

2)编辑图片的时候,要做好裁剪,之展示必要的,重要的,同内容相关的部分。

3)在输出图片的时候,图片大小要设置妥当,长宽像素就设成你所需要的大小,而不要输出大图片,然后使用的时候,在指定较小的长宽,缩放图片。

4)尽量组合装饰性的图片,以节省http请求数,在具体使用时,采用CSS sprite的方式。

5)页面上的边框,背景,尽可能的使用CSS的方式来展示,而不要用图片。

6)图片使用上,能用png格式的尽量用,以替代过去常用的gif和jpeg格式。在保证质量的情况下,用最小的文件。

7)在html中明确指定图片的大小。

8)若使用photoshop的话,缩放图片通常会让图像模糊,可以用smart sharpen来让图片更为出色。

9)对于Gif和PNG文件格式,最小化颜色位数。

10)对于Gif和PNG文件,最小化dithering,可使文件更小。

11)如果图片上要添加文字,可能的话,就不要把文字嵌入到图片中,而是采用透明背景图片,或者CSS定位让文字覆盖在图片上,既能获得相等的效果,还能把图片更大程度的压缩。

12)在较小的Gif和PNG图片上,可以使用有损压缩。

13)可能的话,使用局部压缩,保证前景清楚的基础上,较大程度的压缩背景。

14)图片在优化之前,若能降噪的话,可以获得额外的20%多的压缩。

15)jpg图片也可以模糊背景,然后压缩的时候,可以压缩的更多。

上面就是DavidYin告诉你的15个图片优化的原则。

作者: David Yin

原载: SEO 网站优化推广

相关阅读:

读图时代的图片优化方法

图片优化须知的8个小技巧

Google官方发布图片搜索优化技巧

用户行为分析与图片广告优化

顶: 1踩: 0

来源:,欢迎分享,(QQ/微信:13340454)

必填

选填

选填

◎已有 28 人评论,微信:QQ13340454

1楼妹妹高清  2013-12-26 23:17:37
这真是令人窒息的心痛
顶: 0踩: 0 回复
2楼内涵图  2013-12-26 04:57:37
节操君,你肿么了
顶: 0踩: 0 回复
3楼千金偏方  2012-03-06 14:09:13
好一个人才啊!
顶: 0踩: 0 回复
4楼小可  2011-12-28 14:40:08
能有这解释?
顶: 0踩: 0 回复
5楼爱微博客  2011-12-25 22:26:09
呵呵,现在用ZBLOG的也多啊~
顶: 0踩: 0 回复
6楼临沂童装批发网  2011-12-24 16:07:43
没看懂什么意思 啊
顶: 0踩: 0 回复
7楼德州二手房  2011-12-24 09:33:02
娉娉袅袅十三余,豆蔻梢头二月初。不懂啊
顶: 0踩: 0 回复
8楼内涵漫画  2015-12-28 10:51:34
呵呵,好久没有来了!尽量减少图片的尺寸,图片过大会影响网站的加载速度的
顶: 0踩: 0 回复
9楼波波SEO美女  2012-07-08 12:52:17
为什么要用PNG格式呢?有什么讲究呢?
顶: 0踩: 0 回复
10楼秦晚词  2012-09-02 13:12:42
这个有用处,我网站图片多!
顶: 0踩: 0 回复
11楼二手PLC  2012-08-06 09:14:57
用Pagespeed可以直接生成优化后的PNG。
顶: 0踩: 0 回复
12楼洒水车  2012-07-31 14:47:53
嗯做好图片处理,真的会很好,我每天更新的时候都会记得把图片整理一番 请问一般多大尺寸比较好
顶: 0踩: 0 回复
13楼常州人流医院  2012-07-24 14:03:58
图片优化是提升网站速度的一个很重要的环节!
顶: 0踩: 0 回复
14楼Win8迷  2012-07-10 17:53:41
一般压缩jpg就OK了
顶: 0踩: 0 回复
15楼屠龙  2012-07-09 16:27:55
呵呵,好久没有来了!
顶: 0踩: 0 回复
16楼迷影博客  2012-07-09 00:01:34
不实用
顶: 0踩: 0 回复
17楼防辐射服哪个牌子好  2012-07-08 21:58:43
优化做的好真的很重要!
顶: 0踩: 0 回复
18楼多丽人  2012-07-08 21:35:02
做图片站的有福了,呵呵
顶: 0踩: 0 回复
19楼朱宇乐博客  2012-07-08 19:18:03
作为以后的参考,很值得去操作的方法!
顶: 0踩: 0 回复
20楼宁波贺道华  2012-07-08 13:34:39
可以用PS批量加水印与缩小图片并压缩。
顶: 0踩: 0 回复
21楼波波SEO美女  2012-07-08 12:53:29
PNG格式难道有什么好处吗
顶: 0踩: 0 回复
22楼太阳镜时尚秀  2012-07-08 12:15:53
谢谢,原来PNG格式的图片是最好的,一直用习惯用jpg呢。
顶: 0踩: 0 回复
23楼可淘哦  2012-07-08 12:13:14
一会儿详细学习,先留言啊。
顶: 0踩: 0 回复
24楼大笨兔  2012-07-08 11:48:09
想到图片,我博文里的一张图片是我在google找到的。
竟然搜索summer在第一。不懂,求解释
顶: 0踩: 0 回复
25楼冯志强  2012-07-08 10:30:54
图片优化感觉不好控制
顶: 0踩: 0 回复
26楼腰椎间盘突出治疗  2012-07-08 08:47:51
以前把图片尽量细分化,现在很多大中型网站都流行把图片整合成一张,可以极大降低请求数和加载数,不过技术上要求较高
顶: 0踩: 0 回复
27楼刘印博客  2012-07-07 21:52:17
先收藏,改模板的时候注意下!
顶: 0踩: 0 回复
28楼牟祥博客  2012-07-07 21:37:23
要是视频也能优化就好了
顶: 0踩: 0 回复
29楼玩游戏赚钱  2012-07-07 20:51:04
图片站和个人网站都需要了解点。做好了流量也不少
顶: 0踩: 0 回复
30楼闵非凡博客  2012-07-07 20:11:12
怎么压缩?
顶: 0踩: 0 回复
31楼网站优化  2012-07-07 18:11:07
不错不错更新的真快
顶: 0踩: 0 回复
32楼推广者博客  2012-07-07 12:23:54
这个可以有。
顶: 0踩: 0 回复
33楼手写体  2012-07-07 11:34:27
我现在做图片站,正好用到。。
顶: 0踩: 0 回复
34楼合肥网站建设  2012-07-07 10:29:20
嘿嘿,非常实用,下次裁剪图片时就好办了
顶: 0踩: 0 回复
35楼柯大路  2012-07-07 09:48:04
尽量减少图片的尺寸,图片过大会影响网站的加载速度的
顶: 0踩: 0 回复
36楼河北奥科除尘设备有限公司  2012-07-07 09:45:45
太激动啦,终于抢到沙发啦
顶: 0踩: 0 回复