เทคนิคเว็บโหลดเร็ว ด้วยการลดขนาดรูปทั้งเว็บง่ายๆ

หน้าเว็บโหลดช้าคือปัญหาใหญ่ของเว็บไซต์เลยก็ว่าได้ เพราะหากช้าเกินไปเพียงเสี้ยววินาที ก็อาจส่งผลให้ผู้ที่มาเข้าชมเว็บไซต์ไม่รอให้เว็บไซต์โหลดจนเสร็จและปิดเว็บไปในทันที ในขณะเดียวกันอาจไปหาข้อมูลเดียวกันจากเว็บอื่นแทน สำหรับปัญหาที่ทำให้เว็บไซต์โหลดช้านั้นมีหลายปัจจัยและไฟล์รูปก็เป็นหนึ่งในนั้นด้วย 

จากการสำรวจของเว็บไซต์ HTTP Archive ได้ทำการเก็บสถิติเว็บไซต์ทั่วโลกในปี 2012 หน้าเว็บไซต์ 1000 อันดับแรกมีขนาดเฉลี่ยเพียง 800 kb แต่ในปีนี้เพิ่มขึ้นเป็น 1250 kb แล้ว โดยในหน้าเว็บขนาด 1250 kb เป็นไฟล์รูปถึง 650kb ซึ่งคิดเป็นกว่า 60% ของหน้าเว็บทั้งหมด (ที่เหลือคือ Javascript, Flash, CSS และอื่น ๆ) เพราะฉะนั้นการใช้รูปในเว็บไซต์เราต้องมีการคิดให้ดี เลือกประเภทรูปให้เหมาะสม และใช้เครื่องมือช่วยบีบอัด

การเลือกนามสกุลไฟล์รูปสำคัญมากในงาน Graphic Design ซึ่งสายสิ่งพิมพ์อาจไม่สำคัญเท่าไหร่นัก เพราะว่ารูปเล็กหรือใหญ่ก็ส่งผ่าน CD อยู่แล้ว แต่ในงาน Web Design การเลือกนามสกุลไฟล์รูปนั้นสำคัญมาก

สำหรับไฟล์รูปภาพที่ใช้กันในเว็บไซต์มีหลักๆ ดังนี้
ไฟล์รูปภาพ PNG
- แบ่งเป็น PNG-8 (แสดงผลได้ 256 สี) กับ PNG-24 (แสดงผลได้ 16 ล้านสี)
- ถ้าสีน้อย ขนาดไฟล์จะเล็ก ถ้าสีเยอะ ขนาดไฟล์จะใหญ่ (มาก)
- ตัดพื้นหลังใส หรือสีกึ่งใสได้
- เหมาะกับไฟล์รูปพวก Logo, Vector Art, Illustration ที่สีไม่เยอะมาก และรูปไม่ใหญ่มาก
- เหมาะกับไฟล์รูปที่ต้องมีการตัดพื้นหลังใส หรือกึ่งใส ที่ต้องการความคมชัด (PNG24 คุณภาพรูปจะดีมาก แต่ไฟล์หนักมากเช่นกัน)

ไฟล์รูปภาพ JPG / JPEG
- แสดงผลได้ 16 ล้านสี
- รูปสีเยอะไฟล์จะเล็กกว่า PNG ประมาณ 5-10 เท่า (แต่ความคมชัดก็น้อยกว่า)
- ตัดพื้นหลังใสไม่ได้ สีทึบเท่านั้น
- เหมาะกับไฟล์รูปถ่ายที่มีสีเยอะๆ (Photo)

ไฟล์รูปภาพ GIF
- ทำ Animate ได้
- แสดงผลได้ 256 สี
- ตัดพื้นหลังใสได้ แต่สีกึ่งใสไม่ได้
- เหมาะกับไฟล์รูปที่ต้องมี Animate เล่นๆ ไม่จริงจัง ส่วนนอกนั้นใช้ PNG / JPEG แทนดีกว่า

สรุปเรื่องการเลือกนามสกุลรูป
- รูปสีน้อย + มีพื้นหลังใส / กึ่งใส = PNG-8
- รูปสีเยอะ + มีพื้นหลังใส / กึ่งใส = PNG-24
- รูปสีเยอะ + ไม่มีพื้นหลังใส = JPEG

หากนามสกุลรูปยังไม่เล็กพอ ยังมีวิธีลดขนาดไฟล์ การเลือกนามสกุลของไฟล์รูปให้เหมาะสมจะช่วยได้ในระดับนึงเท่านั้น เราสามารถบีบให้เล็กลงได้อีกขั้นด้วยการใช้เครื่องมือช่วยลดขนาดรูป ซึ่งจากการที่ทดสอบพวก Command Line Tool และ Online Tool ต่างๆ ก็พบว่าบริการบีบอัดที่เป็นเว็บไซต์ออนไลน์สามารถใช้งานได้ง่ายกว่าและเสถียรกว่า

สรุปเทคนิคการลดขนาดรูป
- เลือกนามสกุลรูปให้ถูก รูปถ่ายใช้ JPEG รูปวาดใช้ PNG
- ใช้โปรแกรม / เว็บไซต์ช่วยบีบอัดไฟล์

ที่มา : designil