圖片(pian)優(you)化是(shi)網站要(yao)進行優(you)化的一個十分重要(yao)的方面,傳統(tong)意義上(shang)的優(you)化僅僅只是(shi)圖片(pian)要(yao)加alt標簽(qian)或是(shi)僅僅壓縮(suo)。但這樣(yang)太過粗陋,以(yi)下帶來詳細技巧。
1、數據寫圖
通過圖片編(bian)號(hao)搜索圖片,不會在搜索引擎的(de)那一端(duan)產生流量(liang),所以也不會對瀏(liu)覽點擊(ji)量(liang)做太(tai)多貢獻,非常低效且可惜,尤其是(shi)有(you)數(shu)量(liang)龐大的(de)產品時(shi)。我們較好用結構化的(de)數(shu)據來寫成alt標(biao)簽,從而提升瀏(liu)覽時(shi)的(de)流量(liang),完成優(you)化。
2、拍(pai)攝角度(du)
產品(pin)照片較好是(shi)有多個(ge)角度的(de)(de)(de)效果圖,全方位(wei)的(de)(de)(de)展(zhan)示才能更好的(de)(de)(de)吸引(yin)瀏覽者在(zai)本(ben)網(wang)站(zhan)上(shang)停留更長的(de)(de)(de)時間。這個(ge)寫(xie)alt標簽較好是(shi)保持它的(de)(de)(de)連續性(xing)與結構性(xing)。可(ke)以用(yong)老圖的(de)(de)(de)格(ge)式,千萬不要用(yong)全新的(de)(de)(de)寫(xie)法來輸出圖片。
3、大圖顯示
較好不要將大圖原圖直接放在(zai)網頁上(shang),然(ran)后(hou)用css一(yi)類的軟件去縮小它,這樣雖然(ran)外(wai)觀看著似乎變(bian) 小了(le),但是圖片尺寸(cun)依然(ran)不變(bian),網頁載入的速度會變(bian)慢(man)。我們可以先放上(shang)一(yi)張比較小的圖片,隨后(hou)可以設(she)置(zhi)查(cha)看大圖的功能。
還有就是(shi),雖然將大(da)(da)圖切(qie)分成小圖然后拼接也可以(yi)得到比較(jiao)(jiao)理想的加(jia)載速度。但(dan)是(shi)圖片(pian)數(shu)量(liang)變多 之后,服務(wu)器的請求(qiu)數(shu)量(liang)會增加(jia),從而間接使網(wang)頁(ye)加(jia)載速度下降。所(suo)以(yi)較(jiao)(jiao)好是(shi)為體積過大(da)(da)的圖片(pian)準(zhun)備新的服務(wu)器。
4、使用(yong)正(zheng)確格式
現(xian)在軟件行業與網頁制作主流有(you)三(san)種(zhong)圖(tu)片格式jpg,gif和png。接(jie)下來我們看一看這三(san)者各(ge)有(you)什么特(te)點,又該如何(he)應用:
JPEG(jpg)是最常(chang)用的(de)壓縮后圖片(pian)格(ge)式(shi),可以支持最大程度(du)的(de)壓縮。如果網頁(ye)對圖片(pian)清(qing)晰度(du)有(you)比較高的(de)要(yao)求的(de)話,jpg格(ge)式(shi)的(de)圖片(pian)相對于其它兩者具有(you)十分明(ming)顯的(de)優勢。
GIF(gif)的圖(tu)片(pian)(pian)清晰度會(hui)差(cha)很(hen)多,通(tong)常只是用來作(zuo)十分簡單的連續演示(shi),這個(ge)格式的圖(tu)片(pian)(pian)也(ye)能夠讓設計者制(zhi)作(zuo)動畫(hua)。Gif不能滿足高質量的圖(tu)片(pian)(pian)需求(qiu)。
PNG格式比GIF更(geng)加可靠,因為png格式下的圖(tu)(tu)片(pian)的色譜要(yao)比GIF豐富許多(duo)。此外,和jpg格式相同,無論多(duo)少(shao)次保存都(dou)不會對圖(tu)(tu)片(pian)的質(zhi)量產生(sheng)不利影響(xiang)。且(qie)PNG格式的圖(tu)(tu)片(pian)體積極(ji)小,占用(yong)空間極(ji)小。且(qie)PNG無所謂(wei)背景是否透明,一般的標志(zhi)或者裝(zhuang)飾圖(tu)(tu)案都(dou)會選擇(ze)使用(yong)png格式。但要(yao)注意PNG-24版本下的圖(tu)(tu)片(pian)要(yao)大(da)于同樣情況下的PNG-8版本下的圖(tu)(tu)片(pian)的三倍以上,應當(dang)仔細(xi)選擇(ze)與使用(yong)。