ลด bandwidth การโหลดหน้าเว็บไซต์ด้วย Responsive images

ในการเพิ่มรูปภาพลงไปในหน้าเว็บไซต์ของเราด้วย HTML จะใช้ tag ที่มีชื่อว่า <img> และมีการส่งพารามิเตอร์ชื่อว่า src เข้าไปใน tag เช่น

แต่รู้หรือไม่ว่า เราสามารถปรับปรุงประสิทธิภาพของการโหลดหน้าเว็บไซต์อย่างมากด้วยการแก้ที่ tag img นี้ 

หากเคยเขียนเว็บไซต์ที่มี Responsive มาแล้วก็น่าจะทราบมาก่อนแล้วว่า จำเป็นต้องมีการเขียนโค้ด frontend ให้สามารถแสดงผลได้บนทุกอุปกรณ์ เช่นเดียวกับการทำ Responsive images ซึ่งมีจุดมุ่งหมายให้สามารถแสดงผลได้ในอุปกรณ์ที่หลากหลาย ด้วยการใช้ parameters ที่ชื่อว่า srcset และ size เข้ามาดังรูป 

สำหรับส่วนประกอบของค่า parameter ที่ใส่เข้าไปใน srcset จะเป็นรูปแบบของ string ที่ประกอบด้วย 

1. ชื่อไฟล์ของภาพในขนาดที่กำหนด  

2. เว้นวรรค 

3. ความกว้างที่แท้จริงของภาพในหน่วย px (เช่น 480w) แต่จะไม่ใช้หน่วยในรูปของ px และใช้ w แทน ซึ่งความกว้างนี้สามารถตรวจสอบได้โดยการ inspecting ไฟล์รูปภาพนั้น ๆ (หรือกด Cmd + I สำหรับ Mac) 

4. เครื่องหมาย “,” จากนั้นตามด้วยรูปภาพที่เตรียมไว้สำหรับหน้าจอขนาดต่อไป 

จากนั้นให้กำหนด parameter ชื่อ size ดังนี้ 

1. เงื่อนไขของอุปกรณ์ (เช่น (max-width: 600px)) หมายความว่า viewport มีความกว้างไม่เกิน 600pixels 

2. เว้นวรรค 

3. ความกว้างของช่องที่ภาพจะใส่เข้าไปหากเงื่อนไขในข้อ 1 เป็นจริง (เช่น 480px) 

4. เครื่องหมาย “,” จากนั้นวนลูปในข้อ 1 ใหม่จนกว่าจะครบตามที่ต้องการ 

ทีนี้เราจะมาดูในเรื่องของความประหยัด bandwidth กันว่าจะช่วยลดได้มากน้อยขนาดไหน จากเว็บไซต์ตัวอย่างสองแบบคือ แบบแรก ไม่ใช้ Responsive images และแบบที่สอง ใช้ Responsive images เมื่อวัดประสิทธิภาพของทั้งสองแบบด้วยหน้าจอขนาดใหญ่ (PC) จะเห็นได้ว่าไม่ต่างกัน 

เหตุผลก็เพราะการที่เราสั่งให้ tag img โหลดภาพที่มีความละเอียดเท่าที่จำเป็นนั่นเอง และถ้าลองคิดดูว่าในเว็บไซต์ตัวอย่างนี้มีรูปภาพเพียงแค่ 2 รูปภาพเท่านั้น ซึ่งหากนำเทคนิคนี้ไปใช้ในเว็บไซต์ที่มีรูปภาพเป็นจำนวนมาก ก็จะทำให้ลดการใช้ bandwidth ลงได้มากเลยทีเดียว 

ผู้เขียน เธียรวิชญ์ สิริสาครสกุล 

วันที่ 8 ตุลาคม พ.ศ.2564 

อ้างอิง : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images