WebP, JPG หรือ AVIF: เลือกฟอร์แมตรูปแบบไหนให้เว็บโหลดเร็วโดยภาพไม่แตก

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

PNG บีบอัดแบบไม่เสียรายละเอียด (lossless) และรองรับความโปร่งใส เหมาะกับโลโก้ ไอคอน และภาพหน้าจอที่มีตัวอักษรคม แต่ถ้าเอาไปเก็บภาพถ่ายจะได้ไฟล์ใหญ่กว่า JPG หลายเท่า

WebP ของ Google ให้ไฟล์เล็กกว่า JPG ราว 25–35% ที่คุณภาพเท่ากัน รองรับทั้งความโปร่งใสและภาพเคลื่อนไหว และเบราว์เซอร์หลักทุกตัวรองรับแล้ว จึงเป็นตัวเลือกมาตรฐานของงานเว็บทั่วไปในตอนนี้

AVIF ใหม่กว่า WebP อีกขั้น มักให้ไฟล์เล็กกว่า JPG ถึงครึ่งหนึ่งที่คุณภาพเท่ากัน แลกกับเวลาเข้ารหัสที่นานกว่า และเครื่องมือบางตัว (โปรแกรมแต่งภาพเก่า ระบบหลังบ้านบางระบบ) ยังเปิดไม่ได้

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

ตัวเลข "คุณภาพ" ของฟอร์แมต lossy ไม่ใช่เปอร์เซ็นต์ความคมชัด แต่เป็นระดับที่ยอมให้ตัดรายละเอียด ที่คุณภาพ 80 คนทั่วไปแทบแยกไม่ออกจากต้นฉบับ แต่ไฟล์เล็กลงมากแล้ว การดันขึ้นไป 95–100 ทำให้ไฟล์ใหญ่ขึ้นเป็นเท่าตัวโดยที่ตาไม่เห็นความต่าง

วิธีที่ใช้ได้จริง: เริ่มที่ 80 แล้วดูผลลัพธ์บนจอจริง ถ้าเป็นภาพที่มีไล่เฉดสีเรียบ ๆ เช่น ท้องฟ้าหรือพื้นหลังไล่สี อาจต้องขยับขึ้นเป็น 85 เพื่อกันแถบสี (banding) ถ้าเป็นภาพที่มีรายละเอียดเยอะอยู่แล้ว ลดลงถึง 70 ก็ยังดูดี

อีกทางที่ตรงกว่าคือกำหนดขนาดไฟล์เป้าหมายแทน เช่น ต้องการไม่เกิน 200 KB ต่อรูป แล้วให้เครื่องมือหาคุณภาพที่พอดีให้เอง เครื่องมือลดขนาดรูปของ Uppic มีโหมดนี้ และแสดงเปอร์เซ็นต์ที่ประหยัดได้ของแต่ละไฟล์ก่อนดาวน์โหลด

รูปจากกล้องมือถือกว้าง 4,000 พิกเซล แต่จุดที่แสดงบนเว็บกว้างแค่ 800 พิกเซล การบีบอัดอย่างเดียวจึงยังเหลือพิกเซลที่ไม่มีใครเห็นอีกหลายล้านจุด ย่อความกว้างให้ใกล้เคียงกับที่ใช้จริง (เผื่อจอความละเอียดสูงเป็นสองเท่า) มักลดขนาดไฟล์ได้มากกว่าการเปลี่ยนฟอร์แมตเสียอีก

1. 1ย่อความกว้างให้พอดีกับจุดที่ใช้ เผื่อจอ Retina สองเท่า
2. 2แปลงเป็น WebP ที่คุณภาพ 80 (หรือ AVIF ถ้าต้องการเล็กสุด)
3. 3เก็บโลโก้และไอคอนเป็น PNG หรือ SVG แยกต่างหาก
4. 4ถ้าต้องส่งไฟล์ให้คนอื่นใช้ต่อ ให้ฝากไว้ที่ลิงก์ตรงแทนการแนบไฟล์ เช่น ฝากรูปแล้วรับลิงก์ ที่ระบบเสิร์ฟผ่าน cache ระยะยาวให้เอง

ทำสี่ข้อนี้กับรูปทุกภาพก่อนขึ้นเว็บ น้ำหนักหน้าเว็บมักลดลงเกินครึ่งโดยที่คนอ่านไม่รู้สึกว่าอะไรเปลี่ยนไปเลย