歡迎使用學習圖片功能!

本課程專為初學者和進階網路開發人員打造,內容涵蓋各種基本知識,包括確保圖片來源以有效的要求及轉譯,以及從伺服器與用戶端進行通訊常見圖片格式的詳細資訊等。在本課程中,您將學到如何以最小的尺寸顯示相片,同時避免影響圖像品質。

您可以從頭開始瀏覽整個系列指南,全面瞭解圖片在新型網路中的運作方式。或者,您也可以參考本系列文章,瞭解日常工作中會用到的特定概念和標記模式。

如果您是網站開發新手,請查看「學習 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 圖片了嗎?