รูปภาพเป็นองค์ประกอบสำคัญที่สุดของเว็บไซต์ที่ดี ดึงดูดความสนใจผู้เยี่ยมชม ทำให้เนื้อหาแชร์ได้ง่าย และบังคับให้ผู้ใช้กระทำ (เช่นซื้อสินค้า)
อย่างไรก็ตาม การเพิ่มรูปความละเอียดสูง หรือขนาดไฟล์ใหญ่ อาจทำให้เว็บช้าและประสบการณ์ผู้ใช้แย่ ไม่มีข้ออ้างให้ส่งมอบประสบการณ์แย่เมื่อมีเครื่องมือเยอะมากช่วยบีบอัดรูปโดยไม่สูญเสียคุณภาพที่สังเกตเห็น และแม้แต่อัตโนมัติ
ในบทความนี้จะแสดงวิธีเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ โดยเฉพาะ WordPress หลายวิธี
เลือกไฟล์ฟอร์แมตที่ถูกต้อง
JPEG และ PNG เป็นไฟล์ฟอร์แมตรูปภาพยอดนิยม 2 แบบบนเว็บ JPEG เป็นฟอร์แมตบีบอัดใช้สำหรับรูปถ่ายที่มีสีหลายสี ส่วน PNG เหมาะสำหรับรูปที่มีข้อความ, ภาพประกอบ, โลโก้, สกรีนชอต และรูปโปร่งใส อีกฟอร์แมตทั่วไปคือ GIF เหมาะสำหรับรูปที่มีสีน้อย หรือพื้นที่สีเดียวกันมาก ใช้ GIF สำหรับรูปเคลื่อนไหวบนเว็บเป็นหลัก
ซอฟต์แวร์แก้ไขรูปส่วนใหญ่ให้บันทึกไฟล์ในหลายฟอร์แมต การเลือกฟอร์แมตที่ถูกต้องจะทำให้ได้รูปคมที่สุด ซึ่งควรเพิ่มประสบการณ์ผู้ใช้บนเว็บไซต์
ใช้ขนาดและความละเอียดที่เหมาะสม
ต้องระวังเมื่อเพิ่มรูปภาพลงเว็บ แนวทางปฏิบัติที่ดีคือ บันทึกรูปภาพที่ความกว้างและความสูงเดียวกับที่จะแสดงบนเว็บ และขนาดไฟล์เล็กที่สุดเท่าที่จะเป็นไปได้โดยไม่สูญเสียคุณภาพ
บีบอัดรูปภาพก่อนอัปโหลด
มีเครื่องมือมากช่วยบีบอัดรูปก่อนอัปโหลดขึ้นเซิร์ฟเวอร์ Photoshop เช่น มีฟีเจอร์ "Save for Web & devices" ให้เลือกฟอร์แมตและคุณภาพ คุณจะเห็นขนาดไฟล์เมื่อใช้การตั้งค่านั้น เครื่องมือจัดการรูปอื่นๆ เช่น GIMP มีตัวเลือกคล้ายกัน
เครื่องมือบีบอัดออนไลน์ก็มี เช่น Picresize, Kraken.io และ TinyPNG ที่อัปโหลดรูปความละเอียดสูง เพิ่มประสิทธิภาพ และดาวน์โหลดรูปที่บีบอัดแล้วเพื่อใช้บนเว็บ
บีบอัดรูปภาพหลังอัปโหลด
มีปลั๊กอินหลายตัวสำหรับเรื่องนี้ หนึ่งในยอดนิยมคือ WP Smush ช่วยเพิ่มประสิทธิภาพ JPEG, PNG หรือ GIF แบบรายตัวหรือแบบกลุ่ม ใช้เซิร์ฟเวอร์เฉพาะ ตัดเมตาดาต้าและสีที่ไม่ได้ใช้ออก เพื่อลดขนาดไฟล์ เวอร์ชันฟรีจำกัดรูป 1MB ลงไป แต่อัปเกรด Pro ได้ถึง 5MB
ปลั๊กอินอีกตัวที่ดีคือ EWWW Image Optimizer ช่วยแปลงรูปให้เป็นฟอร์แมตที่ให้ขนาดไฟล์เล็กที่สุด
ยังมีอีกบนที่เก็บ WordPress ลองสำรวจดู สองตัวนี้ข้าพเจ้ามีประสบการณ์ใช้ ทั้งคู่ทำงานดี ควรพอสำหรับคุณด้วย
ติดแท็ก (Tag) รูปภาพอย่างถูกต้อง
นอกจากปรับขนาดรูป วิธีดีให้ประสบการณ์ดีบนเว็บคือ ติดแท็กรูปภาพถูกต้อง หมายถึง ใช้แอตทริบิวต์ "alt" เสมอ หากรูปโหลดไม่ได้ หรือสำหรับ Screen Readers เพื่อให้ผู้เยี่ยมชมได้คำอธิบายรูปเป็นข้อความ ช่วยให้เครื่องมือค้นหาจัดทำดัชนีรูปภาพดีกว่า และอาจดึงトラฟฟิกค้นหามามาก
เพิ่ม Caption (คำบรรยาย) ที่จำเป็นเป็นอีกวิธีช่วยผู้เยี่ยมชมเข้าใจรูปดีขึ้น การตั้ง Title tags ที่อธิบายได้ และชื่อไฟล์รูปภาพช่วยในทางเดียวกัน แทนที่จะบันทึกรูปเป็น "FXSCSUYE.jpg" ใช้ชื่อและไตเติลที่อธิบายได้พร้อมคีย์เวิร์ดเกี่ยวข้องกับหัวข้อและเว็บ นี่ยังดีจากมุม SEO
Lazy Loading (โหลดขี้เกียจ)
Lazy Loading เป็นเทคนิคที่เว็บหลายแห่งใช้ประหยัดแบนด์วิธ โดยโหลดรูปเฉพาะเมื่อผู้ใช้เลื่อนไปถึงเฟรมมุมมองของรูป รูปไม่กี่ตัวแรกจะโหลดทันที แต่อื่นๆ รอจนผู้ใช้อยู่ใกล้รูปถึงจะโหลด การเพิ่มฟีเจอร์นี้จะประหยัดแบนด์วิธให้คุณและผู้ใช้ และเพิ่มความเร็วหน้าเว็บ BJ Lazy Load เป็นปลั๊กอินดีสำหรับเพิ่ม Lazy Loading ให้ WordPress
ใช้ Content Delivery Network (CDN)
การใช้ CDN จะลดโหลดบนเซิร์ฟเวอร์ของคุณอย่างมาก และเพิ่มประสิทธิภาพเว็บ CDN จะส่งทรัพยากรจากเซิร์ฟเวอร์ที่ใกล้ที่สุดกับตำแหน่งผู้ใช้ที่ร้องขอ เช่น ผู้เยี่ยมชมจาก Beijing ขอรูป และ CDN ที่คุณใช้มีเซิร์ฟเวอร์ใน Seoul และ Sydney รูปจะส่งจากเซิร์ฟเวอร์ใน Seoul
MaxCDN เป็น CDN ที่ได้คะแนนดี มีอีก CloudFlare, CDN.net และอื่นๆ
สรุป
การเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บเป็นหนึ่งในวิธีใหญ่ที่สุดปรับปรุงเวลาโหลดหน้าและประสบการณ์ผู้ใช้โดยรวม หากมีเทคนิคเพิ่มประสิทธิภาพอื่นๆ ที่อยากแชร์ โปรดทำในความคิดเห็นด้านล่าง
