ย่อและบีบอัดรูปลงเว็บ: เทียบมิติ ขนาดไฟล์ และคุณภาพทีละขั้น
ทดลองย่อรูป 1600 × 1200 เป็น 800 × 600 เทียบ JPEG กับ WebP และตรวจผลก่อนแทนไฟล์ต้นฉบับ
ไฟล์รูปที่เล็กลงจะมีประโยชน์ก็ต่อเมื่อยังใช้งานได้ตามต้องการ ตัวอักษรบนสินค้าต้องอ่านออก โลโก้อาจต้องโปร่งใส และภาพที่แสดงขนาดใหญ่อาจต้องใช้พิกเซลมากกว่ารูปย่อ บทความนี้แยกการลดมิติออกจากการปรับคุณภาพ เพื่อให้ตรวจได้ว่าแต่ละขั้นเปลี่ยนอะไร
เตรียมต้นฉบับและเป้าหมายที่วัดได้
ใช้รูปถ่ายที่ไม่มีข้อมูลลับขนาด 1600 × 1200 หรือจดมิติจริงของรูปที่คุณมี เก็บต้นฉบับแยกไว้ ตัวอย่างนี้สมมติพื้นที่แสดงผล 800 × 600 พิกเซล แต่หน้าจอความหนาแน่นสูงอาจต้องการรูปกว้างกว่านั้น จึงควรเลือกเป้าหมายจากหน้าที่ใช้งานจริง ไม่ถือว่า 800 พิกเซลเหมาะกับทุกรูป
จดทั้งมิติและขนาดไฟล์ก่อนเริ่ม อย่ากำหนดล่วงหน้าว่าต้องลดได้กี่เปอร์เซ็นต์ เพราะผลขึ้นกับรายละเอียดภาพ รูปแบบไฟล์ และการบีบอัดที่ต้นฉบับผ่านมาก่อนแล้ว
1. ย่อรูปโดยรักษาสัดส่วน
เปิด Image Resizer เลือกรูป เปิดล็อกสัดส่วน และตั้งความกว้าง 800 หากต้นฉบับเป็น 1600 × 1200 ความสูงควรเปลี่ยนเป็น 600 เพราะย่อเหลือครึ่งหนึ่ง ดาวน์โหลดแล้วตรวจมิติจากข้อมูลไฟล์อีกครั้ง
หากภาพยืด ให้ตรวจว่าปลดล็อกสัดส่วนหรือไม่ หากภาพเบลอ ให้เทียบขนาดไฟล์กับขนาดที่แสดงบนหน้าจอ การขยายรูปเล็กไม่ได้สร้างรายละเอียดที่ต้นฉบับไม่เคยมี
2. เทียบรูปแบบด้วยต้นทางเดียวกัน
เปิด Image Compressor ทดลอง JPEG คุณภาพ 80 แล้วกลับมาใช้รูปที่ย่อไว้รูปเดิม ทดลอง WebP คุณภาพ 80 ตัวเลขนี้เป็นจุดเริ่มต้น ไม่ได้หมายความว่า encoder สองแบบให้คุณภาพทางสายตาเท่ากัน
เทียบขนาดไบต์จริงแล้วซูมดูตัวอักษร เส้นขอบ ใบหน้า และพื้นที่ไล่สี เลือกไฟล์เล็กกว่าก็ต่อเมื่อภาพยังผ่านความต้องการของงาน รูปที่ปรับมาดีแล้วอาจใหญ่ขึ้นหลังเข้ารหัสใหม่ได้ และไม่ควรนำไฟล์บีบอัดแบบสูญเสียรอบก่อนมาบีบอัดซ้ำหลายครั้ง
3. ตรวจความโปร่งใสแยกจากขนาดไฟล์
JPEG ไม่รองรับพิกเซลโปร่งใส สำหรับโลโก้หรือไอคอนให้ลอง PNG และ WebP ใน Image Converter แล้ววางบนพื้นหลังสว่างและมืดเพื่อตรวจขอบ รูปถ่าย โลโก้โปร่งใส และภาพข้อความคมชัดมีเงื่อนไขต่างกัน จึงไม่มีรูปแบบเดียวที่เหมาะกับทุกงาน
การส่งออกผ่าน canvas อาจเปลี่ยนหรือละ metadata หากต้องการข้อมูลกล้องหรือคุณสมบัติต้นฉบับ ให้เก็บไฟล์เดิมไว้ ขั้นตอนนี้ตรวจภาพและมิติ ไม่ได้ยืนยันการเก็บข้อมูลครบแบบงานจดหมายเหตุ
4. ตรวจบนหน้าเว็บจริง
แทนรูปทีละรูปแล้วเปิดด้วยมือถือและคอม ตรวจความคมชัด การครอป และข้อความอธิบายรูป หากควบคุม HTML ได้ ให้ระบุ width/height หรืออัตราส่วนเพื่อจองพื้นที่ขณะโหลด การเตรียมรูปหลายขนาดช่วยรองรับพื้นที่แสดงผลที่ต่างกันได้
จดผลเปรียบเทียบสั้น ๆ ได้แก่ มิติและไบต์ต้นฉบับ มิติและไบต์หลังย่อ รูปแบบที่เลือก ค่าคุณภาพ และตำหนิที่เห็น วิธีนี้ทำให้ตัดสินใจจากผลของไฟล์จริง โดยไม่ต้องรับประกันเปอร์เซ็นต์ที่ลดได้หรืออ้างว่าการย่อรูปครั้งเดียวทำให้อันดับค้นหาดีขึ้นแน่นอน