SEO圖片優化
圖片最佳化技巧！SEO重要的圖片優化方式｜天矽科技客製化網頁設計
圖片對SEO的影響
SEO是搜尋引擎最佳化，也就是網站為了提高自然搜尋排名，必須不斷使網站優化，並讓爬蟲將該網站放到搜尋結果頁之中，藉此提升客量、點閱與曝光。
網站需要優化的項目很多，如網站內容的豐富與原創性、關鍵字設定、內外連結設定、後台程式碼是否高度結構化、網站瀏覽速度、裝置的適應性…等，都是需要全方位的去照顧到。
大家在寫文章充實網頁時，通常都會生產一篇圖文並茂的文章，增加使用者的易讀性與文章的豐富度，但卻忘了爬蟲看不懂圖片這件事。除此之外，圖片如果沒有優化就放上來，對網站的開啟速度也會造成影響，這對SEO來說是非常不好的事。
- 爬蟲看不懂圖片：
如果我們沒有在圖片上加入註解，爬蟲就沒有辦法理解圖片是在闡述什麼樣的關鍵字，如此自然不會將該圖片檢索到搜尋引擎上。
※可使用alt屬性，繼續閱讀，下方有介紹 - 影響網站開啟速度：
如果一個網站的圖片過多，或是根本沒有優化就放上去，當使用者在開啟網站時就會需要較長的時間來載入，使用者對一個陌生的網站可是沒有耐心等這麼久的！因此這樣的網站有可能不被搜尋引擎喜歡，更不用說推薦給使用者了。
※要提高網站開啟速度，除了圖片優化外，也能利用圖片緩載入、圖片webp格式或以圖片裁切的方式(不建議)放入網站。
延伸閱讀
為什麼SEO很重要？超過62％的使用者都相信自然搜尋排名
圖片優化的優勢
於網路上增加圖片，不僅能提高網站與文章的可讀性，還能使圖片成為關鍵字被檢索，不過圖片的重要性似乎常常被大家所遺忘，這實在是非常可惜。
- 縮短圖片載入時間、加快網頁速度
- 圖片與關鍵字產生連結
- 增加圖片搜尋結果的曝光
- 降低使用者離開網站的機會
- 增加使用者的良好體驗
進行圖片優化
圖片優化對網站來說，除了無法以高清的方式檢視圖片以外，幾乎是沒有什麼特別的問題，進行優化對使用者與爬蟲來說，都是非常加分的。因此我們可以利用以下幾個項目來進行優化：
增加alt屬性
alt語法：
＜img alt="圖片要表示的文字" src="圖片連結網址" /＞
舉例：
▲圖片語法
▲前台顯示
增加alt屬性的好處：
➤被爬蟲檢索
能有效被搜尋引擎的爬蟲判斷該圖片的內容訊息，還能將此文字說明變成關鍵字，檢索到搜尋引擎中，並推薦給使用者瀏覽。
➤友善眼疾人士
當弱視或有眼疾的朋友在瀏覽網站時，若圖片有添加alt屬性，該使用者就能更快的理解你的圖片要表達什麼，提升了網站的友好程度。
➤圖片失效以文字替代
當圖片失效、連結錯誤、圖片壞掉…等狀況時，圖片就會變得無法顯示，這時，如果有加入alt屬性，使用者就能立即明白這張圖原本是要表示什麼畫面，對網站管理者來說，也能較快的去將圖片做更換。
以上圖舉例，若該圖片失效就會變成下面這樣：
雖然圖片壞了，但我們還是知道這張圖片要給我們看的是「貓咪」，這就是alt屬性的重要性。
添加alt屬性示範
以上圖的貓咪圖片、網址為”cat.png” 繼續舉例：
＜img alt=" " src="cat.png"＞
錯誤！
這裡的alt忘了添加，這是許多人經常忘記的一部份，希望大家要用力記住。
＜img alt="貓咪 橘貓 胖貓 成貓 可愛貓咪 動物 四腳生物 寵物 白橘貓" src="cat.png"＞
錯誤！
裡面的關鍵字、替代文字過多，會混淆圖片的意義。
＜img alt="貓咪圖片" src="cat.png"＞
良好！
這樣的替代文字能使爬蟲理解，也能讓使用者明白該圖片的表示意圖，但其實還能再更好一點。
＜img alt="草地上的貓" src="cat.png"＞
良好！
更精確的表示圖片的意圖，不僅能縮短關鍵字搜尋範圍，對使用者來說，若圖片失效也能更加精確的想像該圖片原先的畫面。
增加圖片長寬
當圖片放上網站時，若沒有特別設定長寬，圖片就會以它原本的樣子放在網站中。但我們可以思考，每個使用者的瀏覽介面與裝置都不同，圖片有沒有可能因此跑掉？
因此，設定圖片的長寬以確保圖片不會因為瀏覽器、裝置與瀏覽介面的不同而變的怪怪的。
▲設定長寬比例
在style中設定width與height的比例，建議以 % 的方式去設定，如此一來無論裝置如何，該圖片都能以百分比的方式來縮放並顯示給使用者瀏覽。
圖片檔案
我們在上傳圖片時，是否都是用該圖片的原檔名上傳？
我們也能在上傳照片時，可以另外設定該圖片的檔案名稱，因為當搜尋引擎找不到替代文字的敘述時，會有機會用你的檔案名稱作為圖片的註解；而且檔案名稱也是有機會被爬蟲當作註解檢索到網站中，因此重新命名該圖片的檔案名稱也是頗為重要的。
舉例來說好了...
- 如果該圖片檔案是中文命名，那麼上傳檔案就會變成一串亂碼，像這樣：
＜img alt="貓咪圖片" src="%E9%BA%B…BD%E7%A7%.jpg" /＞ - 如果該圖片檔案是以照片的原檔名命名，上傳檔案就會變成這樣：
＜img alt="貓咪圖片" src="IMG_1903.jpg " /＞ - 如果我們都有重新命名檔案，上傳檔案就會變成這樣：
＜img alt="貓咪圖片" src="cute-cat.jpg " /＞
由上述舉例，相信你也能看出哪個表現方法較具有優勢。
圖片中的文字
建議不要把重要的文字只放在圖片裡面，因為爬蟲看不懂圖片，更不用說圖片裡面的文字了！什麼是重要的文字？像是頁面標題、選單、圖片說明、產品內容…等。
有很多商家在製作網頁時，喜歡將說明文字放在圖片中，這樣雖然美觀、好看，但網站畢竟不是社群網站，這樣容易造成閱讀、爬蟲檢索的問題，因此建議將說明文字寫進html語法中，才是正確的做法。
圖片品質
網站中所呈現的圖片，該有的品質還是一定要有的。千萬不要將解析度過低、模糊或是有其他公司浮水印的圖片放到網站中，這樣會讓使用者認為你的網站不夠安全、很像詐騙。
圖片檔案大小
圖片品質要顧，但圖片的檔案大小當然還是愈小愈好！
圖片檔案愈大，載入的時間愈久，使用者可能沒有那麼多耐心等網站的圖片顯示，尤其是陌生、不認識你的網站的客戶。等待時間愈久，使用者愈容易離開網站，這樣不僅損失一個潛在客戶，對SEO也是相對扣分。
因此，網站中的圖片檔案不要太多，檔案也盡量以不超過5MB為原則上傳，若檔案還是太大，建議先壓縮再上傳！
▲天矽科技會在網站後台圖片壓縮工具。
參考來源
Googl搜尋中心-圖片最佳做法
天矽科技的服務
天矽科技在協助架設網站時，都以W3C所制定的規則來架設網站，在SEO對於網站結構要求的方面，是沒有必要去擔心的。
若客戶有特殊的需求，像是在網站首頁嵌入大量圖片，或是嵌入過多需要時間顯示的動畫時，我們都會評估網站開啟的速度，並給予有效的建議，若這樣做會發生什麼事、後續可能造成的問題…等。
我們重視SEO自然搜尋流量，因此會給予專業的SEO建議，不會客戶要什麼就給什麼，我們希望給予客戶的不僅是優質的網站介面與操作系統，更希望該企業能夠藉由網站，被更多使用者看見！
