許多SEOer都認為網站優化就是單純依靠內容優化，但其實一個優秀的網站，網站中的每一個元素都是有優化的必要性的，如：框架優化、導航優化、代碼優化、CSS優化、JS優化、圖片優化等。
1、圖片放大功能
該算法的思想是利用兩幅圖片，一幅是滑鼠移動的小圖片，另一幅是大圖片，來動態地獲取滑鼠的位置，並在小圖片上按比例地移動大圖片，使得其中的一部分可以以DIV方式顯示以實現放大效果。
html代碼：
<div>
<div>
<divid="middlePicRemark"><imgid="imgGoodsPic"alt=""src="https://www.seowhy.com/images/20141009154623153.jpg"style="width:950px;height:950px;display:block;position:relative"></div>
<divid="middlePicBox">
<spanid="BigViewImage"style="outline-style:none;cursor:crosshair;display:block;position:relative;height:396px;width:396px;"><imgid=""style="width:396px;height:396px;position:absolute;top:0px;left:0px;"src="https://www.seowhy.com/images/20141009154623153.jpg">
<divstyle='height:166.32px;width:214.240837696335px;border-width:1px;visibility:hidden;position:absolute;'>
</div></span>
</div>
2、圖集使用：JS圖片切換
通過計時器使得圖片每間隔幾秒可以自動切換，也可以通過滑鼠的點擊控制播放的圖片。
html代碼：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>圖片自動切換</title>
<linkrel="stylesheet"type="text/css"href="https://www.seowhy.com/qiehuan2.css">
<script>
window.onload=function(){
varoDiv=document.getElementById("box");
varoImg=oDiv.getElementsByTagName("img")[0];
varoSpan=oDiv.getElementsByTagName("span")[0];
varoP=oDiv.getElementsByTagName("p")[0];
varoUl=oDiv.getElementsByTagName("ul")[0];
varoLi=oUl.getElementsByTagName("li");
vararrUrl=['1.png','2.png','3.png','4.png'];
vararrText=['圖片一','圖片二','圖片三','圖片四'];
varnum=0;
//初始化
functionfnTab(){
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrUrl.length;
oP.innerHTML=arrText[num];
for(vari=0;i<oLi.length;i++){
oLi[i].className=''
}
oLi[num].className='active'
}
fnTab();
//計時
vartimer=null;
functionshow(){
num++;
num%=arrText.length;//計算播放哪張圖片
fnTab();
}
functionautoPlay(){
timer=setInterval(show,2000);//圖片播放間隔為2秒
}
setTimeout(autoPlay,2000);//2秒後自動播放
functionstopPlay(){
clearTimeout(timer);
}
oDiv.onmouseover=stopPlay;
oDiv.onmouseout=autoPlay;
for(vari=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
num=this.index;
fnTab();
};
}
};
</script>
</head>
<body>
<divid="box">
<imgsrc=""/>
<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製作一些圖片排列，使得頁面更美化。
移動端用戶訪問網站是需要為流量付費的，如果網站的圖片過大會直接導致用戶流量的增長，長此以往，用戶都不敢點開網站了。很多因素影響，圖片過大會直接導致網站打開速度減緩。
剛接觸SEO的新手可以通過下面的幾個方法來進行移動端圖片的優化：
1、圖片使用CDN（ContentDeliveryNetwork，內容分發網絡）加速。
2、少用動態GIF圖。
3、圖片不宜過多及過大。
4、零散圖片使用CSSSprite技術一次性下載。
5、避免使用BMP圖片。
6、壓縮圖片。
1、大圖展示
用戶通常希望能夠在點擊圖片後獲得一張大圖片，並且圖片被部分放大和移動，以便查看圖片中的詳細數據，他們往往希望在點擊圖片後得到一張大圖片，以獲得更詳細的信息。然而，由於移動屏幕的大小，考慮到用戶流量等問題，細節頁面中主體內容的圖片通常默認設置為小圖片。
2、自由切換功能
對於很多圖片的展示，我們也需要有自由切換的功能，以滿足用戶的需要。
如果詳細頁面的主要內容包括圖片，則圖片應該能夠點擊大圖片，減少大小的功能自由使用，手勢支持流暢，可以自由切換。
3、ALT標籤
網站圖片也是一種推廣的渠道，只要將網站中的圖片優化好，一旦百度收錄文章或欄目頁後就會識別出裡面的圖片，只要將相應的圖片設定好ALT標籤，圖片的收錄是不成問題的。
4、打開速度
最後，也是最重要的一點，就是打開速度一定要快，如果你的圖片做的花裡胡哨的，但是要等十幾秒才能打開，用戶們往往也是等不及的，然後網站跳出率就會變得很高。如果站點的PR值和網站權重很高，圖像抓取展示率和排名率都很高，對於SEO來說是非常有利的。
圖片搜索是通過搜索程序，向用戶提供網際網路上相關的圖片資料的服務。圖片搜索的目的是查找出自己所需要的特定圖片。
網站的圖片內容出現在整合搜索中，應該注意下面幾點：
一、ALT文字
這是圖片優化最重要的部分，因為ALT文字本身就是為了說明圖片內容。ALT文字應該出現目標關鍵詞，準確描述圖片內容。
二、頁面標題
圖片所在頁面的標題也很重要。標題寫法參考前面頁面優化部分。
三、圖片周圍文字
圖片出現的周圍文字內容也在一定程度上表明圖片內容。當然，這裡所說的圖片周圍文字指的是HTML代碼中圖片文件的前後，而不一定是用戶所看到的頁面上圖片周圍的文字。有時候由於排版原因，視覺上看來處於圖片周圍的文字，在代碼中可能相距很遠。
四、圖片質量
圖片的解析度和像素，也就是圖片質量也影響圖片優化。質量越高，被排到前面的可能性越大。搜尋引擎並不想返回低質量的圖片。
五、導入連結錨文字
導入到圖片出現頁面的連結所使用的錨文字，既表明頁面本身的內容主題，對圖片內容也是個說明，會被搜尋引擎考慮在內。