影像格式比較

已發表: 2024-01-16

了解各種可用的影像格式就像在雷區中導航一樣，並且很難了解在不同情況下使用哪種格式。 使用正確的圖像格式不僅對於提高品質很重要，而且如果您在線上使用圖像，您還希望確保它們快速加載，同時保持高品質。 例如，在網站新增圖片時，優化圖片以縮小檔案大小非常重要，以確保保留網站載入時間並改善使用者體驗。

以下是每種格式的詳細說明，以及何時最好使用它們。

光柵圖像文件

光柵影像由具有基於其解析度的定義比例的像素組成，每個像素具有定義的顏色、位置和比例。 這意味著當影像變大時，像素會拉伸以適應空間，導致它們變得扭曲、模糊和不清晰。 這意味著您無法在不影響解析度的情況下調整它們的大小，因為原始設計會被拉伸以填充額外的區域。

光柵影像格式包括 JPG/JPEG、PNG 和 GIF。

向量圖像文件

向量圖像由比例公式而不是像素組成，使用與總面積相比按比例縮放的直線和曲線系統。 這意味著此類影像可以調整大小而不會變形，因此可以保持其原始解析度。

標誌和品牌圖形通常會建立為向量，檔案類型包括 SVG、EPS、AI 和 PDF。

高分辨率和低分辨率

更高解析度的影像具有更高濃度的像素和點，意味著更好品質的影像。 相比之下，較低解析度的影像具有較低的像素密度和較低的質量，這意味著它們不適合大尺寸影像。

分辨率以 DPI 表示。 列印影像應為 300DPI，而網站顯示通常為 72DPI。

有損與無損

影像格式有時被稱為有損或無損，這可能會影響影像大小的調整方式。 有損涉及從影像中刪除數據，這意味著品質或像素化的降低。 無損壓縮不會降低影像的質量，而是會刪除不必要的元資料 - 儘管這有利於影像質量，但這意味著您不會看到檔案大小大幅減小。

影像格式比較

JPG/JPEG

JPEG（聯合影像專家小組）是最受歡迎的影像格式之一。 它允許您將大量細節壓縮到可共享檔案中 - 非常適合共享數位影像。 JPEG 與大多數影像處理器和瀏覽器相容，使其成為流行的選擇。

JPEG 使用有損壓縮，使影像盡可能小，以便快速載入。 這確實意味著，如果您嘗試使 JPEG 更大，則會拉伸像素，從而導致品質下降。 JPEG 影像不支援透明背景。

注意：JPG 和 JPEG 格式之間通常沒有區別，因為它們可以互換並且表示相同的影像格式。 它們具有不同版本名稱的原因是由於 Microsoft Windows 的早期版本。 與 JPEG 相比，術語 JPG 現在更常用。

主要特徵

  • 有損
  • 高解析度
  • 光柵
  • .jpg 或 .jpeg 副檔名

何時使用

  • 網站
  • 列印

巴布亞紐幾內亞

便攜式網路圖形是一種無損的光柵檔案類型 - 這意味著您可以編輯它們，而不會因為低解析度而損失品質。

其廣泛的調色板（支援 1600 萬種顏色！）、清晰的邊緣和透明背景的能力使它們非常適合圖像和文字。

然而，PNG 通常具有較大的檔案大小，這意味著它們會減慢您的網站速度。 因此，我們不建議在您的網站上使用 PNG，除非用於透明背景目的。

主要特徵

  • 光柵圖像文件
  • 無損
  • 透明背景
  • .png 副檔名

何時使用

  • 簡單的圖形
  • 標誌
  • 資訊圖表
  • 圖表
  • 橫幅

網路P

WebP 檔案可以減輕線上圖片的重量，減少檔案大小以幫助您的網站載入速度更快。 WebP 檔案由 Google 推出，可讓您以較小的檔案大小顯示高品質圖像。 他們還支援線上動畫。 此格式還支援無損和有損壓縮，這意味著您可以減小影像大小。 但是，需要注意的是，某些較舊的瀏覽器和圖像編輯器（例如較舊的 Internet Explorer）不支援 WebP 檔案。

我們建議您將網站上現有的 JPEG 和 PNG 文件替換為 WebP 文件，這將有助於減少載入時間，從而提供更好的使用者體驗，同時保持圖片品質。 您可以在 Ecograder 上測量各個 URL 以查看差異。

主要特徵

  • .webp 副檔名
  • 有損和無損

何時使用

  • 透明背景標誌
  • 網站圖片
  • 部落格

靜止無功發生器

可縮放向量圖形是網路友善的文件，通常用於在瀏覽器中顯示二維圖形。 SVG 圖像使用 XML 程式碼，這意味著它們將資訊儲存為文字而不是形狀 - 允許搜尋引擎將這些類型的圖形作為關鍵字讀取。 由於它們不依賴像素，因此您可以在不損失品質或解析度的情況下縮放影像。

SVG 格式最適合較小的文件，包括簡單的形狀和文本，例如徽標和圖示。

主要特徵

  • 向量
  • .svg 副檔名

何時使用

  • 標誌
  • 圖示
  • 簡單的插圖
  • 圖表

PDF

PDF（可攜式文件格式）可讓您建立和共用文檔，旨在協助您可靠地針對所有軟體和作業系統呈現和交換文件。

您可以在任何裝置上檢視和列印PDF文檔，並且佈局和格式將與原始文件保持一致。 您也可以使用 Adob​​e Acrobat 等工具來編輯、壓縮和合併 PDF。 您還可以在 PDF 中包含可點擊的鏈接，並且它們是可搜尋的 - 非常適合深度文章。

但是，PDF 不能直接包含在網站內容中，因為它們必須單獨開啟並作為單獨文件載入。 因此，它們仍然可以上傳到您的網站後端，但會在新分頁中開啟。 如果您的商標是 PDF 格式，則無需任何設計編輯軟體即可查看它。

主要特徵

  • 向量
  • .pdf 副檔名

何時使用

  • 文件
  • 報告
  • 雜誌封面
  • 傳單等傳統行銷
  • 較大印刷

動圖

Gif 圖像格式支援基本動畫，這意味著它們近年來在社交媒體上變得流行。

圖形交換格式檔案最多可形成 256 種 RGB 顏色，支援每像素最多 8 位元。 它們的檔案較小，這意味著它們適合互聯網。

使用 GIF 格式，您可以組合圖片或影格來實現基本的動畫。 然而，它們的顏色數量有限，這意味著它們不能包含高品質的圖像。

主要特徵

  • 光柵圖像文件
  • 動畫支援
  • 無損
  • .gif 副檔名

何時使用

  • 網頁圖形和徽標的動畫
  • 迷因

這就是我們的圖像格式指南。 如果您需要調整圖片大小的協助，我們建議使用 Figma。

因為您現有的徽標阻礙了您的業務進展，所以需要更多格式的徽標？ Ballyhoo 可以提供協助。 我們能夠從頭開始為您創建新的徽標和品牌標識，或者我們可以透過我們的品牌服務將您現有的徽標套件轉變為更廣泛的視覺標識。 請立即聯絡我們，以了解我們如何提供協助。