摘(zhāi)要：如果(guǒ)你運(yùn)營在綫(xiàn)商(shāng)城又或(huò)是大(dà)型(xíng)電(diàn)商網站,圖(tú)片優化是(shì)你必(bì)須要(yào)掌握(wò)的.不僅(jǐn)僅是(shì)從(cóng)吸引潛在消(xiāo)費者,還(huán)是增(zēng)加圖片搜(sōu)索流量,又或(huò)是(shì)提升(shēng)網(wǎng)站加(jiā)載速(sù)度,圖(tú)片優(yōu)化扮演(yǎn)者(zhě)非常關鍵的角色(sè).但(dàn)說到圖片(piàn)優化,很(hěn)多(duō)傳統意(yì)義上(shàng)的S...
1. 用結(jié)構化數據(jù)寫產(chǎn)品(pǐn)圖片alt
我(wǒ)們很容易使用照(zhào)相機(jī)默(mò)認(rèn)的(dí)圖(tú)片編號當(dāng)做(zuò)圖片們的命名,這(zhè)樣(yàng)的(dí)話(huà)對於搜索引(yǐn)擎(qíng)來說,可能就沒有辦法辨識圖片的(dí)內容,從而(ér)我們(mén)就失(shī)去了從圖片(piàn)搜索(suǒ)那塊兒(ér)帶(dài)來(lái)的(dí)流(liú)量,這(zhè)是非(fēi)常(cháng)可(kě)惜的,特(tè)別是當你的產(chǎn)品(pǐn)有(yǒu)數(shù)以(yǐ)萬計的(dí)話.通常我們可(kě)以(yǐ)製定結構化(huà)數據(jù)規(guī)則讓(ràng)技(jì)術(shù)人(rén)員設計程(chéng)序批量替換(huàn)圖片(piàn)的alt屬性,而無需(xū)我(wǒ)們手(shǒu)工操(cāo)作.
我(wǒ)們要(yào)思(sī)考一下,訪客的(dí)搜索習慣是什麼(mó)?會搜(sōu)索哪些(xiē)關(guān)鍵詞(cí)?最(zuì)好(hǎo)可(kě)以再(zài)看一(yī)下穀(gǔ)歌統(tǒng)計裏(lǐ)麵的關鍵(jiàn)詞數(shù)據,看看有無遺(yí)漏(lòu).基(jī)本上來說(shuō),訪客更傾向於搜索品(pǐn)牌(pái)詞+產品(pǐn)係列(liè)的詞組組合和變(biàn)化(huà),那(nà)麼(mó)alt標(biāo)簽(qiān)的結構(gòu)化(huà)規(guī)則就出來了(liǎo),可以(yǐ)寫(xiě)為(wéi):alt="{品牌詞}{產品係列(liè)}-{產品型(xíng)號}".對於產(chǎn)品(pǐn)圖片的描述來說,不建(jiàn)議寫過(guò)多(duō)冗餘內(nèi)容,保(bǎo)持數據(jù)結(jié)構化,做到關(guān)鍵詞辨識度高,關(guān)鍵(jiàn)詞信息豐富(fù)就(jiù)可以了(liǎo),千(qiān)萬(wàn)不要(yào)做關(guān)鍵詞堆積.
2. 圖片(piàn)拍(pāi)攝(shè)角(jiǎo)度(dù)問題
基本(běn)上拍(pāi)攝(shè)產品照(zhào)片(piàn)不會(huì)隻拍(pāi)一(yī)個(gè)角(jiǎo)度(dù),訪客肯(kěn)定不會滿足(zú)於(yú)隻有一張正麵(miàn)照,多(duō)角(jiǎo)度的去(qù)展示圖片(piàn)才能(néng)更(gēng)好的(dí)吸(xī)引訪(fǎng)客(kè)在你的網(wǎng)站(zhàn)上(shàng)停(tíng)留更多的時間,才(cái)可以去激發(fā)起(qǐ)他們的購買(mǎi)欲望,所(suǒ)以(yǐ)自(zì)然需(xū)要(yào)拍攝(shè)物(wù)體的(dí)正麵,背(bèi)麵(miàn),側(cè)麵(miàn),細(xì)節(jié)等等(děng),這個時候(hòu)如何寫alt標(biāo)簽?
最好(hǎo)的方(fāng)法(fǎ)也是保持alt標簽的(dí)結構化(huà),繼承(chéng)主(zhǔ)圖的格式(shì),千(qiān)萬(wàn)不(bù)要去(qù)給(gěi)這些(xiē)圖(tú)片一個(gè)全(quán)新的寫法,正確的寫法(fǎ)如下(xià),alt={品(pǐn)牌詞}{產(chǎn)品係列}-{產(chǎn)品型號}-正麵
alt={品牌(pái)詞(cí)}{產(chǎn)品係列(liè)}-{產品(pǐn)型號}-背(bèi)麵
alt={品(pǐn)牌詞}{產品係(xì)列}-{產(chǎn)品(pǐn)型號}-側麵
保(bǎo)持主幹(gān)"{品牌詞}{產品係列}-{產品型(xíng)號}"不變(biàn),可(kě)以讓搜(sōu)索(suǒ)引擎充分(fēn)確認(rèn)當(dāng)前(qián)圖片係列或(huò)是頁麵就是(shì)關於(yú)那(nà)個關(guān)鍵詞(cí),從(cóng)而(ér)讓這些圖(tú)片被圖片搜索引擎搜索(suǒ)到(dào)的幾率(shuài)大大增加(jiā).單槍匹(pǐ)馬一定倒下.
3. 關(guān)於(yú)大圖的(dí)顯示問(wèn)題
如(rú)果(guǒ)你(nǐ)希望(wàng)提供(gōng)更大(dà)的圖片讓用戶爽一下(xià),這(zhè)個(gè)思路(lù)很好,但要(yào)非常小(xiǎo)心,不(bù)建議將大圖直接(jiē)放在網(wǎng)頁上(shàng)然(rán)後(hòu)用css將(jiāng)圖(tú)片(piàn)縮小(xiǎo),雖(suī)然(rán)你看上(shàng)去圖片變(biàn)小(xiǎo)了,但是(shì)圖片(piàn)的尺(chǐ)寸還(huán)是(shì)實實在(zài)在存在的,這(zhè)會影(yǐng)響(xiǎng)加載速度.相反(fǎn),你(nǐ)可以(yǐ)先放一張較小的圖(tú)片(piàn),然後提供查(chá)看大圖(tú)功能(néng)的(dí)選項(xiàng),不管是點擊彈出大圖還是(shì)另外新頁麵(miàn)顯示,都ok.
當然(rán),還有一些(xiē)人會(huì)把大圖切成(chéng)一(yī)張(zhāng)張(zhāng)小(xiǎo)圖做(zuò)拼(pīn)接(jiē),這(zhè)樣做可以讓圖片(piàn)快速顯示(shì),但同(tóng)時一(yī)張(zhāng)圖片(piàn)切成(chéng)小(xiǎo)圖之後,服務(wù)器(qì)的請(qǐng)求數(shù)會(huì)增(zēng)加,從而會影響網頁加(jiā)載(zǎi)速度.所(suǒ)以,如(rú)果圖片(piàn)的(dí)體(tǐ)積實在過大的(dí)話,建議為圖(tú)片(piàn)專門配置新服務器(qì).
4. 給圖片(piàn)減減肥(féi)
先看(kàn)看(kàn)這(zhè)些數據(jù),
大(dà)部分台(tái)式(shì)機(jī)或是筆(bǐ)記本(běn)用(yòng)戶不會(huì)等(děng)待(dài)超過3秒(miǎo)的網(wǎng)站加載(zǎi)速度…在(zài)移動(dòng)設(shè)備上不會(huì)等待超過(guò)5秒(miǎo)鐘(zhōng)
亞(yà)馬(mǎ)遜(xùn)發現(xiàn)如果(guǒ)他(tā)們(mén)的(dí)網站(zhàn)加(jiā)載速(sù)度(dù)慢(màn)了(liǎo)1秒(miǎo)鐘(zhōng),他們(mén)一年(nián)將(jiāng)損(sǔn)失(shī)16億(yì)美(měi)元(yuán)搜索(suǒ)引擎將網站加(jiā)載速度列(liè)入了(liǎo)排名(míng)算(suàn)法(fǎ)之中(zhōng)
如(rú)果你大量(liáng)的(dí)網(wǎng)站圖片(piàn)非常臃腫,這將嚴(yán)重影響網站加載速度,如(rú)果(guǒ)超過10秒鐘,那你等著和你(nǐ)的(dí)客戶說(shuō)byebye把(bǎ).
圖片文(wén)件(jiàn)應(yīng)該多(duō)大?
有些(xiē)理論說圖(tú)片的(dí)大小應(yīng)該保持(chí)在70kb以下(xià),不過這個(gè)有時候是(shì)很困難的,特(tè)別對(duì)於(yú)大(dà)圖(tú)片來(lái)說(shuō)幾(jī)乎是不(bù)可能(néng)的,除非(fēi)你不求清晰(xī)度(dù).我個人(rén)倒是(shì)覺得(dé),不(bù)要用(yòng)一個(gè)標準去(qù)限製(zhì)每一(yī)張圖片(piàn)的大(dà)小,關鍵(jiàn)在(zài)於(yú),我們(mén)有(yǒu)沒(méi)有(yǒu)去執(zhí)行(háng),有沒有看到(dào)我(wǒ)這篇博文(wén)後去(qù)真正壓(yā)縮圖(tú)片(piàn),這(zhè)才是(shì)關鍵.
5. 用(yòng)對(duì)圖(tú)片(piàn)格式
目(mù)前有(yǒu)三(sān)種(zhǒng)非常流行(háng)的(dí)圖片格(gé)式,他們(mén)是JPEG,GIF,和PNG.讓(ràng)我(wǒ)們(mén)來看看他們(mén)有何不(bù)同,JPEG (或者說 .jpg) 是(shì)最常用的圖(tú)片壓(yā)縮格(gé)式,支持最(zuì)高級別的(dí)壓(yā)縮(suō).通常,對(duì)於顯示要求比較高(gāo)的(dí)圖片來說,JPEG格式(shì)展示的(dí)圖片效(xiào)果(guǒ)較GIF和(hé)PNG有明顯(xiǎn)的優(yōu)勢(shì).
GIFs (.gif) 的(dí)圖片顯示質(zhì)量(liáng)要比JPEGs遜色很多,通(tōng)常(cháng)用(yòng)作(zuò)非(fēi)常簡單的圖(tú)片(piàn)展示(shì),比(bǐ)如素材(cái)或者裝(zhuāng)飾(shì)性圖(tú)案,gif也(yě)可以(yǐ)用(yòng)來(lái)製(zhì)作(zuò)動(dòng)畫.gif不適(shì)合用(yòng)作高顯示(shì)質(zhì)量(liáng)的圖(tú)片(piàn).
PNG圖(tú)片是比gif更(gēng)好(hǎo)的選擇,因為PNG圖片(piàn)支持的色彩要比GIFs多.此外(wài),和JPEG一(yī)樣,PNG反復保存也不會影響圖(tú)片質量,而且(qiě)對於小圖(tú)來說(shuō),PNG占用(yòng)的(dí)體積極(jí)小,PNG完(wán)美支持(chí)透明(míng)背景,所以(yǐ)一般logo或一般(bān)裝飾性(xìng)圖案(àn)都會(huì)選擇PHG格式.注意PNG-24圖片體積(jī)要(yào)超3倍(bèi)地大(dà)於(yú)同(tóng)樣情(qíng)況下的PNG-8版(bǎn)本,對待PNG你(nǐ)要(yào)十(shí)分小(xiǎo)心,看(kàn)仔細了(liǎo).
通(tōng)過對(duì)比(bǐ)相同體(tǐ)積(jī)下(都是(shì)24kb)不同格式(shì)的(dí)圖(tú)片(piàn)顯示效(xiào)果,經過測試(shì)可以看(kàn)到(dào),JPEG 是(shì)獲(huò)勝者(zhě),在同樣(yàng)的(dí)體(tǐ)積下,GIFs和(hé)PNGs必須以(yǐ)犧牲(shēng)圖片質量為代(dài)價(jià).不(bù)過話又說(shuō)回(huí)來,如果對於(yú)非常(cháng)小的(dí)圖(tú)片(piàn)來說(比如(rú)小於5K),PNG是比(bǐ)較(jiào)好的選(xuǎn)擇(zé),相比GIF,PNG可(kě)以(yǐ)在體積很(hěn)小的(dí)情況下(xià)依(yī)然不會(huì)讓(ràng)圖(tú)片失(shī)真(zhēn).
當我們選擇(zé)圖(tú)片格(gé)式時,如(rú)下一(yī)些(xiē)tips供大家參考,
對於(yú)電商網站(zhàn)來說,產(chǎn)品圖片的(dí)質量要求(qiú)極(jí)高,JPEGs毫(háo)無疑(yí)問是(shì)首(shǒu)選,他們有相對高(gāo)質(zhì)量的圖片(piàn)顯(xiǎn)示且不(bù)會占(zhān)用太大的(dí)體(tǐ)積.
絕(jué)對(duì)不要用GIFs來當(dāng)做產品大(dà)圖.不然的話(huà)文(wén)件(jiàn)尺(chǐ)寸會(huì)非常大(dà),也沒(méi)有(yǒu)很(hěn)好(hǎo)的(dí)辦法去(qù)壓(yā)縮它(tā)(一壓縮(suō)就失(shī)真).可以(yǐ)用GIFs做(zuò)動畫(huà)或(huò)是(shì)裝(zhuāng)飾性(xìng)小(xiǎo)圖(tú).
PNG可以作(zuò)為(wéi)JPEGs和GIFS的替(tì)代,如果你想(xiǎng)把產品(pǐn)圖片(piàn)做(zuò)成PNG格(gé)式(shì),盡(jìn)量用(yòng)PNG-8而(ér)非(fēi)PNG-24.PNGs同時(shí)也擅(shàn)長(cháng)處(chǔ)理(lǐ)簡(jiǎn)單地(dì)裝飾圖(tú)而隻需很小的體積,PNG將(jiāng)會(huì)變(biàn)得越(yuè)來越(yuè)流(liú)行(háng).
順(shùn)便提一(yī)句(jù),大(dà)部分(fēn)的(dí)圖(tú)片(piàn)編輯軟件可以轉(zhuǎn)換以上三種(zhǒng)形式(shì)的圖(tú)片格(gé)式(shì).
6. 正(zhèng)確看待縮略(lüè)圖
大(dà)部分(fēn)電(diàn)商網站都有縮(suō)略圖展示(shì),它可以讓訪客迅(xùn)速的掃描(miáo)到盡可(kě)能多的商品樣式而不需要再去點(diǎn)擊(jī)一(yī)個(gè)額外(wài)的(dí)頁麵.
縮(suō)略圖(tú)很棒,但是(shì)要(yào)小心,他們(mén)可能是(shì)你網站的(dí)速度殺(shā)手.他們通常會(huì)出(chū)現在關鍵的(dí)購物流(liú)程之(zhī)中,若因此影響了(liǎo)購物流(liú)程的(dí)流暢性,額(é)… 那你(nǐ)就(jiù)可能又損失了一個顧客(kè).關於(yú)縮(suō)略(lüè)圖,我個人有(yǒu)如(rú)下兩(liǎng)點(diǎn)建議:
盡可能(néng)壓(yā)縮縮略(lüè)圖體積(jī),縮略(lüè)圖(tú)的圖片(piàn)不(bù)要過(guò)高的追(zhuī)求顯示(shì)質(zhì)量(liáng),當用戶點擊(jī)到(dào)下(xià)一(yī)層詳情頁麵(miàn)的時(shí)候再給(gěi)他(tā)一(yī)張(zhāng)高質量的圖片.
盡量(liáng)不要為縮(suō)略圖(tú)設置alt標簽,通(tōng)常我們並(bìng)不(bù)希(xī)望搜索引擎(qíng)索引(yǐn)的(dí)是(shì)縮略(lüè)圖而應是產(chǎn)品詳情(qíng)頁(yè)的高(gāo)質量原(yuán)圖(tú).
7. 使用(yòng)圖片(piàn)地(dì)圖(tú)
如果(guǒ)你的(dí)網站用JS做(zuò)圖(tú)片效(xiào)果來更好的提升用(yòng)戶體(tǐ)驗,你是否擔心(xīn)圖(tú)片是否還能收(shōu)錄?當然通常(cháng)來說蜘蛛是不(bù)會爬(pá)取不顯(xiǎn)示在(zài)源代碼(mǎ)裏麵的圖(tú)片文件的,但是穀歌對(duì)於這點已經很有(yǒu)經驗了,通過圖片(piàn)地圖的(dí)提交,即把(bǎ)圖(tú)片地址一個個老(lǎo)老實實地(dì)列出來(lái),搜索(suǒ)引(yǐn)擎(qíng)就(jiù)可以爬行(háng)了.
對於圖片(piàn)地圖(tú),我就(jiù)不多(duō)說(shuō)了,因(yīn)為(wéi)穀(gǔ)歌有許(xǔ)多指(zhǐ)導(dǎo)文(wén)檔來幫(bāng)助(zhù)你提(tí)升(shēng)圖片(piàn)的搜索排名(míng),看這裏.
8. 留(liú)心裝飾性圖片(piàn)
非產品類(lèi)的圖片(piàn)比如(rú)背(bèi)景圖，按鈕圖,邊框(kuàng)圖等都(dū)可算(suàn)作裝飾(shì)圖(tú),作(zuò)為一(yī)個優(yōu)化者(zhě),你(nǐ)需(xū)要仔細去(qù)檢(jiǎn)查(chá)這些圖(tú)片的體積是否過大(dà),是(shì)否會影(yǐng)響網站載(zǎi)入速度(dù).
這裏有一些關於如(rú)何壓縮裝飾圖(tú)的建(jiàn)議:
如果隻是一(yī)些邊框(kuàng)類的，或(huò)是(shì)簡(jiǎn)單(dān)的樣式圖(tú)片(piàn),使用PNG-8或(huò)者GIFs,你可以(yǐ)創(chuàng)建(jiàn)非常(cháng)好看的(dí)圖片(piàn)並且(qiě)隻占幾(jī)百bytes的體(tǐ)積.
如(rú)果可(kě)能的話,盡(jìn)量使用css來創(chuàng)建一(yī)些特(tè)殊效(xiào)果(guǒ),而(ér)非圖片.
不(bù)建(jiàn)議(yì)為網站設(shè)置(zhì)背景圖(tú)片(piàn),如(rú)果(guǒ)一(yī)定要有的話,在(zài)保(bǎo)證(zhèng)清晰度(dù)的前(qián)提下最(zuì)大(dà)程度(dù)去壓縮體積.你(nǐ)還(huán)可以把(bǎ)背(bèi)景圖當中鏤空或保持透(tòu)明來壓(yā)縮體(tǐ)積.
好(hǎo)了(liǎo),今(jīn)天(tiān)關於(yú)圖片(piàn)優化我就(jiù)分享(xiǎng)到這(zhè)裏,大(dà)家有無更好地建(jiàn)議?期待(dài)您(nín)的留(liú)言,咱們一(yī)起探討共同進(jìn)步.
來源: 投(tóu)稿 作(zuò)者: Fimen
轉載(zǎi)請保留原文地(dì)址: https://antelcom.cn/show-564.html