許多SEOer都認為網站優化就是單純依靠內容優化，但其實一個優秀的網站，網站中的每一個元素都是有優化的必要性的，如：框架優化、導航優化、代碼優化、CSS優化、JS優化、圖片優化等。
網頁圖片的SEO交互怎么優化
1、圖片放大功能
該算法的思想是利用兩幅圖片，一幅是鼠標移動的小圖片，另一幅是大圖片，來動態地獲取鼠標的位置，并在小圖片上按比例地移動大圖片，使得其中的一部分可以以DIV方式顯示以實現放大效果。
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圖片切換
通過計時器使得圖片每間隔幾秒可以自動切換，也可以通過鼠標的點擊控制播放的圖片。
html代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圖片自動切換</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();
?
??? //計時
??? var timer=null;
??? function show(){
??????? num++;
??????? num%=arrText.length; //計算播放哪張圖片
??????? fnTab();
??? }
?
??? function autoPlay(){
??????? timer=setInterval(show,2000); //圖片播放間隔為2秒
??? }
?
??? setTimeout(autoPlay,2000); //2秒后自動播放
?
??? 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>數量正在加載中...</span>
<p>文字說明正在加載中...</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
3、選擇適當的圖片寬度大小(即響應圖片)
無論是電腦還是手機，都有很多不同大小的圖偏需要展現，如果做做的是響應性的網站，那么你就更加需要考慮圖片的大小尺寸問題。
移動端有太多的屏幕分辨率和大小，因此可能需要加載不同大小的圖像，從而節省了對站點的訪問和頁面呈現的效率。
4、使用CSSSprites減少HTTP的網絡資源請求
CSSSprites是一種網頁圖像處理方法，其中一個頁面所涉及的所有散亂的圖像或圖標都包含在一個大圖片中，因此只需要加載這個圖片，而不是很多圖片，這減少了許多HTTP請求。
5、站點圖片屬性值的添加
網站圖片上的屬性值(ALT和TITLE)也是圖片優化中重要的一點，搜索引擎識別圖片的途徑首先就是從圖片的ALT屬性值抓取的，ALT屬性值就相當于這個圖片的標題、解釋說明。
6、CSS和CSS3制作簡單的圖標和動畫
隨著技術的發展，CSS3可以實現的效果越來越多，比如箭頭圖標，三角形，梯形等圖標，或者一些陰影效果，漸變的效果，可以用CSS制作一些圖片排列，使得頁面更美化。
閱讀本文的人還可以閱讀：
