SEO无小事,网页图片也必须进行优化

  众所周知,图片是网页中表现主题与内容的重要表现元素,对于用户来说,网站漂亮不漂亮,是否赏心悦目最大的看点还是在图片。既然如此重要,要去除它就不太现实了。深圳学文培训黄老师建议:应该怎么对它进行设置,以达到搜索引擎的要求,让用户看着赏心悦目的同时也让搜索引擎能看懂图片表达的含义。

  首先,我们要了解到:人类能看懂图片是因为人类的眼睛与思想可以感受到图片所表达的内容也含义。而搜索引擎在派蜘蛛抓取网页的时候,发现一个img标签才会看到这里有一张图片,这时候它能看懂的就是〈img alt="" src="" /〉这样一个标签,而不能很明确的看到图片的颜色、表达的内容等相关信息。所以,我们应该做以下的优化措施:

  在网页中插入图片的XHTML标记是 img ,具体的语法为:〈img alt="这里写图片的说明信息" width="200" height="200" src="1.jpg" /〉 。

  一、给图片加上 ALT 属性

  ALT属性简单理解为对图片进行文字性的说明,在IE浏览器中,只要指定了ALT属性值,当鼠标移上去时就会出现图片说明。在搜索引擎在收录网页时也会看到ALT属性,并且会将ALT属性作为图片表达内容的参考。在W3C标准中,也明确要求必须要为所有图片加上 ALT属性,以便于不可显示图片的浏览器也能看懂图片表达的内容。

  二、图片的格式尽量采用GIF、JPG、PNG

  有三种常见的网页图片格式分别是:.gif .jpg .png ,每一种图片格式都有其独有特点,.gif这种图片格式主要应用于兼容IE6的透明图片格式;.jpg图片是目前互联网上主流的应用图片;.png是一种优秀的图片格式,质量非常高。但遗憾的是默认情况下IE6无法显示其透明特性,由于质量很高,所以占用硬盘空间也较JPG图片大一些。

  三、图片尺寸不宜太大、太多

  图片太大会导航网页打开速度变慢,而且迟迟不能加载完成,导致用户在未打开网站的情况下就已经离开了。所以图片的使用与网站的用户体验要取得平衡或两全其美。如果网站要表现很多小图标或小图片,建议可以使用CSS精灵的模式来表现,把许多的小图片整合到一个图片中,再通过背景定位将其导出,这样可以有效降低图片请求数据,加快网页打开速度。

  四、插入图片时必须要指定图片的宽度和高度

  网页在浏览器渲染展示的过程中,会按网页指定的属性来显示。如果只在CSS里面设置图片的宽度或高度,就会导致渲染时间长,打开速度慢。具体属性为: width="200" 宽度为200象素, height="200" 高度为 200象素。所以在可以指定的情况下,建议应指定图片的宽度和高度,以加快浏览器的渲染速度。

  五、img标签是自关闭标签

  任何的XHTML标签都应该关闭,img标签的关闭方法是在自己标签结束之前加上反斜杠“/”。这也是W3C标准所要求的,可以使网页更规范,让浏览器快速识别,提高打开速度。

  学文培训黄老师认为:SEO无小事,在网页设计制作的过程中,有大量的SEO技巧需要植入进去,这样才能做出好的网站,在以后的运营过程中才会有更好的表现。

  文章首发:http://www.xwpx.cn/seopx/211.html

时间: 2024-10-27 11:19:00

SEO无小事,网页图片也必须进行优化的相关文章

网页图片切换css3和js

问题描述 网页图片切换css3和js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档 <!-- .headbanner { position:absolute; left:44px; top:57px; width:1000px; height

“读图时代”如何针对网页图片做搜索引擎优化

百度李彦宏在前不久百度联盟峰会上前瞻性的预测"图片"应用在不久的未来将突飞猛进的发展,"读图的时代已经来到了",而搜索引擎将大大增强对图片搜索应用的支持.这也将意味着,网站中图片在搜索引擎流量所占的比重也可能越来越大.图片作为网页内容中重要的组成部分,一直收到新手站长的忽视,为此笔者在本文分享一些网页中的图片在搜索引擎方面的几点建议. 1.图片Alt标签加入关键字.给 网页图片加上Alt标签关键字,这是网页图片搜索引擎优化中最重要的一项工作.Alt(替换文字)主要是

SEO加速器促使网页搜索排序加速提升的原理

第一个是有趣的事情 新做网站的站长,都发现过一个有趣的事情:访问量会从几十人一下子飙升到1000多人. 网站上线后,自己每天辛辛苦苦地增加内容,每天勤勤快快地宣传,想让更多人来欣赏自己的网站,也算不白做个网站.可是访问的人总是很少,从最初只有自己一个人访问,到自己网友的访问,到友情链接带来的几个人,论坛发帖也来了几个人,访问的人呢?总是在几位几十位之间徘徊.实在是着急啊,就自己不断地换ip,刷网页,提高"访问量",小小自我安慰一下,满足一下,鼓励一下.这个郁闷啊,五味杂陈百感交集.就在

巧用WORD EXCEL批量整理网页图片

  经常遇见这种情况,网页上有很多对自己有用的图片素材,用保存网页的办法保存下载后,在相关文件夹中找到图片素材,确实以无规则的数字命名的图片.如果图片数量少,我们可以一次打开识别,命名,但是数量太多,这种方法不经济.那么时候用更好的批量命名图片的方法? (众多需要重命名的图片) 巧用WORD EXCEL批量整理网页图片步骤 其实我们可以通过Word和Excel工具批量更改图片名称,操作稍微复杂些,但是如果图片比较多,这种方法效率高,能节约不少时间. 1. 理清表格很重要 由于这个页面中所包含的信

从淘宝变化谈品牌把握“品牌无小事”

淘宝,是众所周知的品牌,下面,我就从品牌管理的角度,来谈一谈对品牌的把握和认知. 我算是伴随淘宝的品牌成长起来的人,看着它一点点发展.从弱小,到强大,到逐渐混乱,再到现在的几乎失去管理.说实话我心情挺复杂. 品牌管理是个系统工程,要规范和控制整个品牌在企业内部和外部的各种形象,使其和企业发展和经营目标相贴合.很多人都会认为品牌管理就是做logo之类,层次高一点说VI,再高一点的会提到CI,等等,其实这些都只是"标准"的部分,有了标准,更重要的工作其实是"应用".&q

让网页图片变灰色的三种方法

原文 让网页图片变灰色的三种方法 我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异. 1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox.Chrome和Safari.以前,

【中亦安图】运维无小事之一次导致数据丢失的小变更(10)

第一章 技术人生系列 ·我和数据中心的故事(第十期)·运维无小事之一次导致数据丢失的小变更 中亦安图 | 2016-04-08 22:05 前言 不知不觉,技术人生系列·我和数据中心的故事来到了第十期,小y又和大家见面了! 前期我们分享了不少Oracle数据库故障和优化的实战案例,有朋友问,小y是否可以分享一些无备份时数据恢复方面的实战案例呢? 答案自然是--当然可以了.小y从来就不是一个藏着掖着的人嘛 ^_^ 这些年,小y所在的Oracle服务团队,该遇到的和不该遇到的问题,基本都碰到了. 所

CSS控制图片代码:让网页图片自适应大小

文章简介:CSS控制图片代码:让网页图片自适应大小. 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600

用Dreamweaver MX建设神奇网页图片超链接

dreamweaver|链接|网页 大家在打开带有图片的网页时,有时会看到这样的情况:当鼠标指向图片的不同部位时,可以打开不同的超链接,这种技术我们称之为-网页图片热区. 下面我们以Dreamweaver MX和FrontPage 2003为例,来看看网页图片热区的具体建立过程. 一.在Dreamweaver MX中为图片建立热区 1.启动Dreamweaver MX(其他版本请仿照操作),打开需要建立图片热区的网页文件,选中相应的图片,此时"属性"面板自动切换到"图片属性&