รูปแบบไฟล์ภาพ: เปรียบเทียบ WebP, PNG, JPG และ SVG
การเลือกรูปแบบไฟล์ภาพผิดอาจทำให้หน้าเว็บโหลดช้าลงหรือทำให้กราฟิกของคุณเบลอ นี่คือการเปรียบเทียบรูปแบบเว็บสมัยใหม่ในด้านการบีบอัด ความโปร่งใส และความคมชัด
ไฟล์จะถูกประมวลผลในเครื่องผ่านเบราว์เซอร์ด้วย WebAssembly และ HTML5 APIs ไฟล์จะไม่ออกจากอุปกรณ์ จึงไม่มีการอัปโหลดขึ้นเซิร์ฟเวอร์หรือจัดเก็บไฟล์กับบุคคลที่สาม
เริ่มแปลงไฟล์บนอุปกรณ์ของคุณได้ทันที ไม่ต้องรออัปโหลด ไม่ต้องรอคิวดาวน์โหลด และไม่ถูกจำกัดความเร็วจากเซิร์ฟเวอร์ภายนอก
ใช้เครื่องมือทั้งหมดได้โดยไม่ต้องสร้างบัญชีหรือซื้อแพ็กเกจ และไม่มีการตั้งเพดานขนาดไฟล์โดยพลการ แปลงไฟล์ได้ตามที่เบราว์เซอร์และอุปกรณ์ของคุณรองรับ
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
| รูปแบบผลลัพธ์ | ประเภท 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 | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | เอกสารขนาดใหญ่ของ Adobe Photoshop |
| 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 |
| TGA Truevision | image/x-tga | TGA-SPEC | ไฟล์ราสเตอร์ขั้นสูงของ Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
| PDF ไฟล์ | application/pdf | ISO-32000-2 | รูปแบบเอกสารพกพา |
ข้อกำหนดทางเทคนิคและรายละเอียดตัวแปลงสัญญาณ
กฎการตัดสินใจเลือกรูปแบบไฟล์อย่างรวดเร็ว
WebP และ AVIF อาจลดขนาดภาพเว็บได้ และทั้งคู่รองรับความโปร่งใส แต่ผลลัพธ์ขึ้นอยู่กับภาพและการตั้งค่าการเข้ารหัส ใช้ JPG กับภาพถ่ายที่ยอมรับร่องรอยการบีบอัดเล็กน้อยได้ ใช้ PNG กับภาพหน้าจอและกราฟิกคมชัด และใช้ SVG กับโลโก้และไอคอนที่ปรับขนาดได้
แรสเตอร์เทียบกับเวกเตอร์: เหตุใด SVG จึงไม่เคยเบลอ
ภาพแรสเตอร์ (JPG, PNG, WebP) เป็นตารางพิกเซลสีที่มีจำนวนคงที่ เมื่อซูมเข้าใกล้เกินไป ภาพจะเบลอหรือแตกเป็นพิกเซล ส่วน SVG เก็บคำอธิบายเส้น รูปร่าง และสีด้วยสมการทางคณิตศาสตร์ จึงแสดงไอคอนและภาพประกอบได้คมชัดตั้งแต่หน้าจอมือถือไปจนถึงจอ 8K โดยใช้ไฟล์ขนาดเล็ก
ความเชื่อผิดๆ: 'DPI ที่สูงขึ้นหมายถึงคุณภาพภาพบนเว็บที่ดีขึ้น'
DPI (จุดต่อนิ้ว) เป็นเพียงคำสั่งสำหรับการพิมพ์ทางกายภาพเท่านั้นและถูกเพิกเฉยโดยสมบูรณ์จากเว็บเบราว์เซอร์ บนโทรศัพท์และจอภาพคอมพิวเตอร์ ความคมชัดของภาพถูกกำหนดโดยขนาดพิกเซลทั้งหมด (เช่น 1920x1080) และความหนาแน่นของการแสดงผล ไม่ใช่ข้อมูลเมตา DPI ที่ฝังอยู่
อัลฟาความโปร่งใส: PNG เทียบกับ WebP
JPEG ไม่มีช่องความโปร่งใส ดังนั้นพิกเซลโปร่งใสจะกลายเป็นพื้นหลังทึบเมื่อบันทึกเป็น JPEG PNG เก็บความโปร่งใส alpha ได้ ส่วน WebP ก็เก็บความโปร่งใสได้และอาจได้ไฟล์เล็กกว่า ควรเปรียบเทียบภาพเพราะขนาดขึ้นอยู่กับเนื้อหาและการเข้ารหัส
อัปโหลด 0 ไบต์ไปยังเซิร์ฟเวอร์ภายนอก การประมวลผลทั้งหมดเกิดขึ้นภายในแซนด์บ็อกซ์ของเบราว์เซอร์ของคุณ