什麼是 MIME 類型，如果我上傳了 webp 或 svg 檔案，卻無法顯示在網站上，該怎麼做？

什麼是 MIME 類型？

MIME 類型（Multipurpose Internet Mail Extensions）是一種標準，用於標示文件的性質與格式。在網頁開發中，MIME 類型告訴瀏覽器如何處理接收到的檔案。當伺服器傳送檔案給瀏覽器時，會在 HTTP 標頭中包含 Content-Type 欄位，這個欄位的值就是 MIME 類型。

例如：

HTML 文件：text/html
JPEG 圖片：image/jpeg
PNG 圖片：image/png
CSS 樣式表：text/css

如果 MIME 類型設定不正確，瀏覽器可能無法正確解析檔案，導致圖片無法顯示、檔案被下載而非預覽等問題。

為什麼 WebP 和 SVG 無法顯示？

當您上傳 WebP 或 SVG 格式的圖片到網站後無法顯示，通常是以下幾個原因：

1. 伺服器未設定正確的 MIME 類型

許多舊版伺服器或預設設定中，沒有包含 WebP 或 SVG 的 MIME 類型映射。當伺服器不知道如何處理這些副檔名時，可能會：

傳送錯誤的 Content-Type（例如 application/octet-stream）
完全不回應請求
強制下載檔案而非顯示

2. 瀏覽器相容性問題

雖然現代瀏覽器都支援 WebP 和 SVG，但某些舊版本瀏覽器可能不支援：

WebP：Chrome 32+、Firefox 65+、Safari 14+、Edge 18+
SVG：所有現代瀏覽器皆支援（IE9+）

3. 檔案上傳時的驗證限制

某些 CMS 或上傳元件會限制允許的副檔名和 MIME 類型，如果 WebP 或 SVG 不在白名單中，上傳可能會失敗或被拒絕。

如何檢查 MIME 類型設定？

方法一：使用瀏覽器開發者工具

按 F12 開啟開發者工具
切換到 Network（網路） 分頁
重新整理頁面
點擊無法顯示的圖片請求
查看 Response Headers（回應標頭） 中的 Content-Type 值

正確的 MIME 類型應該是：

WebP：image/webp
SVG：image/svg+xml

方法二：使用 curl 命令檢查

curl -I https://your-site.com/images/photo.webp

查看輸出中的 Content-Type 欄位。

方法三：檢查伺服器設定

根據您使用的伺服器類型，檢查相應的設定檔。

解決方案：伺服器端設定

Apache 伺服器

在 .htaccess 或 httpd.conf 中加入：

# WebP MIME Type
AddType image/webp .webp

# SVG MIME Type
AddType image/svg+xml .svg
AddType image/svg+xml .svgz

Nginx 伺服器

在 nginx.conf 的 http 區塊中加入：

types {
    image/webp webp;
    image/svg+xml svg svgz;
}

或在 mime.types 檔案中加入：

image/webp                                    webp;
image/svg+xml                                 svg svgz;

IIS 伺服器

在 web.config 中加入：

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".webp" />
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

Node.js (Express)

安裝 mime-types 套件並設定：

const express = require("express");
const mime = require("mime-types");
const app = express();

// 自訂 MIME 類型
mime.define({
  "image/webp": ["webp"],
  "image/svg+xml": ["svg", "svgz"]
});

app.use(express.static("public"));

.NET (ASP.NET Core)

在 Startup.cs 或 Program.cs 中加入：

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".webp"] = "image/webp";
provider.Mappings[".svg"] = "image/svg+xml";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

常見 MIME 類型對照表

檔案格式	副檔名	MIME 類型
JPEG	.jpg, .jpeg	image/jpeg
PNG	.png	image/png
GIF	.gif	image/gif
WebP	.webp	image/webp
SVG	.svg, .svgz	image/svg+xml
BMP	.bmp	image/bmp
TIFF	.tif, .tiff	image/tiff
HTML	.html, .htm	text/html
CSS	.css	text/css
JavaScript	.js	application/javascript
JSON	.json	application/json
PDF	.pdf	application/pdf
XML	.xml	application/xml
ZIP	.zip	application/zip

總結

MIME 類型是網頁伺服器和瀏覽器之間溝通的重要標準。當您遇到 WebP 或 SVG 圖片無法顯示的問題時，請依照以下步驟排除：

✅ 檢查瀏覽器開發者工具，確認 Content-Type 是否正確
✅ 確認伺服器設定，加入對應的 MIME 類型映射
✅ 清除瀏覽器快取，避免舊的錯誤回應被快取
✅ 測試不同瀏覽器，確認是否為相容性問題

正確設定 MIME 類型後，您的 WebP 和 SVG 圖片應該就能正常顯示在網站上了。如果您使用的是托管服務或 CMS 平台，可能需要聯絡服務提供商協助設定。

目錄