รูปแบบไฟล์ภาพ: เปรียบเทียบ WebP, PNG, JPG และ SVG
การเลือกรูปแบบไฟล์ภาพผิดอาจทำให้หน้าเว็บโหลดช้าลงหรือทำให้กราฟิกของคุณเบลอ นี่คือการเปรียบเทียบรูปแบบเว็บสมัยใหม่ในด้านการบีบอัด ความโปร่งใส และความคมชัด
ไฟล์ของคุณได้รับการประมวลผลทั้งหมดภายในเว็บเบราว์เซอร์ของคุณโดยใช้ HTML5 Canvas และ WebAssembly ไม่มีข้อมูลใดออกจากอุปกรณ์ของคุณเลย
ข้ามคิวการอัปโหลดและดาวน์โหลด การแปลงไฟล์เกิดขึ้นในเครื่องด้วยความเร็วสูงสุดของฮาร์ดแวร์โดยไม่มีข้อจำกัดจากเซิร์ฟเวอร์
สอดคล้องตามข้อกำหนดอย่างเป็นทางการของ ISO, W3C และ IETF เพื่อรับประกันความเข้ากันได้ของผลลัพธ์ในระบบปฏิบัติการสมัยใหม่
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
| รูปแบบผลลัพธ์ | ประเภท MIME | ข้อกำหนด | ประเภท |
|---|---|---|---|
| PNG รูปภาพ | image/png | W3C-PNG | กราฟิกเครือข่ายแบบพกพา |
| JPG รูปภาพ JPEG | image/jpeg | ITU-T-T81-JPEG | รูปภาพมาตรฐาน Joint Photographic Experts Group |
| WebP รูปภาพ | image/webp | RFC-6386-VP8 | รูปแบบรูปภาพสมัยใหม่ WebP จาก Google |
| SVG เวกเตอร์ | image/svg+xml | W3C-SVG | กราฟิกเวกเตอร์ที่ปรับขนาดได้ |
| HEIC ภาพถ่าย | image/heic | ISO-IEC-23008-12-HEIF | คอนเทนเนอร์รูปภาพประสิทธิภาพสูง |
| AVIF รูปภาพ | image/avif | AOMEDIA-AV1-AVIF | รูปแบบไฟล์รูปภาพ AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | JPEG File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | ไฟล์ราสเตอร์ขั้นสูงของ Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
ข้อมูลทางเทคนิคและรายละเอียดตัวแปลงสัญญาณ (Codec)
กฎการตัดสินใจเลือกรูปแบบไฟล์อย่างรวดเร็ว
ใช้ WebP หรือ AVIF สำหรับเว็บไซต์สมัยใหม่ (มีขนาดเล็กกว่า JPEG 30% พร้อมรองรับความโปร่งใส) ใช้ JPG สำหรับภาพถ่ายที่สิ่งประดิษฐ์จากการบีบอัดขนาดเล็กที่มองไม่เห็นนั้นไม่มีผล ใช้ PNG สำหรับภาพหน้าจอ กราฟิกส่วนติดต่อผู้ใช้ และภาพประกอบที่ต้องการข้อความที่คมชัดระดับพิกเซล ใช้ SVG สำหรับโลโก้และไอคอนที่ต้องการการปรับขนาดแบบไม่มีที่สิ้นสุด
แรสเตอร์เทียบกับเวกเตอร์: เหตุใด SVG จึงไม่เคยเบลอ
ภาพแรสเตอร์ (JPG, PNG, WebP) คือตารางของพิกเซลสีคงที่ หากซูมเข้าใกล้เกินไปภาพจะเบลอหรือแตกเป็นพิกเซล SVG คือคณิตศาสตร์บริสุทธิ์: โดยจัดเก็บเส้นโค้ง เส้นตรง และสีทางคณิตศาสตร์ ช่วยให้ไอคอนและภาพประกอบแสดงผลได้อย่างคมชัดบนทุกอุปกรณ์ตั้งแต่หน้าจอมือถือไปจนถึงจอแสดงผล 8K ด้วยขนาดไฟล์ที่เล็กจิ๋ว
ความเชื่อผิดๆ: 'DPI ที่สูงขึ้นหมายถึงคุณภาพภาพบนเว็บที่ดีขึ้น'
DPI (จุดต่อนิ้ว) เป็นเพียงคำสั่งสำหรับการพิมพ์ทางกายภาพเท่านั้นและถูกเพิกเฉยโดยสมบูรณ์จากเว็บเบราว์เซอร์ บนโทรศัพท์และจอภาพคอมพิวเตอร์ ความคมชัดของภาพถูกกำหนดโดยขนาดพิกเซลทั้งหมด (เช่น 1920x1080) และความหนาแน่นของการแสดงผล ไม่ใช่เมทาเดตาสถานะ DPI ที่ฝังอยู่
อัลฟาความโปร่งใส: PNG เทียบกับ WebP
JPG แบบดั้งเดิมไม่รองรับความโปร่งใสเลย โดยพื้นหลังโปร่งใสจะกลายเป็นสีขาวทึบหรือสีดำ PNG เป็นผู้บุกเบิกความโปร่งใสแบบอัลฟา 8 บิตที่สะอาดตา แต่ปัจจุบัน WebP สามารถส่งมอบคุณภาพความโปร่งใสที่เหมือนกันด้วยขนาดไฟล์ที่เล็กกว่าสูงสุดถึง 40%
อัปโหลด 0 ไบต์ไปยังเซิร์ฟเวอร์ภายนอก การประมวลผลทั้งหมดเกิดขึ้นภายในแซนด์บ็อกซ์ของเบราว์เซอร์ของคุณ