對(duì)于任何一個(gè)網(wǎng)站來(lái)說,圖片都有著很大的比重,特別是現(xiàn)在越來(lái)越講究可閱讀性的現(xiàn)在。那么如何在圖片方面做好優(yōu)化的工作呢?今天小編就來(lái)跟大家說說。
圖片命名簡(jiǎn)單直白
使用相關(guān)關(guān)鍵詞描述圖片可以幫助網(wǎng)頁(yè)被搜索引擎收錄,因?yàn)樗阉饕娌粌H會(huì)檢索網(wǎng)頁(yè)上的文本,還能檢索出描述圖片的關(guān)鍵詞。因此,創(chuàng)造性的描述、包含關(guān)鍵詞的文件名對(duì)圖像優(yōu)化至關(guān)重要。
拿這張圖片舉個(gè)例子:
一般默認(rèn)命名為“DCMIMAGE10.jpg”,但是如果把圖片命名為2012-Ford- Mustang-LX-Red.jpg就能提高被搜索到的機(jī)率。
想想消費(fèi)者在搜索產(chǎn)品時(shí)會(huì)輸入什么關(guān)鍵詞,我們就可以據(jù)此命名。比如,想購(gòu)買汽車的消費(fèi)者可能會(huì)輸入以下關(guān)鍵詞:
2012 Red Ford Mustang LX(2012年紅色福特野馬LX)
Ford Mustang LX Red 2012(福特野馬LX紅2012)
Red Ford Mustang LX 2012(紅色福特野馬LX 2012)
我們可以查看網(wǎng)站分析來(lái)了解用戶的關(guān)鍵詞搜索習(xí)慣,或者查看用戶最常用的命名模式,并按照該模式來(lái)命名我們的圖片。
仔細(xì)優(yōu)化alt屬性
Alt屬性是瀏覽器無(wú)法正確顯示圖像時(shí),代替圖像的文本,它們也可以增加網(wǎng)頁(yè)可訪問性。如果網(wǎng)頁(yè)無(wú)法顯示圖像,根據(jù)瀏覽器設(shè)置,將鼠標(biāo)懸停在圖像上,用戶也將看到alt屬性文本。
alt屬性也會(huì)為網(wǎng)站增加SEO價(jià)值。在網(wǎng)站上添加合適的包含關(guān)鍵詞的Alt屬性,可以提高網(wǎng)站在搜索引擎上的排名。事實(shí)上,添加alt屬性可能是電商產(chǎn)品要在Google圖片和網(wǎng)絡(luò)搜索中顯示的最佳方式。
下圖為一個(gè)Alt屬性的源代碼:
圖像優(yōu)化的首要任務(wù)就是添加網(wǎng)站上每個(gè)產(chǎn)品圖片的alt屬性。
以下是一些簡(jiǎn)單的alt屬性規(guī)則:
●和圖片文件名一樣,用通俗的語(yǔ)言描述圖片。
●如果產(chǎn)品有型號(hào)或序列號(hào),請(qǐng)?jiān)赼lt屬性中標(biāo)明。
●不要在Alt屬性中加入過多關(guān)鍵字(比如alt =“福特野馬肌肉車現(xiàn)在購(gòu)買便宜的最優(yōu)惠價(jià)格”)。
●請(qǐng)勿將alt屬性用于裝飾性圖像。這樣可能會(huì)因?yàn)檫^度優(yōu)化而受到搜索引擎的懲罰。
●請(qǐng)定期進(jìn)行健全性檢查。查看我們網(wǎng)頁(yè)的來(lái)源并檢查我們的alt屬性是否正確填寫。
合理選擇圖像尺寸和產(chǎn)品角度
通常產(chǎn)品圖片包含多個(gè)角度,比如我們想賣掉福特野馬,那我們可以加入內(nèi)飾、后部(尤其是空氣擾流板)、輪輞、發(fā)動(dòng)機(jī)等等的特寫照,并為每張圖片創(chuàng)建獨(dú)特的alt屬性,比如:
2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg - >使用alt屬性:alt =“2012 Ford Mustang LX Red Leather Interior Trim”
2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg - >使用alt屬性:alt =“2012 Ford Mustang LX Red Rear View Air Spoiler”
這樣做可以增加產(chǎn)品被搜索到的概率。
我們可能會(huì)覺得越大的圖片會(huì)為用戶帶來(lái)更好的瀏覽體驗(yàn),但是要小心謹(jǐn)慎。不管怎樣,不要將大的圖片放在網(wǎng)頁(yè)上,然后通過源代碼縮小尺寸。因?yàn)樘蟮膱D片會(huì)加長(zhǎng)圖片的加載時(shí)間。我們可以放上小一點(diǎn)的圖片,把較大的圖片放在彈出窗口或者是單獨(dú)的頁(yè)面上。
調(diào)整圖像的文件大小
一半的消費(fèi)者都不愿意等待電商網(wǎng)站加載超過3秒鐘。亞馬遜一項(xiàng)研究發(fā)現(xiàn),如果他們的網(wǎng)站運(yùn)行慢1分鐘,每年就會(huì)損失16億美元。谷歌也把頁(yè)面加載時(shí)間作為其算法中的排名因子。由此可見,網(wǎng)站加載時(shí)間至關(guān)重要。如果普通電商網(wǎng)站加載時(shí)間需要15秒,就會(huì)損失大量潛在消費(fèi)者。
網(wǎng)站的內(nèi)容大小不同,需要加載的時(shí)間也不同。文件越大,加載時(shí)間就越長(zhǎng)。如果商家縮小圖片文件的大小、提高網(wǎng)頁(yè)加載速度,那么訪客就會(huì)留下來(lái)。
縮小圖像文件大小的方法之一是在Adobe Photoshop中使用“Save for Web”命令。電商網(wǎng)站圖片最好不要超過70kb,我們可以用Photoshop把圖像盡量調(diào)小,但是同時(shí)也要注意圖片質(zhì)量。
質(zhì)量:位于右上角(即70)
文件格式:位于右上角(即JPEG)
優(yōu)化:位于右上角的復(fù)選框(即Optimized)
顏色:位于右上角此復(fù)選框(即轉(zhuǎn)換為sRBG)
縮小和銳化:位于底部右側(cè)(即W:和H :)
預(yù)期的文件大小:位于左下角(即136.7K)
我們也可以選擇“導(dǎo)出為”
除了Photoshop以外,還有許多在線工具可以編輯圖片。Adobe還提供Photoshop的免費(fèi)平板和手機(jī)版應(yīng)用軟件。雖然移動(dòng)版沒有電腦版Adobe Photoshop功能全,但它涵蓋了圖像編輯的基礎(chǔ)工具,且是免費(fèi)的。
選擇合適的文件類型
網(wǎng)絡(luò)上有三種圖片文件常用格式:JPEG、GIF和PNG。
(1)JPEG
JPEG(或.jpg)是互聯(lián)網(wǎng)上圖片的標(biāo)準(zhǔn)格式。JPEG圖像可以在保證圖片質(zhì)量的情況下壓縮成更小的格式。以上示例圖片,JPEG格式也能保證高質(zhì)量。
(2)GIF格式
GIF(.gif)圖像質(zhì)量比JPEG圖像低,適合更簡(jiǎn)單的圖像,如圖標(biāo)和裝飾圖像,GIF也支持動(dòng)畫。
GIF非常適合網(wǎng)頁(yè)上的簡(jiǎn)單圖像(僅包含幾種顏色),但不太適合復(fù)雜的圖像和圖片,也不適合大圖。
(3)PNG
PNG作為GIF的替代品,使用越來(lái)越廣泛。PNG支持比GIF更多的顏色,并且不會(huì)像JPEG一樣因?yàn)橹貜?fù)保存而降低質(zhì)量,但是文件大小仍然比JPEG圖像大得多。
另外需要注意,PNG-24圖像的文件大小比PNG-8大三倍以上。
下面是一個(gè)極端的例子,三中文件類型的大小都為24kb。可以看出,JPEG在三者中完勝,而GIF和PNG必須降低質(zhì)量才能保證相同的文件大小。
在大多數(shù)情況下,JPEG是最好的選擇。它們?yōu)樽钚〉奈募叽缣峁┑馁|(zhì)量最佳。
千萬(wàn)別將GIF用于大圖,那樣圖片尺寸會(huì)非常大,而且沒辦法降低。GIF可以用來(lái)作為縮略圖和裝飾圖片的格式。
PNG可以成為JPEG和GIF之間很好的選擇。如果我們只能用PNG格式,請(qǐng)使用PNG-8,而不是PNG-24。PNG格式的圖片比較小,所以適合簡(jiǎn)單的裝飾圖像。
大多數(shù)圖像編輯軟件可以將圖像保存為上述任何文件格式。
優(yōu)化縮略圖
許多電商網(wǎng)站都會(huì)使用縮略圖,特別是在類別頁(yè),縮略圖可以幫助網(wǎng)站快速展示產(chǎn)品。
縮略圖一般會(huì)出現(xiàn)在購(gòu)物的關(guān)鍵點(diǎn),如果它們使我們的類別頁(yè)面不能快速加載,客戶可能就會(huì)因此流失。因而盡可能縮小縮略圖文件的大小。
謹(jǐn)慎使用裝飾性圖像
網(wǎng)站通常有各種各樣的裝飾圖片,例如背景圖片、按鈕和邊框。所有與產(chǎn)品無(wú)關(guān)的東西都可能被視為裝飾形象。
雖然裝飾圖像可以增加網(wǎng)頁(yè)的美感,但它們會(huì)擴(kuò)大文件大小、延長(zhǎng)加載時(shí)間。所以,賣家需要謹(jǐn)慎使用裝飾圖片,以免客戶訪問量降低。
賣家可以檢查網(wǎng)站上所有裝飾圖像的文件大小,或使用最小化文件模板。
以下是一些縮小裝飾圖像文件大小的方法:
●構(gòu)成邊框或簡(jiǎn)單圖案的圖片可以用PNG-8或GIF,這樣做出的美觀邊框和圖案只需要幾百字節(jié)。
●盡可能使用CSS創(chuàng)建彩色區(qū)域,而不是使用圖像。盡量用CSS樣式來(lái)替換裝飾圖像。
●大型壁紙風(fēng)格的背景圖片文件可能會(huì)很大,盡可能在不破壞圖像質(zhì)量的前提下縮小文件。
●縮小背景圖像大小的一種技巧是剪切背景圖像的中間部分,使其成為平坦的顏色,甚至透明。
看完這些就應(yīng)該了解圖片應(yīng)該如何進(jìn)行優(yōu)化了,那么還等什么呢?趕緊把網(wǎng)站的圖片優(yōu)化一下,結(jié)果可能比你想象的更有用!
網(wǎng)站題目:濰坊seo優(yōu)化:建站產(chǎn)品圖片優(yōu)化攻略
網(wǎng)頁(yè)網(wǎng)址:http://vcdvsql.cn/article42/cihjhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、網(wǎng)站改版、定制開發(fā)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)