คู่มือฉบับสมบูรณ์เกี่ยวกับรูปแบบรูปภาพสำหรับเว็บ — 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 — อัปโหลดรูปภาพของคุณและดาวน์โหลดเวอร์ชันที่บีบอัดแล้วที่คงรูปแบบต้นฉบับไว้ ไม่มีห่วงโซ่การแปลงที่ทำลายคุณภาพ ไม่มีขั้นตอนที่ไม่จำเป็น