รูปภาพเป็นส่วนสำคัญของเว็บไซต์ เพราะช่วยอธิบายสินค้าและทำให้บทความน่าอ่าน แต่ภาพที่ใหญ่เกินจำเป็นก็เพิ่มเวลารอ โดยเฉพาะบนโทรศัพท์ที่สัญญาณไม่เสถียร WebP และ AVIF เป็นรูปแบบไฟล์ที่ช่วยบีบอัดภาพได้อย่างมีประสิทธิภาพ การเลือกใช้จึงควรมองทั้งคุณภาพ ขนาดไฟล์ และระบบที่ต้องรองรับ พร้อมทดสอบกับภาพจริงของเว็บไซต์ก่อนเปลี่ยนทั้งหมด
เริ่มจากขนาดภาพก่อนนามสกุล
ถ้าพื้นที่แสดงผลกว้างเพียง 800 พิกเซล การส่งภาพต้นฉบับกว้างหลายพันพิกเซลอาจสิ้นเปลืองโดยไม่ได้ช่วยให้ผู้ชมเห็นรายละเอียดเพิ่ม ควรสร้างภาพหลายขนาดให้เบราว์เซอร์เลือกตามหน้าจอและความหนาแน่นพิกเซล เก็บไฟล์ต้นฉบับไว้สำหรับแก้ไข แล้วสร้างไฟล์สำหรับเผยแพร่แยกต่างหาก ขั้นตอนนี้ช่วยได้แม้ยังใช้ JPEG อยู่ และทำให้การเปรียบเทียบรูปแบบใหม่เป็นธรรมกว่าเดิม
WebP และ AVIF แตกต่างกันอย่างไร
ทั้งสองรูปแบบรองรับภาพโปร่งใสและการบีบอัดแบบสมัยใหม่ WebP มีเครื่องมือและระบบจัดการเนื้อหารองรับแพร่หลาย ส่วน AVIF มักลดขนาดภาพถ่ายได้ดีที่คุณภาพใกล้เคียงกัน แต่ผลขึ้นกับภาพและการตั้งค่า ไม่ควรสรุปว่ารูปแบบหนึ่งเล็กกว่าเสมอ ภาพท้องฟ้า ผิวคน ลายผ้า และตัวอักษรเล็กตอบสนองต่อการบีบอัดต่างกัน จึงควรเลือกตัวอย่างหลายลักษณะมาทดลอง
ตั้งเกณฑ์ตรวจคุณภาพที่มองเห็นได้
เปรียบเทียบไฟล์ที่ความกว้างเดียวกัน และเปิดดูทั้งบนคอมพิวเตอร์กับโทรศัพท์ ตรวจขอบวัตถุ สีผิว พื้นหลังไล่ระดับ และรายละเอียดสินค้า อย่าเทียบเพียงค่าคุณภาพที่ตั้งเท่ากัน เพราะตัวเลขของแต่ละตัวเข้ารหัสไม่ได้มีความหมายเดียวกัน หากภาพเล็กลงแต่โลโก้เบลอหรือสีสินค้าเปลี่ยน การประหยัดข้อมูลอาจไม่คุ้มกับความน่าเชื่อถือที่เสียไป
จัดการภาพสำคัญกับภาพด้านล่างต่างกัน
ภาพหลักที่ผู้ใช้เห็นทันทีควรพร้อมแสดงโดยเร็ว ส่วนภาพที่ยังอยู่นอกหน้าจออาจโหลดเมื่อเลื่อนมาใกล้ ระบุความกว้างและความสูงเพื่อจองพื้นที่และลดหน้าเว็บกระโดด สำหรับเว็บไซต์ที่ต้องรองรับอุปกรณ์เก่า สามารถใช้แท็ก picture เลือก AVIF หรือ WebP พร้อมไฟล์สำรองที่เหมาะสม ทั้งนี้ควรตรวจว่าระบบแคชและ CDN ส่งชนิดไฟล์ถูกต้อง ไม่ใช่เพียงเปลี่ยนนามสกุล
คู่มือ รูปแบบภาพของ MDN อธิบายคุณสมบัติและข้อพิจารณาของไฟล์แต่ละชนิด ส่วนแนวทาง ปรับประสิทธิภาพภาพบนเว็บ ช่วยวางแผนขนาดและวิธีส่งภาพให้เหมาะกับการใช้งาน
ทดลองทีละหน้าแล้ววัดผล
เริ่มจากบทความหรือหน้าสินค้าที่มีผู้เข้าชมจริง บันทึกขนาดข้อมูลภาพและความเร็วภายใต้เครือข่ายใกล้เคียงกันก่อนและหลังเปลี่ยน ตรวจหน้าเว็บด้วยสายตา รวมถึงภาพบนรายการบทความและหน้าจอขนาดเล็ก ถ้าระบบสร้างภาพย่ออัตโนมัติ ให้ตรวจว่าทุกขนาดยังทำงาน การปรับภาพเป็นเพียงส่วนหนึ่งของประสิทธิภาพ เพราะสคริปต์ ฟอนต์ และเวลาตอบสนองของเซิร์ฟเวอร์ก็มีผลเช่นกัน
เจ้าของเว็บที่เพิ่งเริ่มจัดการระบบสามารถอ่าน พื้นฐาน WordPress ประกอบ แล้วกำหนดขั้นตอนอัปโหลดร่วมกันในทีม เช่น ตั้งชื่อไฟล์ให้สื่อความหมาย ใส่ข้อความทางเลือกตามภาพ และเก็บต้นฉบับอย่างเป็นระบบ เมื่อกระบวนการชัดเจน ภาพใหม่จะมีคุณภาพสม่ำเสมอโดยไม่ต้องย้อนแก้ทุกบทความภายหลัง
