文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>图片优化的方式与技巧

图片优化的方式与技巧

时间:2010-09-16  来源:无为工作室

这是去年我在自己的百度博客上面发表的一篇文章,是关于图片优化方面的。刚才看到咨询区有人在询问alt属性里的关键词应该填什么,所以才想起了这篇文章,拷贝过来,希望能给大家带来帮助。

      1.图片描述

       目前位置,还没有哪一家搜索引擎可以“读懂”图片里的文本内容。所以,我们必须主动的“告诉”搜索引擎,图片里表达的是什么内容。在实际的操作中,可以通过修改图片名称、设置ALT属性值及在图片周边增加相关的内容等方式实现。这样,不但可以主动告诉搜索引擎图片里所蕴含的信息,还可以有效提高相关关键字的词频及使得这些关键字的分布更加合理。

        1.1 图片名称

        在对图片文件进行命名的时候,最好使用与图片内容相关的关键字作为图片的名称。例如,如果是简体中文网站,可以使用关键字的拼音形式进行命名;如果是繁体中文网站,可以使用关键字的中文形式进行命名;而如果是英文网站,则可以使用关键字的英文形式进行命名。

        对于非实质内容的图片(例如背景、按钮等页面装饰性质的图片),可以根据个人习惯而定,但切忌:千万不要在为图片命名时滥用关键字。

       1.2 ALT属性

       在HTML语言中,我们常用alt属性值对图片所表达的内容进行说明。这样,当图片不能显示的时候,就会自动用alt属性值代替,用户也就大概知道这个图片所表达的内容了。

       alt属性是搜索引擎较为重视的HTML属性之一。在设置alt属性值的时候,应该以简洁而有效的表达图片内容为原则(而不是堆砌关键字),尽量利用好这一块净土。也就是说,我们只需要简单地说明图片里的是什么产品即可。

       不管利用什么方式表土图片里的内容,它始终代替不了文本表达的优势。特备是页面中相对中重要的内容,我们更要避免使用图片去展示,特别是页面中的主关键字、辅关键字、频道或栏目名称等。

       1.3 周边内容

        图片周边内容是搜索引擎判断图片alt属性值真实性的重要依据之一。如果图片的alt属性值与周边内容不相关,则搜索引擎就会对alt属性值产生怀疑,甚至否定。

       文件名、alt属性值及周边内容就相当于图片的“嘴巴”,当搜索引擎抓取图片时,图片就通过它们告诉搜索引擎图片里的内容。在实际中,搜索引擎的图片搜索结果排序主要也是由这几大因素决定的。

       2.图片压缩

       图片压缩的主要目的是降低图片的体积,加快页面显示的速度,不管对于搜索引擎还是普通用户都是友好的。

       2.1 图片压缩原理

        图像分辨率常用“位/像素”表示。一般情况下,高分辨率图像每个像素由32位或者24位组成,而中分辨率图片每个像素由16位或者8位组成。不管使用什么工具对图片进行压缩,其原理就是降低组成图片每个元素的位数。所以,图片压缩对图片质量的影响在所难免。但是,我们不能为了片面追求降低图片体积,而忽略图片自量。图片优化的一个非常重要的原则就是:在保证图片正常显示的范围内尽可能降低图片的分辨率,从而降低图片的体积。

       2.2 图片格式问题

       在网页中,常用的图片格式有两种:JPG及GIF。同样的图片,使用GIF格式或JPG格式进行保存,所产生的体积是不一样的。在实际中,如果图片的色彩比较复杂,那么使用JPG格式进行保存,可以节省更大的存储空间。相反,如果图片的色彩很单调(例如:只有少量的文本),那么使用GIF格式保存则可以节省更大的存储空间。

       在对JPG格式的图片进行压缩的时候,只需要降低图片的质量(或者品质)即可。例如,把JPG格式的图片质量(或者品质)调整到50~60时,显示效果与体积大小都是标胶为合理的。而在对GIF文件进行压缩的时候,则是通过调整图片的颜色位数来实现的。一般情况下,我们把图片调整至40~50时,显示效果与体积大小都较为合理。

       2.3 图片切割

        对于大尺寸的图片,可以通过缩小图片尺寸(即降低图片的分辨率)的方法来降低图片的体积。例如,在页面中仅需要使用300*200的图片,而源文件确实1024*768,那么就可以缩小这个图片的尺寸,从而降低图片体积。

        在实际应用中,我们常常会使用Adobe ImageRerdy来对图片的尺寸(或分辨率)进行调整:

       (1)打开需要调整的图片,点击菜单栏中的“文件”→“打开”,选择需要处理的图片。

       (2)然后,使用快捷键Ctrl+T(或者点击“编辑”→“自由变换”)对图片大小进行调整。

      (3)在左边(W)输入宽度,则右边的(H)高度会自动调整,使得图片不会变形。

       (4)将图片保存

小结

      虽然本文所讲诉的内容对网页的主题相关性方面影响并不大,但对网页的用户体验会产生比较大的冲突。所以,在操作的时候也要注意


结尾打个小广告,昨天和一个朋友聊天的时候才发现SEOWHY只有版主群,没有会员群,所以昨天贡献自己QQ上的所有资源建了5个群(1个超级群,4个高级群)。以下所有群只加SEOWHY用户,申请请注明SEOWHY。
加群请加①群,①群满后,②群才会开始加人。以后以此类推
SEOWHY交流①群:72225670(未满)超级群
SEOWHY交流②群:9419171(未满)高级群
SEOWHY交流③群:18686598(未满)高级群
SEOWHY交流④群:26237846(未满)高级群
SEOWHY交流⑤群:12578870(未满)高级群
相关阅读 更多 +
排行榜 更多 +
打螺丝高手

打螺丝高手

模拟经营 下载
解救火柴人计划安卓版

解救火柴人计划安卓版

体育竞技 下载
鸡生化精英安卓版

鸡生化精英安卓版

飞行射击 下载