Responsive Images ด้วย HTML

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

ความสำคัญของ Responsive Images

Responsive Images ไม่ใช่แค่เรื่องของความสวยงามเท่านั้น แต่ยังมีผลต่อประสบการณ์ผู้ใช้ (User Experience) และประสิทธิภาพของเว็บไซต์โดยรวม ดังนี้:

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

การใช้ Responsive Images เป็นหนึ่งในแนวปฏิบัติที่ดีที่สุด (Best Practices) ในการพัฒนาเว็บไซต์สมัยใหม่ และเป็นสิ่งที่ควรพิจารณาอย่างยิ่งเมื่อสร้างเว็บไซต์ที่ต้องการรองรับผู้ใช้บนอุปกรณ์ที่หลากหลาย

การใช้ `srcset` Attribute

srcset attribute เป็นหัวใจสำคัญของการสร้าง Responsive Images โดยใช้เพื่อระบุรูปภาพหลายขนาดที่แตกต่างกัน และเบราว์เซอร์จะเลือกรูปภาพที่เหมาะสมที่สุดเพื่อแสดงผล ตัวอย่าง:

<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     alt="A descriptive image">

ในตัวอย่างนี้ เราได้ระบุรูปภาพ 3 ขนาด:

image-small.jpg: สำหรับอุปกรณ์ที่มีความกว้างไม่เกิน 480 พิกเซล
image-medium.jpg: สำหรับอุปกรณ์ที่มีความกว้างไม่เกิน 800 พิกเซล
image-large.jpg: สำหรับอุปกรณ์ที่มีความกว้างไม่เกิน 1200 พิกเซล

แต่ละรายการใน srcset ประกอบด้วย URL ของรูปภาพและตัวบอกขนาด (size descriptor) ในที่นี้คือ w ซึ่งหมายถึงความกว้างของรูปภาพในหน่วยพิกเซล (pixel). เบราว์เซอร์จะใช้ข้อมูลนี้เพื่อคำนวณความหนาแน่นของพิกเซล (pixel density) ของหน้าจอ และเลือกรูปภาพที่เหมาะสมที่สุด

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

ข้อควรระวัง: ต้องตรวจสอบให้แน่ใจว่ารูปภาพแต่ละขนาดมีอัตราส่วนภาพ (aspect ratio) ที่เหมือนกัน เพื่อป้องกันการบิดเบือนของรูปภาพ

การใช้ `sizes` Attribute

sizes attribute ช่วยให้เบราว์เซอร์เข้าใจว่ารูปภาพจะถูกแสดงในขนาดเท่าใดบนหน้าจอที่แตกต่างกัน Attribute นี้ทำงานร่วมกับ srcset เพื่อให้เบราว์เซอร์สามารถเลือกรูปภาพที่เหมาะสมได้อย่างแม่นยำยิ่งขึ้น ตัวอย่าง:

<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 900px) 50vw,
            33.3vw"
     alt="A descriptive image">

ในตัวอย่างนี้ เราได้กำหนด sizes attribute ดังนี้:

(max-width: 600px) 100vw: ถ้าหน้าจอมีความกว้างไม่เกิน 600 พิกเซล รูปภาพจะมีความกว้าง 100% ของวิวพอร์ต (viewport)
(max-width: 900px) 50vw: ถ้าหน้าจอมีความกว้างไม่เกิน 900 พิกเซล รูปภาพจะมีความกว้าง 50% ของวิวพอร์ต
33.3vw: ถ้าหน้าจอมีความกว้างมากกว่า 900 พิกเซล รูปภาพจะมีความกว้าง 33.3% ของวิวพอร์ต

vw คือหน่วยวัดที่หมายถึง "viewport width" หรือความกว้างของวิวพอร์ต

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

แนวปฏิบัติที่ดี: ควรเริ่มต้นด้วยขนาดหน้าจอที่เล็กที่สุดและค่อยๆ เพิ่มขนาดขึ้นเรื่อยๆ เพื่อให้เบราว์เซอร์สามารถเลือกรูปภาพที่เหมาะสมที่สุดได้

ข้อควรระวัง: ค่าใน sizes attribute ต้องสอดคล้องกับขนาดของรูปภาพที่กำหนดใน CSS เพื่อให้การแสดงผลเป็นไปอย่างถูกต้อง

`srcset` และ `sizes` ทำงานร่วมกันอย่างไร?

เบราว์เซอร์จะใช้ sizes attribute เพื่อคำนวณขนาดของรูปภาพที่จะแสดงผลบนหน้าจอ จากนั้นจะใช้ข้อมูลนี้ร่วมกับ srcset attribute เพื่อเลือกรูปภาพที่มีขนาดใกล้เคียงกับขนาดที่คำนวณได้มากที่สุด

ตัวอย่างเช่น ถ้าหน้าจอมีความกว้าง 700 พิกเซล และ sizes attribute กำหนดให้รูปภาพมีความกว้าง 50% ของวิวพอร์ต เบราว์เซอร์จะคำนวณว่ารูปภาพควรมีความกว้าง 350 พิกเซล จากนั้นจะเลือกรูปภาพจาก srcset ที่มีขนาดใกล้เคียง 350 พิกเซลมากที่สุด

Trade-offs: การใช้ srcset และ sizes ทำให้โค้ด HTML มีความซับซ้อนมากขึ้น แต่ก็ช่วยให้ได้ Responsive Images ที่มีประสิทธิภาพและปรับแต่งได้ตามต้องการ หากไม่ต้องการความซับซ้อนมากนัก อาจพิจารณาใช้เทคนิคอื่นๆ เช่น การใช้ CSS Media Queries เพื่อกำหนดรูปภาพที่แตกต่างกันสำหรับแต่ละขนาดหน้าจอ แต่เทคนิคนี้อาจไม่ยืดหยุ่นเท่ากับการใช้ srcset และ sizes

สรุป

การสร้าง Responsive Images ด้วย HTML เป็นสิ่งสำคัญในการพัฒนาเว็บไซต์ที่รองรับอุปกรณ์ที่หลากหลาย การใช้ srcset และ sizes attributes ช่วยให้เราสามารถระบุรูปภาพหลายขนาดและกำหนดขนาดของรูปภาพในแต่ละช่วงขนาดหน้าจอได้อย่างละเอียด ทำให้เบราว์เซอร์สามารถเลือกรูปภาพที่เหมาะสมที่สุดเพื่อแสดงผลได้ การทำความเข้าใจการทำงานของ srcset และ sizes จะช่วยให้คุณสามารถสร้างเว็บไซต์ที่มีประสิทธิภาพและมอบประสบการณ์ที่ดีให้กับผู้ใช้บนทุกอุปกรณ์

ในบทถัดไป เราจะไปเรียนรู้เกี่ยวกับ Web Components เบื้องต้น และวิธีการสร้าง Custom Elements เพื่อสร้างส่วนประกอบ UI ที่สามารถนำกลับมาใช้ใหม่ได้

Responsive Images ด้วย HTML