【Web】Optimize Images 圖片最佳化 - 針對 JPG, JPEG

Common 目標

• 網頁上經常會使用大量的圖片
• 為節省 loading 的時間，加速網站效能，就必須將圖片最佳化
• 根據統計大部分的使用者，期許網頁載入時間小於2秒，超過3秒可能會直接離開該網頁

Testing 檢測網頁

• PageSpeed Insights：https://developers.google.com/speed/pagespeed/insights
  • 中文版
• 分析完成後，找到最佳化圖片，並點開顯示修正問題的作法

  • 此網站會詳細的說明，哪些圖片需要最佳化

    

Type 圖片類型的選擇

• 動畫：GIF
• 高解析度，保留細節：PNG
• 壓縮圖片、最佳化圖片：JPEG

Optimize Images 圖片最佳化 (JPEG, JPG)

步驟1：圖片尺寸

1. 從上圖可以發現
   • 顯示在網頁上的圖片大小是 245*212
   • 但原始圖片大小是 300*260
   • 表示提供了過多不必要的像素
2. 將原始圖片尺寸盡可能地接近顯示在網頁上的圖片尺寸
3. HOW?

   • 考慮到步驟2，建議使用 Adobe Photoshop，來調整圖片尺寸

   • 影像 >> 影像尺寸 ctrl + alt + I，調整成適合的大小

     

步驟2：儲存為網頁用

1. 檔案 >> 轉存 >> 儲存為網頁用 ctrl + alt + shift + s

   

2. 左上角的頁籤選擇 最佳化

3. 右側圖片類型選擇 JPEG

4. 圖片品質建議選擇：高

   • 其他的品質則是按自己的需求更動
   • 例如：需要保留更多細節的圖，請選擇極高或最佳，但相對的檔案大小會增加數倍

5. 補充：步驟1的調整圖片尺寸，也可以在右下角進行調整

步驟3：壓縮圖片

• 推薦使用以下網站進行壓縮
  • TinyJPG (多圖)：https://tinyjpg.com/
  • Compressor.io (單圖)：https://compressor.io/compress

Result 最佳化結果

建議檔案大小

• 小圖：80-150 KB
• 大圖：250-350 KB

Example 舉例

• 原圖

  • 尺寸：3840*2160
  • 大小：4.79 MB

• 最佳化

  • 尺寸：1920*1080
  • 大小：355 KB

  

Extensive Reading 延伸閱讀

1. 教學影片 How To Optimize Images For Web

2. 提升 PageSpeed Insights 分數，網站效能優化課程學習筆記
   https://jerrynest.io/web-performance-opt/

Reference 參考資料

1. 圖示：http://aboutliy.com/8-tips-to-optimize-images-for-better-ranking-in-search-engine/
2. Optimizing Images for Web: A Practical Guide
   https://www.abetterlemonadestand.com/optimizing-images-for-web/
3. Image Optimization：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
   • 中文版
4. PageSpeed Insights：https://developers.google.com/speed/pagespeed/insights