คู่มือฉบับสมบูรณ์เกี่ยวกับรูปแบบรูปภาพสำหรับเว็บ — PNG, JPEG, WebP, AVIF
คู่มือฉบับสมบูรณ์เกี่ยวกับรูปแบบรูปภาพสำหรับเว็บ
การเลือกรูปแบบรูปภาพที่เหมาะสมเป็นหนึ่งในการตัดสินใจที่เรียบง่ายแต่มีผลกระทบสูงที่สุดที่คุณสามารถทำได้สำหรับประสิทธิภาพของเว็บไซต์ แต่ละรูปแบบสร้างสมดุลระหว่างขนาดไฟล์ คุณภาพการมองเห็น การรองรับฟีเจอร์ และความเข้ากันได้กับเบราว์เซอร์ที่แตกต่างกัน คู่มือนี้อธิบายรูปแบบรูปภาพเว็บหลักสี่รูปแบบเพื่อให้คุณตัดสินใจได้อย่างมีข้อมูลสำหรับทุกรูปภาพที่คุณเผยแพร่
JPEG: ม้าลากรถสากล
JPEG ย่อมาจาก Joint Photographic Experts Group เป็นรูปแบบรูปภาพเว็บที่โดดเด่นมากว่าสามทศวรรษ มันใช้การบีบอัดแบบสูญเสียเพื่อให้ได้ขนาดไฟล์ที่เล็กโดยการทิ้งข้อมูลสีที่ดวงตามนุษย์แทบไม่รับรู้
จุดแข็ง:
- การรองรับเบราว์เซอร์สากลในทุกอุปกรณ์และเบราว์เซอร์ที่เคยสร้างมา
- การบีบอัดที่ยอดเยี่ยมสำหรับเนื้อหาภาพถ่ายที่มีการไล่ระดับสีราบรื่น
- คุณภาพที่ปรับได้ตั้งแต่ 0 ถึง 100 ให้การควบคุมขนาดไฟล์อย่างละเอียด
- การเร่งการถอดรหัสด้วยฮาร์ดแวร์ที่มีในแทบทุกอุปกรณ์
จุดอ่อน:
- ไม่รองรับความโปร่งใส JPEG ไม่สามารถแสดงรูปภาพที่มีพื้นหลังโปร่งใสได้
- การบีบอัดแบบสูญเสียทำให้เกิดสิ่งผิดปกติที่มองเห็นได้ที่การตั้งค่าคุณภาพต่ำ โดยเฉพาะความเป็นบล็อกรอบขอบและแถบสีในการไล่ระดับสี
- ประสิทธิภาพไม่ดีกับรูปภาพที่มีข้อความคมชัด สีทึบ หรือขอบแข็ง
กรณีการใช้งานที่ดีที่สุด: ภาพถ่าย ภาพประกอบที่ซับซ้อนที่มีหลายสี รูปภาพสินค้า แบนเนอร์ฮีโร่ และรูปภาพใดๆ ที่ความเข้ากันได้สากลเป็นสิ่งจำเป็น
PNG: ความแม่นยำและความโปร่งใส
PNG หรือ Portable Network Graphics ถูกสร้างขึ้นเป็นทางเลือกฟรีและเปิดแทน GIF มันใช้การบีบอัดแบบไม่สูญเสีย หมายความว่าทุกพิกเซลถูกสร้างซ้ำอย่างตรงตามที่ปรากฏในต้นฉบับ
จุดแข็ง:
- การบีบอัดแบบไม่สูญเสียรับประกันการเสื่อมคุณภาพเป็นศูนย์ แม้หลังจากการบันทึกซ้ำหลายครั้ง
- การรองรับความโปร่งใสแบบอัลฟาเต็มรูปแบบทำให้ขอบราบรื่นและพื้นหลังที่มองทะลุได้
- การบีบอัดที่ยอดเยี่ยมสำหรับรูปภาพที่มีพื้นที่สีสม่ำเสมอขนาดใหญ่ เช่น ภาพหน้าจอและกราฟิกสีเรียบ
- รองรับสี 24 บิต (16.7 ล้านสี) และสีอินเด็กซ์ 8 บิต (256 สี) สำหรับขนาดไฟล์ที่เล็กลง
จุดอ่อน:
- ขนาดไฟล์ใหญ่กว่า JPEG อย่างมีนัยสำคัญสำหรับเนื้อหาภาพถ่าย — มักใหญ่กว่าสองถึงห้าเท่า
- ไม่รองรับภาพเคลื่อนไหวในตัว สำหรับเนื้อหาที่เคลื่อนไหว ให้ใช้ GIF หรือ WebP แทน
- ภาพถ่ายจากกล้องและโทรศัพท์ที่บันทึกเป็น PNG สิ้นเปลืองแบนด์วิดท์อย่างมาก
กรณีการใช้งานที่ดีที่สุด: โลโก้ ไอคอน ภาพหน้าจอ แบบจำลอง UI รูปภาพที่มีข้อความ กราฟิกที่ต้องการความโปร่งใส และสถานการณ์ใดๆ ที่การสร้างซ้ำแบบพิกเซลสมบูรณ์ไม่สามารถต่อรองได้
WebP: ผู้เล่นรอบด้านสมัยใหม่
WebP เป็นรูปแบบรูปภาพสมัยใหม่ที่พัฒนาโดย Google มันถูกออกแบบมาเพื่อแทนที่ JPEG, PNG และ GIF ด้วยรูปแบบเดียวที่จัดการกรณีการใช้งานหลักทั้งหมดได้อย่างมีประสิทธิภาพมากขึ้น
จุดแข็ง:
- รองรับทั้งการบีบอัดแบบสูญเสียและไม่สูญเสียในรูปแบบเดียว
- WebP แบบสูญเสียมักเล็กกว่า JPEG 25 ถึง 35 เปอร์เซ็นต์ที่คุณภาพการมองเห็นเทียบเท่า
- WebP แบบไม่สูญเสียเล็กกว่า PNG 20 ถึง 25 เปอร์เซ็นต์
- รองรับความโปร่งใสแบบอัลฟาในทั้งโหมดสูญเสียและไม่สูญเสีย
- รองรับภาพเคลื่อนไหว ทำให้เป็นตัวแทนที่โดยตรงของ GIF ด้วยขนาดไฟล์ที่เล็กกว่ามาก
- การรองรับเบราว์เซอร์ที่กว้าง: Chrome, Firefox, Edge และ Safari 14 ขึ้นไป
จุดอ่อน:
- เบราว์เซอร์รุ่นเก่ารวมถึง Internet Explorer และ Safari 13 และก่อนหน้าไม่รองรับ WebP
- ความเร็วในการเข้ารหัสช้ากว่า JPEG แม้ว่าความเร็วในการถอดรหัสจะเทียบเท่า
- เครื่องมือแก้ไขรูปภาพบางตัวไม่รองรับ WebP โดยตรง
กรณีการใช้งานที่ดีที่สุด: รูปภาพเว็บที่ขนาดไฟล์เป็นลำดับความสำคัญ เว็บแอปพลิเคชันสมัยใหม่ การแทนที่ JPEG และ PNG ด้วยรูปแบบเดียวสำหรับเบราว์เซอร์ที่รองรับ
AVIF: รุ่นถัดไป
AVIF (AV1 Image File Format) เป็นผู้เข้าแข่งขันใหม่ล่าสุด สร้างบนตัวแปลงรหัสวิดีโอ AV1 มันมีประสิทธิภาพการบีบอัดที่ดีที่สุดในบรรดารูปแบบรูปภาพที่รองรับอย่างกว้างขวาง
จุดแข็ง:
- เล็กกว่า JPEG สูงสุด 50 เปอร์เซ็นต์ที่คุณภาพการมองเห็นเดียวกัน
- เล็กกว่า WebP สูงสุด 30 เปอร์เซ็นต์
- รองรับการบีบอัดแบบสูญเสียและไม่สูญเสีย
- ความโปร่งใสเต็มรูปแบบและการรองรับ HDR พร้อมขอบเขตสีที่กว้าง
- ปลอดค่าลิขสิทธิ์และมาตรฐานเปิด
จุดอ่อน:
- การรองรับเบราว์เซอร์ยังคงเติบโต Chrome และ Firefox รองรับ AVIF; Safari เพิ่มการรองรับในเวอร์ชัน 16
- การเข้ารหัสมีค่าใช้จ่ายในการคำนวณสูง ทำให้บีบอัดช้ากว่า JPEG หรือ WebP
- การรองรับที่จำกัดในเครื่องมือแก้ไขและออกแบบรูปภาพ
- ไม่เหมาะสำหรับสถานการณ์การเข้ารหัสแบบเรียลไทม์หรือปริมาณสูงโดยไม่มีฮาร์ดแวร์เฉพาะ
กรณีการใช้งานที่ดีที่สุด: โปรเจกต์เว็บล้ำสมัยที่กำหนดเป้าหมายเบราว์เซอร์สมัยใหม่ สถานการณ์ที่ต้องการการบีบอัดสูงสุด เนื้อหา HDR และการส่งมอบรูปภาพขนาดใหญ่ที่ยอมรับเวลาในการเข้ารหัสได้
การเปรียบเทียบรูปแบบแบบเทียบเคียง
| ฟีเจอร์ | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | ประเภทการบีบอัด | แบบสูญเสีย | แบบไม่สูญเสีย | แบบสูญเสียและไม่สูญเสีย | แบบสูญเสียและไม่สูญเสีย | | ความโปร่งใส | ไม่ | ใช่ (อัลฟา) | ใช่ (อัลฟา) | ใช่ (อัลฟา) | | ภาพเคลื่อนไหว | ไม่ | ไม่ | ใช่ | ใช่ | | รองรับ HDR | ไม่ | ไม่ | ไม่ | ใช่ | | สี 24 บิต | ใช่ | ใช่ | ใช่ | ใช่ | | ขนาดไฟล์สัมพัทธ์ | พื้นฐาน | 200-500% ของ JPEG | 65-80% ของ JPEG | 50-70% ของ JPEG | | การรองรับเบราว์เซอร์ | สากล | สากล | 95%+ ของผู้ใช้ | 85%+ ของผู้ใช้ | | ความเร็วในการเข้ารหัส | เร็ว | ปานกลาง | ปานกลาง | ช้า |
วิธีเลือกรูปแบบ
ใช้แผนผังการตัดสินใจนี้สำหรับทุกรูปภาพที่คุณเผยแพร่:
- เป็นภาพถ่ายที่ไม่ต้องการความโปร่งใสหรือไม่? ใช้ JPEG หรือ AVIF เพื่อการบีบอัดสูงสุด
- ต้องการความโปร่งใสหรือมีข้อความและขอบคมหรือไม่? ใช้ PNG เพื่อการรองรับสากลหรือ WebP สำหรับเบราว์เซอร์สมัยใหม่
- ต้องการภาพเคลื่อนไหวหรือไม่? ใช้ WebP แทน GIF สำหรับไฟล์ที่เล็กกว่าอย่างมีนัยสำคัญ
- การบีบอัดสูงสุดสัมบูรณ์คือเป้าหมายหรือไม่? ใช้ AVIF หากผู้ชมของคุณใช้เบราว์เซอร์สมัยใหม่
บีบอัดรูปภาพของคุณในรูปแบบต้นฉบับ
เมื่อคุณเลือกรูปแบบที่เหมาะสมสำหรับกรณีการใช้งานของคุณแล้ว ให้เพิ่มประสิทธิภาพขนาดไฟล์โดยไม่แปลงเป็นรูปแบบอื่น เครื่องบีบอัดรูปภาพออนไลน์ฟรีของเรารองรับ PNG, JPEG, WebP และ AVIF — อัปโหลดรูปภาพของคุณและดาวน์โหลดเวอร์ชันที่บีบอัดแล้วที่คงรูปแบบต้นฉบับไว้ ไม่มีห่วงโซ่การแปลงที่ทำลายคุณภาพ ไม่มีขั้นตอนที่ไม่จำเป็น