ในโลกออนไลน์ รูปคือด่านแรกที่สร้างความน่าสนใจให้กับเว็บของเรา แต่ถ้ารูปสวยๆ พวกนั้นกลับทำให้เว็บเราหมุนติ้วๆ ลูกค้าอาจจะกดปิดเว็บตั้งแต่รูปยังไม่ทันขึ้นด้วยซ้ำ
รู้หรือไม่ จากสถิติของ HubSpot พบว่า 39% ของคนที่เข้าเว็บมาแล้วเจอรูปที่โหลดช้าจะเลิกใช้งานเว็บไซต์นั้นทันที
วันนี้เราจะมาดูวิธีที่ทำให้รูปในเว็บคุณชัด แต่ยังโหลดไว แถมถูกใจ Google อีกด้วยครับ
ทำไมรูปที่สวยถึงเป็นปัญหาให้ธุรกิจของคุณ
ก่อนอื่นเราต้องเข้าใจก่อนว่ารูปที่สวย คม และชัดมากๆ ขนาดเอาไปพรินต์บนป้ายโฆษณาได้เนี่ย จะมีขนาดไฟล์ใหญ่มาก ซึ่งบนเว็บไซต์ไม่มีความจำเป็นต้องใช้ความละเอียดสูงขนาดนั้น เพราะส่วนใหญ่คนจะเข้าชมผ่านมือถือ แท็บเล็ต หรือคอมพิวเตอร์ ซึ่งขนาดหน้าจอไม่ได้ใหญ่เท่าป้ายโฆษณาแน่นอน
พอไฟล์มีขนาดใหญ่เกินไป ก็จะส่งผลให้การโหลดรูปช้าลง ยิ่งอินเทอร์เน็ตของลูกค้าเป็น 3G หรือ 4G ยิ่งทำให้รอโหลดนานขึ้น ลองนึกภาพว่าร้านของเรา (Website) ตกแต่งหรูหรา ใช้เฟอร์นิเจอร์แพงๆ ดึงดูดลูกค้าสุดๆ แต่กลับมีเฟอร์นิเจอร์วางขวางประตูทางเข้า ทำให้ลูกค้าต้องต่อแถวยาวจนท้อและเปลี่ยนใจไปใช้บริการร้านอื่นแทน
3 ขั้นตอนทำรูปให้ชัดและโหลดเร็ว (Image Optimization)
-
ปรับขนาด (Resize) ให้พอดีหน้าจอ เราไม่จำเป็นต้องใช้รูปขนาด 4000px เพื่อมาแสดงในจอมือถือ เพราะมันเปลืองพื้นที่และทำให้เว็บโหลดช้า วิธีที่แนะนำคือปรับขนาดรูปให้เหมาะกับอุปกรณ์ที่ลูกค้าใช้บ่อยที่สุด โดยขนาดที่แนะนำจะอยู่ที่ 1200px - 1500px ก็เพียงพอสำหรับการแสดงผลที่คมชัดแล้วครับ
-
บีบอัดไฟล์ (Compress) ลดขนาดโดยไม่เสียความคมชัด การบีบอัดไฟล์รูปภาพคือการจัดเรียงข้อมูลใหม่ให้ไฟล์เล็กลง โดยที่ตาคนเรายังมองเห็นว่ารูปยังชัดอยู่เหมือนเดิม เป็นการตัดข้อมูลส่วนเกินที่ตาเราแยกไม่ออกทิ้งไป ทำให้โหลดได้ไวขึ้นมาก
-
เลือกใช้นามสกุลไฟล์ยุคใหม่ (WebP) นอกจากการบีบอัดแล้ว การเลือกนามสกุลไฟล์ก็สำคัญมาก แนะนำให้ใช้ WebP แทน JPG หรือ PNG เพราะ WebP สามารถทำให้ไฟล์เล็กลงได้ถึง 30% ในขณะที่คุณภาพรูปยังสวยเหมือนเดิม
Checklist ก่อนอัปโหลดรูป ตรวจให้ชัวร์ก่อนดีต่อ SEO
เพื่อให้รูปภาพของคุณส่งผลดีต่อทั้งอันดับ Google และประสบการณ์ลูกค้า ควรเช็กตามนี้ครับ:
- ปรับขนาด (Resize) และบีบอัดไฟล์รูปภาพเสมอ
- เปลี่ยนนามสกุลไฟล์เป็น WebP
- คุมขนาดไฟล์ไม่ให้เกิน 100 - 200KB ต่อรูป
- ความกว้างรูปไม่เกิน 1200px - 1500px
- ถ้ารูปนั้นมีแต่ข้อความ ให้ใช้เป็นข้อความ (Text) บนเว็บแทนการใช้รูปภาพ
- ตั้งชื่อไฟล์เป็นภาษาอังกฤษ และใช้ Keyword ที่สื่อถึงรูป (ช่วย SEO ได้มาก)
- ใส่ Alt Text อธิบายรูปภาพสั้นๆ เพื่อให้ Google เข้าใจเนื้อหารูป
สถิติที่น่าสนใจ ความเร็วของเว็บส่งผลต่อยอดขาย
จากผลการศึกษาของ Portent พบว่า เว็บไซต์ที่โหลดเสร็จภายใน 0-2 วินาที จะมี Conversion Rate สูงที่สุด และในทุกๆ 1 วินาทีที่โหลดช้าลง จะทำให้โอกาสในการขายลดลงเฉลี่ยถึง 4.42% เลยทีเดียว
เครื่องมือแนะนำ Squoosh.app (ใช้ฟรีและดีมาก)
เราแนะนำให้ทุกคนใช้ Squoosh จัดการเรื่องรูป เพราะใช้งานง่ายมาก ปรับขนาด บีบอัด และเปลี่ยนนามสกุลไฟล์ได้ในที่เดียว ที่สำคัญคือเป็นเครื่องมือฟรีจาก Google ครับ
ข้อดี:
- ใช้งานง่ายมาก เป็นมิตรกับมือใหม่
- ปรับขนาด บีบอัด และเปลี่ยนนามสกุลเป็น WebP ได้ทันที
- ไม่ต้องติดตั้งโปรแกรม แค่เปิดเบราว์เซอร์ก็ใช้ได้เลย
- มีแถบเปรียบเทียบรูป Before/After ให้เห็นความชัดเจน
ข้อเสีย:
- จัดการรูปได้ทีละ 1 รูปเท่านั้น
- ต้องใช้งานผ่านอินเทอร์เน็ต
สรุป
การจัดการรูปบนเว็บไม่ใช่เรื่องเทคนิคที่ยุ่งยากจนเกินไปครับ แรกๆ อาจจะดูเสียเวลาเพิ่มนิดหน่อย แต่ถ้าทำจนเป็นนิสัย ผลลัพธ์ที่ได้คือลูกค้าจะแฮปปี้กับเว็บที่โหลดไว และส่งผลให้ธุรกิจของคุณเติบโตได้อย่างยั่งยืนแน่นอน
หากคุณต้องการผู้เชี่ยวชาญช่วยปรับปรุงความเร็วเว็บไซต์ ทั้งการจัดการรูปภาพและเทคนิคเชิงลึกอื่นๆ เพื่อให้เว็บโหลดแรงและติดอันดับ SEO สามารถติดต่อทีมงาน FastWebPro เพื่อขอรับคำปรึกษาได้เลยครับ