優化你的圖片使用
6 o) M. }, f9 B9 Z7 P8 r0 F" R
7 x/ i2 }1 s" m0 w6 T# a2 r圖片就像你網站很直觀的零件,但是你依然可以優化它們。所有的圖片你都可以有一個很直接的文件名和一個「alt」屬性,這兩者你都可以好好地加以利用。6 o/ R( z1 w3 V2 v- y
( r( u1 Q/ v* l& W! E/ v9 W) p& _
如果你的圖片出於某種原因無法顯示,」alt」屬性允許你為它添加一個替代文字。
3 z- w% D( T k, P% x& |3 a$ ]0 u+ c( g! a6 ]- ?: Y8 o

! y* \$ Q% ~: L, Z# i. ^
' t' i' ^( s( y' d在我們這張圖片的」alt」屬性給出了一個簡練卻精確的描述。
+ `% R: m2 W J" i8 v) i' e: M' i( i0 U; Y' b+ b0 D8 r$ ^4 y
為什麼使用這個屬性呢?如果你的用戶瀏覽你的站點使用的是不支持圖片的設備,或者其它某種技術,比如說屏幕閱讀器,」alt」屬性在這時就大有用處了,它可以為你的圖片可以一些信息。4 w- ^5 w+ W1 N' i/ W7 w; Q2 ^
, m- Q4 G2 z3 U s
% i' G5 C* i; c: `/ ]# Z+ Q( Y4 P
& h5 G1 W$ }. `5 R! x出於某種原因我們這張圖片就沒有顯示出來,但至少替代文字顯示出來了。
9 k/ {# U% A' ~) V0 a8 X; k
) f% t5 v- _5 [5 R, Z+ Y0 m使用」alt」屬性的另一個原因便是你把圖片作為鏈接時,圖片的替代文字將會被當作一個鏈接的錨文本處理。然而,當文本鏈接可以勝任相同功能時,我們並不推薦為你的網站導航使用太多的圖片鏈接。最後,可以試著優化一下圖片的文件名和替代文本,使得像Google圖片搜索這樣的搜索服務能夠更輕鬆地讀懂你的圖片。2 k8 `# g9 U# P# Q/ e9 }
% v/ a+ X/ s4 m" F# Y
圖片優化實戰經驗
+ x! v7 _) b) `# e h' H! m. t, j& d1 z7 }: C- }
1. 為圖片的文件名和替代文本使用簡練但很具描述性的文字——就像網頁其它優化目標一樣,文件名和替代文本在短小精練時最好。只是需要避免:7 j1 B5 p1 \8 n5 I; O% g
* 使用像」image1.jpg」,」pic.gif」,」1.jpg」這類自動生成的文件名。(一些含有成千上萬圖片的網站可能就會考慮使用這種命名方式。)
2 R7 t! W" G% P- q6 }" u4 ~+ X * 把文件名寫得極其冗長。# V7 b* N6 B5 v$ A
* 在替代文本裡大量堆砌關鍵詞或者直接複製粘貼一整個句子。3 f* |, d6 v" Q
2. 把圖片作為鏈接時為它們添加替代文本——如果你決定把一張圖片作為一個鏈接,替代文本可以使Google很容易地明白你將指向網頁的內容。試著想像一相你在為文本鏈接添加錨文本時的情景就明白了。但下面的情況你可能需要避免:" ^+ U8 q, R0 W& o3 F" S8 ?
* 把替代文本寫得太長,以至於被當成垃圾處理。
7 V) |' g( ` \7 A * 為你的整個網站導航都使用圖片來表現。. G' ]% w8 K$ f+ k8 B9 j. m1 N% \3 \
3. 為圖片專門劃分一個存儲目錄——拋棄那些交叉整個域名的目錄或者子目錄來存儲圖片的方式,考慮使得一個單一的目錄來存儲它們(比如說brandonsbaseballcards.com/images/).這是對你圖片路徑的簡化。5 m- y. A+ j1 Q0 t: Y
4. 使用常用地且被支持的文件格式——大部分瀏覽器都支持JEPG,GIF,PNG和BMP格式的圖片。讓你的文件擴展名和圖片格式匹配也是很重要的。 |
|