Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on 五月 4, 2015 in SEO, 網路行銷 | 0 comments

圖片最佳化實作 Tips

圖片最佳化實作 Tips

直接破題,影響 SEO 搜尋引擎優化的因素很多,網站圖片最佳化可能是比較少受關注的面向,以下為五個做好圖像優化的理由:

1. 提高自然排序及加快網頁傳輸速度;
2. 利於圖像搜尋;
3. 未優化的圖檔易影響網站下載時間、跳出率等;
4. 加強行動搜尋網站排名優化。

基於上述理由,筆者分享以下十個圖片優化的 Tips:

1. 圖片檔案大小 (Image Size):
盡可能地越小越好。

2. 圖片的顏色分辨率 (Image Color Resolution):
圖像的顏色分辨率太高的話,意味著圖片的像素、檔案也會跟著提高。這邊提供兩個圖片優化的小工具,經過特別處理的圖片,可以有效降低網頁下載時間。

影像優化工具: optimizillakraken

3. 圖片名稱 (Image Name):
適當的檔名編輯。(參考範例說明)

4. Alt Tag:
編寫與圖片有關的 Alt Tag 標籤屬性,書寫的方式可以是與圖片內容有關的描述。(參考範例說明)

image-optimization-example

5. 圖片尺寸 (Image Dimension):
修正圖片的尺寸,有助於改善網站速度,因此視需求調整圖片的寬、高是必要的。

image-dimension

6. 圖片的檔案格式 (Image File Format):
圖像的檔案處理,專家說 JPEG 為最佳格式,PNG 及 GIF 檔案格式也有助於縮小檔案尺寸及加快傳輸、下載效率。

7. 圖片的網站地圖 (Image Sitemap):
如果你使用 JavaScript 、 CSS 、 Pop-Ups 或其他方式於網站中展示圖片,那麼透過 Google 圖片網站的協助,我們的網站圖像將會受到 Google 關注並收錄。

參考連結:Google Support / Build your sitemap – Image Sitemaps

8. 裝飾性圖像 (Decorative Image):
不要有太多的在裝飾性圖像,非不得已要需要使用這類視覺元素,也無需在該類圖片上添加 Alt Tag,以免影響搜尋引擎收錄不相關的資訊,降低網站權重;這類裝飾性圖像通常只是為了吸引目光,而與網站內容無關;建議盡可能的使用 CSS 樣式表去取代任何裝飾性圖像。

9. 響應式設計 (Responsive):
響應式網站能提高 SEO 成效,重要性不言可喻;為了符合行動版網站的設計原則,切勿使用過多的裝飾性圖片,以免影響展示效果。於行動版網站的設計中,圖片的使用數量也需要另外計算,假設桌機版網站使用了 5 張圖片,那麼行動版應該要降低圖片數量,移除 2 – 3 張不需要的圖片或裝飾性圖片為佳。

10. Base64 編碼 (Base64 image):
使用 Base64 編碼處理網站 Logo 或是第一張展示大圖,通常能獲得較快的網站速度。

相關連結:Base64 Tool

由於 Google 近期更新了行動搜尋演算法,因此圖片的優化也將直接影響行動網站的 SEO 成效。除了上述所分享 Tips,有需求的朋友可以更進一步參考 Google 所分享圖片最佳化指南。

再者,若是想瞭解桌機或行動版網頁速度與圖片大小問題,可以利用 Google PageSpeed Insights 完成檢測,並獲得圖片優化 / 最佳化建議。

延伸閱讀:行動載具的搜尋引擎優化指南 Mobile SEO Tips

參考資料:
10 Killer Tips for Image Optimization to Get Google Trust

Milu Liu

前中年期新鮮人,關注各類行銷議題,喜歡生活中細碎卻美好的事物,希望成為綠手指。

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr

0 Comments

Trackbacks/Pingbacks

  1. 到底有沒有優化圖片必要之看看數據就知道 | Google Analytics 網站分析資訊網 - […] “上週文章" 的朋友,還請按著 Ctrl 鍵點選右側文字連結 “網站圖片優化與 SEO 成效之關聯" […]
  2. 优化图片是否必要?看看数据就知道 – www.soho007.com - […] “上周文章” 的朋友,还请按著 Ctrl 键点选右侧文字连结 “网站图片优化与 SEO 成效之关联” […]

Post a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *