本課程專為初學者和進階網路開發人員打造,內容涵蓋各種基本知識,包括確保圖片來源以有效的要求及轉譯,以及從伺服器與用戶端進行通訊常見圖片格式的詳細資訊等。在本課程中,您將學到如何以最小的尺寸顯示相片,同時避免影響圖像品質。
您可以從頭開始瀏覽整個系列指南,全面瞭解圖片在新型網路中的運作方式。或者,您也可以參考本系列文章,瞭解日常工作中會用到的特定概念和標記模式。
如果您是網站開發新手,請查看「學習 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 圖片了嗎?