JPG, PNG, WebP หรือ AVIF?

ก่อนเปรียบเทียบรูปแบบ รู้เรื่องแยกที่ขับเคลื่อนทั้งหมด รูปแบบ lossless เก็บทุกพิกเซลอย่างแน่นอนและสามารถเปิดและบันทึกใหม่ตลอดไปโดยไม่มีการเสื่อมค่า - PNG เป็นรูปแบบหลัก รูปแบบ lossy ทิ้งข้อมูลที่ตาไม่น่าสังเกต โดยแลกเปลี่ยนคุณภาพเล็กน้อยสำหรับไฟล์ที่เล็กกว่ามาก - JPG, WebP และ AVIF ทั้งหมดทำเช่นนี้ ไม่มีรูปแบบ "ดีที่สุด" เดียวเพราะตัวเลือกที่ถูกต้องขึ้นอยู่กับว่ารูปภาพของคุณเป็นรูปถ่าย โลโก้ หรือภาพหน้าจออย่างไร และคุณให้คุณค่าขนาดเทียบกับความเข้ากันได้เท่าใด

JPG (หรือ JPEG) เป็นผู้มีประสบการณ์ มันถูกสร้างมาสำหรับรูปถ่ายและใช้การบีบอัด lossy ปรับให้เข้ากับการไล่ระดับสีเรียบของรูปภาพในโลกแห่งความเป็นจริง มันไม่มีความโปร่งใสและการบีบอัดของมันสามารถทิ้งสิ่งประดิษฐ์รูปบล็อกรอบขอบคมและข้อความ ซึ่งเป็นเหตุผลว่าทำไมมันจึงผิดสำหรับโลโก้และภาพหน้าจอ พลังศักยภาพของมันคือการสนับสนุนสากล: ทุกอุปกรณ์ เครื่องมือแก้ไข และเว็บไซต์ยอมรับ JPG

PNG เป็นตัวเลือก lossless เก็บทุกพิกเซลและสนับสนุนความโปร่งใสอย่างเต็มที่ ทำให้เป็นมาตรฐานสำหรับกราฟิกที่มีขอบยาก ข้อความ ภาพหน้าจอ UI และสิ่งใดก็ตามที่มีพื้นหลังโปร่งใส ค่าใช้จ่ายคือขนาดไฟล์: รูปภาพ PNG มักจะใหญ่กว่ารูปภาพเดียวกันเป็น JPG หลายเท่า ดังนั้น PNG จึงเป็นตัวเลือกที่ไม่ดีสำหรับเนื้อหาทางภาพบนเว็บ

WebP จาก Google เป็นผลรวมสมัยใหม่ มันมีทั้งโหมด lossy และ lossless รวมถึงความโปร่งใสและภาพเคลื่อนไหว และที่คุณภาพที่คล้ายกันมันสร้างไฟล์ประมาณ 25-35% เล็กกว่า JPG และมักจะเล็กกว่า PNG มากมาย ปัจจุบันเบราว์เซอร์ทั้งหมดรองรับมัน ซึ่งทำให้มันเป็นค่าเริ่มต้นที่สมจริงสำหรับเว็บไซต์ที่เร็วในวันนี้

AVIF เป็นรูปแบบใหม่ที่สุดของทั้งสี่ โดยอิงจากเทคโนโลยี video-codec สมัยใหม่ โดยทั่วไปจะบรรลุไฟล์ที่เล็กที่สุดของทั้งหมด - บ่อยครั้งเอาชนะ WebP โดยส่วนเบี้ยวกว้างในรูปถ่าย - และรองรับความโปร่งใส สีกว้าง และช่วงไดนามิกสูง การรองรับปัจจุบันกว้างขวาง แต่ไม่ค่อยสากล ดังนั้นเว็บไซต์มักจะให้บริการ AVIF พร้อมการสำรอง WebP หรือ JPG สำหรับคลায់เอนต์เก่าสุดท้ายเล็กน้อย

หน้าเว็บที่ได้รับการปรับให้เหมาะสมอย่างดีไม่ค่อยใช้รูปแบบเดียวสำหรับทั้งหมด รูปถ่ายส่งออกเป็น WebP หรือ AVIF เพื่อความเร็ว พร้อมการสำรอง JPG โลโก้ ไอคอน และสิ่งใดก็ตามที่มีความโปร่งใสยังคงอยู่เป็น PNG - หรือดีกว่านั้น SVG หากเป็นศิลปะเวกเตอร์ - เพราะรูปแบบ lossy จะทำให้ขอบคมของพวกมันเบลอ ภาพหน้าจอของข้อความดูดีที่สุดเป็น PNG ด้วยเหตุผลเดียวกัน

หากคุณไม่แน่ใจว่าการสลับมีค่าหรือไม่ ให้แปลงรูปภาพตัวแทนเดียวและเปรียบเทียบทั้งขนาดไฟล์และลักษณะที่เต็มซูม การลดขนาดจาก JPG เป็น WebP หรือ AVIF มักจะเป็นอย่างมากโดยไม่สูญเสียคุณภาพเห็นได้ชัด ซึ่งเป็นผลชนะที่ทำให้หน้าโหลดเร็วขึ้น เมื่อความเข้ากันได้สำคัญมากกว่าไบต์ - ไฟล์แนบอีเมล ระบบเก่า ร้านพิมพ์ - ให้กลับไปที่ JPG หรือ PNG ซึ่งเป็นสองรูปแบบที่ทำงานได้ทุกที่