很多朋友在优化网站的时候忽略了图片的优化,还有些朋友明显知道图片需要加入哪些标签需要优化却没有刻意的去做优化,那么这篇的四大图片标签片优化文章主要送给那些不懂图片优化的朋友。
当我们网站图片无法显示的时候,图片上面会显示我们输入ait标签的文字描述,这个作用主要是提高用户体验。在提高用户体验的同时,ait标签还可以告诉搜索引擎我们的图片内容是什么,因为搜索引擎无法识别图片的内容,所以只有通过ait标签来识别图片内容。我们经常通过百度图片来搜索某些内容的时候,百度能够正确的调用其他网站图片也是通过这个标签来识别的。
而title主要是告诉用户图片的内容,当我们鼠标点击碰到图片的时候,图片上面会显示文字描述,当用户无法读懂图片内容的时候,那么title的描述讲是表达图片的内容最好的方式。
标签写法:ait=”文字描述” title=“文字描述” 。
太多人以为这个标签没有作用,以为图片的大小正好合适就没有加入标签来限制图片大小了,其实这是一个非常严肃的错误,之所以图片大小与实际大小相同还要限制的原因是浏览器无法识别你图片的大小,只有通过浏览器来预算你图片的大小在来定义。所以才导致用户网站打开速度慢的原因。如果你定义了图片的高度和宽度,那么浏览器在加载图片的时候就不需要来预算你图片的大小,直接把图片显示给搜索引擎或用户。
标签写法:width: 550px; height: 321px;"
这个标签主要是用来调用图片地址的,一般的情况下后台上传图片后会给其自动加上src标签,由于很多地方没有上传的功能,那么我们也可以通过标签的方式把图片写出来。
标签写法:src="https://www.hoyoh.com/uploads/allimg/140310/2-14031009532OB.jpg"
我在文章《图片站怎么做SEO优化》中有写到CSS定义图片,但是没有详细的介绍CSS如何定义图片。CSS定义的图片一般为网站通用图片,并且是比较小的图片,一般的情况下把很多小图片定义到一张大图里面,然后通过调用的方式来一张一张调用,当多个小图加载到一张图片后,搜索引擎抓取和用户打开的时候只需要加载一张小图即可。这样有利网站的打开速度。
标签写法:BACKGROUND-IMAGE: url(../images/logo.gif);