วิธีตั้งค่า MIME Types ใน DirectAdmin

MIME Type (Multipurpose Internet Mail Extensions) คือการระบุประเภทของไฟล์ที่เซิร์ฟเวอร์ส่งให้เบราว์เซอร์ เช่น บอกว่าไฟล์นี้คือ image/jpeg หรือ text/css

MIME Types พื้นฐานที่ควรรู้จัก

ก่อนจะตั้งค่า MIME Types ใน DirectAdmin ควรทำความเข้าใจโครงสร้างพื้นฐานของ MIME Type ก่อน MIME Type มีรูปแบบ ประเภท/ชนิดย่อย เช่น image/jpeg หรือ application/json โดยแบ่งเป็นกลุ่มหลักดังนี้

กลุ่ม text — ไฟล์ข้อความ

ใช้สำหรับไฟล์ที่มีเนื้อหาเป็นข้อความที่มนุษย์อ่านออก เบราว์เซอร์จะแสดงผลเนื้อหาตรงๆ โดยไม่ดาวน์โหลด MIME Types ในกลุ่มนี้ที่พบบ่อย ได้แก่ text/html สำหรับไฟล์ HTML, text/css สำหรับ CSS Stylesheet, text/javascript สำหรับ JavaScript และ text/plain สำหรับไฟล์ข้อความทั่วไป

กลุ่ม image — ไฟล์รูปภาพ

ใช้กำหนดรูปแบบของไฟล์รูปภาพ ตัวอย่างที่สำคัญได้แก่ image/jpeg สำหรับรูป JPEG, image/png สำหรับ PNG, image/webp สำหรับ WebP และ image/svg+xml สำหรับ SVG รูปเวกเตอร์ หากเซิร์ฟเวอร์ไม่รู้จัก MIME Type ของรูปแบบใหม่ เบราว์เซอร์จะไม่แสดงรูปหรืออาจบังคับดาวน์โหลดแทน

กลุ่ม application — ไฟล์แอปพลิเคชัน

ใช้กับไฟล์ข้อมูลที่ต้องการโปรแกรมพิเศษในการประมวลผล เช่น application/json สำหรับข้อมูล JSON, application/pdf สำหรับ PDF, application/zip สำหรับไฟล์บีบอัด, application/wasm สำหรับ WebAssembly และ application/octet-stream ซึ่งเป็นค่า default ที่เซิร์ฟเวอร์ใช้เมื่อไม่รู้จักไฟล์ประเภทนั้น — ส่งผลให้เบราว์เซอร์บังคับดาวน์โหลดเสมอ

กลุ่ม audio และ video — ไฟล์มีเดีย

ใช้กับไฟล์เสียงและวิดีโอ เช่น audio/mpeg สำหรับ MP3, audio/ogg สำหรับ OGG Audio, video/mp4 สำหรับ MP4, video/webm สำหรับ WebM และ video/ogg สำหรับ OGG Video การกำหนด MIME Type ที่ถูกต้องทำให้แท็ก <video> และ <audio> ใน HTML ทำงานได้โดยไม่ต้องดาวน์โหลดก่อน

กลุ่ม font — ไฟล์ฟอนต์เว็บ

ฟอนต์เว็บมี MIME Type เฉพาะ ได้แก่ font/woff สำหรับ WOFF, font/woff2 สำหรับ WOFF2 (ประหยัดขนาดกว่าและเร็วกว่า) และ font/ttf สำหรับ TrueType Font หากไม่กำหนด MIME Type ที่ถูกต้อง ฟอนต์ที่ host เองอาจไม่โหลดหรือเบราว์เซอร์บล็อกเนื่องจากข้อกำหนด CORS ของฟอนต์

วิธีเพิ่ม MIME Type

1. ล็อกอิน DirectAdmin แล้วไปที่ Advanced Features
2. คลิก MIME Types
3. คลิก Add MIME Type
4. กรอก MIME Type เช่น image/webp
5. กรอก Extension เช่น webp
6. คลิก Add

การเพิ่ม Custom MIME Type สำหรับไฟล์พิเศษ

นอกจาก MIME Types มาตรฐานที่เซิร์ฟเวอร์รองรับอยู่แล้ว ยังมีไฟล์รูปแบบใหม่ที่ต้องเพิ่มเองเพื่อให้เว็บไซต์ทำงานได้อย่างถูกต้อง โดยเฉพาะเซิร์ฟเวอร์ที่ยังใช้ Apache เวอร์ชันเก่า

ไฟล์ .wasm — WebAssembly

WebAssembly คือรูปแบบ bytecode ที่ช่วยให้โปรแกรมทำงานในเบราว์เซอร์ได้ด้วยความเร็วใกล้เคียง native MIME Type ที่ถูกต้องคือ application/wasm และ Extension คือ wasm หากไม่กำหนด เบราว์เซอร์จะปฏิเสธการโหลดไฟล์ .wasm เพราะถือว่าไม่ปลอดภัย ไฟล์นี้ใช้บ่อยใน โปรแกรม Web, เกมที่รันบนเบราว์เซอร์ และแอปพลิเคชัน AI/ML ที่รันฝั่ง client

ไฟล์ .webmanifest — Web App Manifest

ไฟล์ Web App Manifest ใช้กำหนดลักษณะของ Progressive Web App (PWA) เช่น ชื่อแอป ไอคอน และ Theme Color MIME Type ที่ถูกต้องคือ application/manifest+json และ Extension คือ webmanifest หากไม่มี MIME Type นี้ เบราว์เซอร์จะไม่รู้จักไฟล์ manifest ทำให้ปุ่ม "Add to Home Screen" ไม่ปรากฏบนมือถือ

ไฟล์ .avif — AVIF Image

AVIF (AV1 Image File Format) คือรูปแบบรูปภาพรุ่นใหม่ที่บีบอัดได้ดีกว่า WebP อีกถึง 20-50% MIME Type คือ image/avif และ Extension คือ avif เซิร์ฟเวอร์ Apache เก่าส่วนใหญ่ยังไม่รองรับ AVIF จึงต้องเพิ่มเองเสมอ เมื่อกำหนดถูกต้องแล้ว เบราว์เซอร์ที่รองรับ (Chrome, Firefox, Safari ล่าสุด) จะแสดงภาพ AVIF แทน JPEG/PNG ได้ทันที

ไฟล์ .webmanifest และ .ico

ไฟล์ Favicon .ico บางเซิร์ฟเวอร์ส่ง MIME Type ผิดเป็น text/plain ทำให้เบราว์เซอร์ไม่แสดง icon หากเกิดปัญหานี้ ให้เพิ่ม MIME Type: image/x-icon, Extension: ico ใน DirectAdmin หรือผ่าน .htaccess ด้วยคำสั่ง AddType image/x-icon .ico

MIME Types ที่มักเพิ่มเติม

• image/webp → .webp (รูปภาพ WebP)
• video/webm → .webm (วีดีโอ WebM)
• font/woff2 → .woff2 (ฟอนต์ Web)
• application/json → .json (JSON ไฟล์)
• application/wasm → .wasm (WebAssembly)

ความสัมพันธ์ระหว่าง MIME Type กับ Content-Type HTTP Header

เมื่อเบราว์เซอร์ร้องขอไฟล์จากเซิร์ฟเวอร์ เซิร์ฟเวอร์จะตอบกลับด้วย HTTP Response ที่มี Header หลายตัว หนึ่งในนั้นคือ Content-Type ซึ่งมีค่าเป็น MIME Type ของไฟล์นั้น เช่น

• Content-Type: text/html; charset=UTF-8 — บอกว่าเป็นหน้า HTML และใช้ encoding UTF-8
• Content-Type: image/webp — บอกว่าเป็นรูป WebP
• Content-Type: font/woff2 — บอกว่าเป็น Web Font WOFF2
• Content-Type: application/json — บอกว่าเป็นข้อมูล JSON

ค่า Content-Type ที่เซิร์ฟเวอร์ส่งมานั้นมาจาก MIME Type ที่กำหนดไว้ในระบบ ดังนั้นเมื่อเราเพิ่ม MIME Type ใน DirectAdmin ก็เท่ากับบอกให้ Apache ส่ง Content-Type ที่ถูกต้องในทุก Response ที่เกี่ยวกับนามสกุลไฟล์นั้น

ตรวจสอบ Content-Type ที่เซิร์ฟเวอร์ส่ง

สามารถตรวจสอบได้ผ่าน Browser Developer Tools: กด F12 เลือกแท็บ Network แล้วคลิกไฟล์ที่ต้องการตรวจสอบ จะเห็น Response Header ที่มี content-type แสดงอยู่ ถ้าเห็น application/octet-stream แทน MIME Type ที่ถูกต้อง หมายความว่าเซิร์ฟเวอร์ยังไม่รู้จักนามสกุลไฟล์นั้น ต้องเพิ่มใน DirectAdmin หรือ .htaccess

ความแตกต่างระหว่าง AddType ใน .htaccess กับการตั้งค่าใน DirectAdmin

การเพิ่ม MIME Type ผ่าน DirectAdmin จะมีผลกับทุกโดเมนในบัญชีนั้น ขณะที่การใส่ AddType ใน .htaccess มีผลเฉพาะในไดเรกทอรีนั้นและโฟลเดอร์ย่อยเท่านั้น หากต้องการให้มีผลทั่วทั้งเว็บไซต์ควรเพิ่มที่ .htaccess รากของโดเมน (public_html) หรือกำหนดผ่าน DirectAdmin ซึ่งง่ายกว่าและไม่ต้องแก้ไขไฟล์ด้วยตนเอง

การแก้ปัญหาเมื่อเบราว์เซอร์แสดงไฟล์ผิดประเภท

ปัญหาที่พบบ่อยคือเบราว์เซอร์ดาวน์โหลดไฟล์แทนที่จะแสดงผล หรือแสดงไฟล์เป็นข้อความดิบแทนที่จะ render อย่างถูกต้อง ปัญหาเหล่านี้มักเกิดจาก MIME Type ที่ผิดหรือขาดหายไป

สาเหตุและวิธีแก้

• เบราว์เซอร์ดาวน์โหลด .webp แทนที่จะแสดงรูป — เพิ่ม MIME Type: image/webp, Extension: webp ใน DirectAdmin
• ฟอนต์ .woff2 ไม่โหลด / แสดง fallback font — เพิ่ม font/woff2, Extension: woff2 และตรวจสอบว่า CORS header อนุญาตโดเมนของเว็บด้วย
• ไฟล์ .json ถูกดาวน์โหลดแทนที่จะถูก parse โดย JavaScript — เพิ่ม application/json, Extension: json
• ไฟล์ .svg แสดงเป็นข้อความ XML แทนรูป — เพิ่ม image/svg+xml, Extension: svg
• ไฟล์ .wasm ไม่โหลดและ Console แสดง error "MIME type not supported" — เพิ่ม application/wasm, Extension: wasm

ขั้นตอนการแก้ปัญหาทีละขั้น

1. เปิด Developer Tools (F12) ไปที่แท็บ Network
2. โหลดหน้าเว็บใหม่และคลิกไฟล์ที่มีปัญหา
3. ดู Response Header ที่ content-type ว่าค่าเป็นอะไร
4. ถ้าเป็น application/octet-stream หรือค่าผิด → เพิ่ม MIME Type ใน DirectAdmin หรือ .htaccess
5. หลังเพิ่มแล้ว Hard Refresh ด้วย Ctrl+Shift+R (หรือ Cmd+Shift+R บน Mac) เพื่อล้าง Cache
6. ตรวจสอบ Response Header ใหม่ว่า content-type เปลี่ยนเป็นค่าที่ถูกต้องแล้ว

ข้อควรระวังเรื่อง Browser Cache

หลังจากแก้ไข MIME Type แล้ว เบราว์เซอร์อาจยังคงใช้ไฟล์ที่ Cache ไว้เวอร์ชันเก่าอยู่ ทำให้ดูเหมือนยังมีปัญหาแม้แก้แล้ว ให้ทำ Hard Refresh (Ctrl+Shift+R บน Windows หรือ Cmd+Shift+R บน Mac) หรือเปิดหน้าต่าง Incognito เพื่อทดสอบ ถ้ายังไม่แก้ให้ลองเคลียร์ Cache ทั้งหมดของเบราว์เซอร์ หรือทดสอบด้วยเครื่องมืออย่าง curl -I https://yourdomain.com/file.webp เพื่อดู Header ที่เซิร์ฟเวอร์ส่งจริงๆ โดยตรงโดยไม่ผ่าน Cache ของเบราว์เซอร์

กรณีพิเศษ: MIME Type กับ CORS ของฟอนต์เว็บ

ฟอนต์เว็บที่ Host เองมีข้อกำหนดพิเศษกว่าไฟล์ประเภทอื่น นอกจาก MIME Type ที่ถูกต้องแล้ว เบราว์เซอร์ยังตรวจสอบ CORS Header ด้วย ถ้าเว็บโหลดฟอนต์จากโดเมนอื่น (เช่น CDN) เซิร์ฟเวอร์ต้นทางต้องส่ง Header Access-Control-Allow-Origin: * หรือระบุโดเมนที่อนุญาต ถ้าขาด Header นี้เบราว์เซอร์จะบล็อกฟอนต์แม้ว่า MIME Type จะถูกต้องแล้วก็ตาม สามารถเพิ่ม CORS Header สำหรับฟอนต์ใน .htaccess ได้ด้วยคำสั่ง <FilesMatch "\.(woff|woff2|ttf|eot)$"> ตามด้วย Header set Access-Control-Allow-Origin "*"