各種圖像格式

圖像和各種視覺元素通常在確定網站設計的影響力方面發揮著至關重要的作用。存在多種類型的圖像文件，每種類型都有其獨特的優點和缺點。在這裡，我們將深入研究光柵影像、GIF、PNG、JPEG、SVG 和 WebP。這些格式在網路上廣泛使用，您可以根據網站圖像的特定要求選擇性地選擇它們。

光柵影像

我們建議不要在網站上使用此檔案類型，因為缺乏壓縮支持，從而導致檔案大小明顯增大，從而阻礙頁面載入速度。

動圖

GIF（也稱為“JIF”）經常用於基本動畫。它們僅限於 256 種顏色，這使其成為較簡單圖形的合適選擇。 GIF 允許透明度，儘管沒有 Alpha 透明度支持，可能會導致半透明元素的顯示問題。

PNG

此格式非常適合需要透明度（尤其是 Alpha 透明度）的圖片。

PNG 格式有兩種變體：8 位元和 24 位元。 8 位元版本的顏色選項較少，透明度有限，而 24 位元版本則提供廣泛的顏色選擇和完整的 Alpha 透明度支援。雖然這兩個版本都可以在線上使用，但 24 位元 PNG 格式通常因其 Alpha 透明度而受到青睞。類似的工具 影像優化[↗] 和 圖片阿爾法[↗] 支援將 24 位元 PNG 檔案壓縮至 256 色，從而顯著減小檔案大小，同時保留透明度。

JPEG

JPEG 是一種非常流行的格式，以其可減少檔案大小的壓縮功能而聞名。考慮以 JPEG 格式儲存的影像，大小略高於 300 KB。

相較之下，相同解析度和尺寸的點陣圖格式影像可以超過 50 兆位元組，大約是 JPEG 格式的 150 倍。這是由於位圖存儲了每個像素的詳細信息，導致文件大小很大。保存點陣圖檔案相當於為每個像素儲存「灰階像素、灰階像素、灰階像素」等資料。

JPEG 壓縮可以在不犧牲影像品質的情況下顯著減少資料。這種省略重複像素資料的靈活性增強了 JPEG 作為通用格式的吸引力。

SVG

與具有固定像素尺寸的其他格式不同，SVG 或可縮放向量圖形依賴於向量圖形，這使得它們與解析度無關。

這些圖形可以無限縮放，效果極佳。通常，SVG 可應用於形狀、文字、草圖和標誌。

筆記： 對於包含真實像素的攝影影像，建議選擇其他格式。

重要的： 由於與 Gmail 等各種電子郵件用戶端不相容，SVG 不適合產品和變體圖像欄位以及電子商務電子郵件品牌標誌。

網頁格式

這 WebP 影像格式 保持影像質量，同時顯著減小檔案大小。事實證明，它對於圖像密集型網站或旨在節省儲存空間的網站非常有益。

WebP 有以下幾個優點，成為首選文件格式：

• 與 JPEG 或 PNG 相比，增強了壓縮，有助於更快的網站載入、更好的用戶保留並減少儲存使用
• 支援透明度和動畫
• 提供無損和有損壓縮選項

可以使用「資源」面板中的 Webflow 轉換工具將現有映像資源轉換為 WebP 檔案。

筆記： Webflow轉換工具僅提供有損壓縮。有關壓縮詳細信息，請參閱有關在 Webflow 中將圖像資源轉換為 WebP 檔案的指南.

WebP 影像的邊長限制為 16383 像素。雖然它們提高了網頁效能和儲存效率，但某些瀏覽器可能不支援這種格式。 檢查瀏覽器相容性以支援 WebP.