本課程專為初學者和進階網路開發人員打造，內容涵蓋各種基本知識，包括確保圖片來源以有效的要求及轉譯，以及從伺服器與用戶端進行通訊常見圖片格式的詳細資訊等。在本課程中，您將學到如何以最小的尺寸顯示相片，同時避免影響圖像品質。
您可以從頭開始瀏覽整個系列指南，全面瞭解圖片在新型網路中的運作方式。或者，您也可以參考本系列文章，瞭解日常工作中會用到的特定概念和標記模式。
如果您是網站開發新手，請查看「學習 HTML」課程，瞭解標記的基本概念、學習 CSS 基礎知識課程，以及學習回應式設計課程，瞭解圖片在回應式版面配置中呈現的方式。
課程內容如下：
網路圖片的簡短記錄
網路圖片記錄 (由 1993 年的圖片元素開始)
主要效能問題
瞭解如何確保圖片要求盡可能較小且效能良好。
向量圖片
瞭解 SVG，這是網頁使用的向量圖片格式。
光柵圖片
探索光柵圖片，例如 JPEG、GIF、PNG 和 WebP。
圖片格式：GIF
瞭解 GIF 圖片格式，以及圖片編碼運作方式的說明。
圖片格式：PNG
瞭解 PNG 是如何選擇最適合的圖片格式。
圖片格式：JPEG
瞭解網路上最常用的圖片格式。
圖片格式：WebP
瞭解 WebP，以及這個格式和其他格式之間的差異。
圖片格式：AVIF
AV1 圖片檔案格式 (AVIF) 是一種以開放原始碼 AV1 影片轉碼器為基礎的編碼。
回應式圖片
深入瞭解回應式圖片。
描述性語法
使用 srcset 和大小，為瀏覽器提供圖片來源的相關資訊及使用方式。
描述性語法
瞭解相片元素。
自動壓縮及編碼
確保產生高成效的圖片來源是開發程序的一環。
網站產生器、架構和 CMS
歡迎瞭解 WordPress 等 CMS 和其他網站產生器如何協助您輕鬆使用回應式圖片。
圖片內容傳遞聯播網
瞭解圖片 CDN 如何轉換及最佳化圖片內容。
結語
一些其他資源。
準備好學習 Google 圖片了嗎？