許多SEOer都認(rèn)為網(wǎng)站優(yōu)化就是單純依靠?jī)?nèi)容優(yōu)化，但其實(shí)一個(gè)優(yōu)秀的網(wǎng)站，網(wǎng)站中的每一個(gè)元素都是有優(yōu)化的必要性的，如：框架優(yōu)化、導(dǎo)航優(yōu)化、代碼優(yōu)化、CSS優(yōu)化、JS優(yōu)化、圖片優(yōu)化等。
網(wǎng)頁圖片的SEO交互怎么優(yōu)化
1、圖片放大功能
該算法的思想是利用兩幅圖片，一幅是鼠標(biāo)移動(dòng)的小圖片，另一幅是大圖片，來動(dòng)態(tài)地獲取鼠標(biāo)的位置，并在小圖片上按比例地移動(dòng)大圖片，使得其中的一部分可以以DIV方式顯示以實(shí)現(xiàn)放大效果。
html代碼：
?<div>
? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? <div id="middlePicRemark"> ?<img id="imgGoodsPic" alt="" src="/images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div>
?
? ? ? ? ? ? ? ? ? ? <div id="middlePicBox">
? ? ? ? ? ? ? ? ? ? <span id="BigViewImage" style="outline-style: none; cursor: crosshair; display: block; position: relative; height: 396px; width: 396px;"><img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="/images/20141009154623153.jpg">
? ? ? ? ? ? ? ? ? <div style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'>
? </div></span>
? ? ? ? ? ? ? ? ? ? ? ? </div>
2、圖集使用：JS圖片切換
通過計(jì)時(shí)器使得圖片每間隔幾秒可以自動(dòng)切換，也可以通過鼠標(biāo)的點(diǎn)擊控制播放的圖片。
html代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片自動(dòng)切換</title>
<link rel="stylesheet" type="text/css" href="/qiehuan2.css">
?
<script>
window.onload=function(){
??? var oDiv=document.getElementById("box");
??? var oImg=oDiv.getElementsByTagName("img")[0];
??? var oSpan=oDiv.getElementsByTagName("span")[0];
??? var oP=oDiv.getElementsByTagName("p")[0];
??? var oUl=oDiv.getElementsByTagName("ul")[0];
??? var oLi=oUl.getElementsByTagName("li");
?
??? var arrUrl=['1.png','2.png','3.png','4.png'];
??? var arrText=['圖片一','圖片二','圖片三','圖片四'];
??? var num=0;
?
??? //初始化
? ??function fnTab(){
??????? oImg.src=arrUrl[num];
??????? oSpan.innerHTML=1+num+'/'+arrUrl.length;
??????? oP.innerHTML=arrText[num];
??????? for(var i=0;i<oLi.length;i++){
??????????? oLi[i].className=''
??????? }
??????? oLi[num].className='active'
?? ?}
??? fnTab();
?
??? //計(jì)時(shí)
??? var timer=null;
??? function show(){
??????? num++;
??????? num%=arrText.length; //計(jì)算播放哪張圖片
??????? fnTab();
??? }
?
??? function autoPlay(){
??????? timer=setInterval(show,2000); //圖片播放間隔為2秒
??? }
?
??? setTimeout(autoPlay,2000); //2秒后自動(dòng)播放
?
??? function stopPlay(){
??????? clearTimeout(timer);
??? }
??? oDiv.onmouseover = stopPlay;
?
??? oDiv.onmouseout = autoPlay;
?
??? for(var i=0;i<oLi.length;i++){
??????? oLi[i].index=i;
??????? oLi[i].onclick=function (){
????? ??????num=this.index;
??????????? fnTab();
??????? };
??? }
?
};
</script>
</head>
?
<body>
<div id="box">
<img src=""/>
<span>數(shù)量正在加載中...</span>
<p>文字說明正在加載中...</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
3、選擇適當(dāng)?shù)膱D片寬度大小(即響應(yīng)圖片)
無論是電腦還是手機(jī)，都有很多不同大小的圖偏需要展現(xiàn)，如果做做的是響應(yīng)性的網(wǎng)站，那么你就更加需要考慮圖片的大小尺寸問題。
移動(dòng)端有太多的屏幕分辨率和大小，因此可能需要加載不同大小的圖像，從而節(jié)省了對(duì)站點(diǎn)的訪問和頁面呈現(xiàn)的效率。
4、使用CSSSprites減少HTTP的網(wǎng)絡(luò)資源請(qǐng)求
CSSSprites是一種網(wǎng)頁圖像處理方法，其中一個(gè)頁面所涉及的所有散亂的圖像或圖標(biāo)都包含在一個(gè)大圖片中，因此只需要加載這個(gè)圖片，而不是很多圖片，這減少了許多HTTP請(qǐng)求。
5、站點(diǎn)圖片屬性值的添加
網(wǎng)站圖片上的屬性值(ALT和TITLE)也是圖片優(yōu)化中重要的一點(diǎn)，搜索引擎識(shí)別圖片的途徑首先就是從圖片的ALT屬性值抓取的，ALT屬性值就相當(dāng)于這個(gè)圖片的標(biāo)題、解釋說明。
6、CSS和CSS3制作簡(jiǎn)單的圖標(biāo)和動(dòng)畫
隨著技術(shù)的發(fā)展，CSS3可以實(shí)現(xiàn)的效果越來越多，比如箭頭圖標(biāo)，三角形，梯形等圖標(biāo)，或者一些陰影效果，漸變的效果，可以用CSS制作一些圖片排列，使得頁面更美化。
閱讀本文的人還可以閱讀：
