光柵圖片可以視為一組以像素為單位的指示，用於顯示 2D 格線。常見的光柵圖片格式包括 GIF (.gif)、JPEG (.jpg)、PNG (.png) 和 WebP (.webp)。每種圖片格式的壓縮和編碼方式都各不相同，導致檔案大小出現極大差異：以 JPEG 編碼的相片圖片可能只有幾百 KB，而從 PNG 編碼的相同圖片則可能數 MB，且無法辨別使用者的品質差異。
如果光柵圖片來源超出本質上的尺寸，就會顯示變形、塊狀或模糊：
如果圖片含有真實世界的細節，光柵圖片會是最適合工作的工具。
就像選擇光柵圖片或向量圖片一樣，選擇適當的光柵圖片類型最終是決定的。當我們將光柵圖片細分為編碼時，我們當下在討論的是描述圖片內容的方法和使用的壓縮方法 (或是缺少這些圖片)。提醒您，伺服器不會將「圖片」透過線傳送到瀏覽器，而是描述構成該圖片供用戶端重組的像素格線位元組串流。
因此，為了清楚呈現將像素格線編碼為位元組串流資料的程序，請思考您是使用網路瀏覽器。你有一張毫米圖形紙，以及一個特定的品牌名蠟筆。我就像網路伺服器一樣，其用途完全相同，但是我已經用蠟筆將來源圖片填入圖紙。如果我想傳送純文字訊息給您，就無法傳送圖片給您，但可以用我們都瞭解的語言，以「像素」方格和顏色共同的標準來傳達圖片來源的資訊：
從左上角開始。第 1 列是藍色的第 1 欄。第 1 列是藍色的第 2 欄。第 1 列，第 3 欄是藍色。第 1 列，4 欄是紅色。
透過這些文字資訊，您將可以完美重建我在紙張工作表上的圖片。
圖片格式的差異和編碼方式，因為資料的格式可能有些微差異。舉例來說，我傳送給你的資訊會以下列格式呈現：
從左上角開始。第 1 列，第 1 欄到第 3 欄是藍色。第 1 列，4 欄是紅色。
任一則說明都會產生同一張圖片，但第二張說明會描述的字元數較少。這種方法是壓縮圖片資料的「低失真」方法，也就是所有相同資訊，因此不會減少視覺擬真度，但從伺服器到轉譯引擎的傳輸資料傳輸量較少。這是圖片資料中等同「執行長度編碼」的純語言，其中資料會編碼為重複的值與計數，而非重複完整值。
相反地，失真壓縮，聽起來可能像表面數值並不簡單，為什麼您希望圖片看起來更差？ 不過，這不是真的，而且值得謹記在心，我們的眼睛也無法達到完美的擬真度。選擇正確的圖片壓縮格式和設定，是瞭解我們能察覺的視覺詳細程度與傳送至瀏覽器的資料量之間的平衡。這兩項因素都取決於來源圖片的內容。
光柵圖片格式是開發人員最熟悉的圖片格式，包括 GIF、JPEG、PNG、WebP 等。在接下來的幾個單元中，您將瞭解各項功能的功能。