優化你的圖片使用( |1 t- B- [5 N
5 n {0 f8 c! ~& V, M圖片就像你網站很直觀的零件,但是你依然可以優化它們。所有的圖片你都可以有一個很直接的文件名和一個「alt」屬性,這兩者你都可以好好地加以利用。3 F" p5 e. b- f, S# ^
& ] E3 N+ F( L/ X
如果你的圖片出於某種原因無法顯示,」alt」屬性允許你為它添加一個替代文字。% r, }& J' f0 A0 M( Q
9 L% f6 e4 B! E

+ |4 \- g0 n0 I9 o
: w$ t! {1 T" T1 M% y- e9 J在我們這張圖片的」alt」屬性給出了一個簡練卻精確的描述。
5 F h. t5 l Z* k' {& l2 w9 H0 Z& G1 N: Z. a9 |+ n
為什麼使用這個屬性呢?如果你的用戶瀏覽你的站點使用的是不支持圖片的設備,或者其它某種技術,比如說屏幕閱讀器,」alt」屬性在這時就大有用處了,它可以為你的圖片可以一些信息。% l! _# g" u! x! j
' u( S+ _+ _$ b. i4 K. S* y& I& ?
% T) }' H& L1 x4 @
6 Y. R: H/ y2 z/ [" K' g* r5 O+ T- t出於某種原因我們這張圖片就沒有顯示出來,但至少替代文字顯示出來了。
# n1 N" \) q9 u/ J- R: y0 b/ S, z) u. c2 c) C+ Y( |; P6 C% F+ S. q
使用」alt」屬性的另一個原因便是你把圖片作為鏈接時,圖片的替代文字將會被當作一個鏈接的錨文本處理。然而,當文本鏈接可以勝任相同功能時,我們並不推薦為你的網站導航使用太多的圖片鏈接。最後,可以試著優化一下圖片的文件名和替代文本,使得像Google圖片搜索這樣的搜索服務能夠更輕鬆地讀懂你的圖片。
/ `% d6 S, H/ ~, J) n3 U- N
9 Q7 N# P* ]* G: R9 a圖片優化實戰經驗
- d$ D7 H( L7 [ }$ B4 b$ G
% l7 {1 x( h5 v: F 1. 為圖片的文件名和替代文本使用簡練但很具描述性的文字——就像網頁其它優化目標一樣,文件名和替代文本在短小精練時最好。只是需要避免:7 X* m: A- R; u: q
* 使用像」image1.jpg」,」pic.gif」,」1.jpg」這類自動生成的文件名。(一些含有成千上萬圖片的網站可能就會考慮使用這種命名方式。)
. h/ m. k/ Z) [' P) ?3 v ] I0 | * 把文件名寫得極其冗長。. G5 T1 G9 S# \' y
* 在替代文本裡大量堆砌關鍵詞或者直接複製粘貼一整個句子。' A+ B! K1 [: L* G2 V4 i
2. 把圖片作為鏈接時為它們添加替代文本——如果你決定把一張圖片作為一個鏈接,替代文本可以使Google很容易地明白你將指向網頁的內容。試著想像一相你在為文本鏈接添加錨文本時的情景就明白了。但下面的情況你可能需要避免:
! }# _' x7 X, l+ f+ m+ Z0 ~ * 把替代文本寫得太長,以至於被當成垃圾處理。
" J4 e& U& H0 T3 Y * 為你的整個網站導航都使用圖片來表現。/ S, {7 J- P2 \1 x! l; i
3. 為圖片專門劃分一個存儲目錄——拋棄那些交叉整個域名的目錄或者子目錄來存儲圖片的方式,考慮使得一個單一的目錄來存儲它們(比如說brandonsbaseballcards.com/images/).這是對你圖片路徑的簡化。
, N4 {* ]& T, T6 R$ e5 u7 K) P 4. 使用常用地且被支持的文件格式——大部分瀏覽器都支持JEPG,GIF,PNG和BMP格式的圖片。讓你的文件擴展名和圖片格式匹配也是很重要的。 |
|