Get Adobe Flash player

HTML5 picture element เพื่อทำ responsive image ที่ดีกว่า

ในปัจจุบันเป็นที่รู้กันว่าเราต้องทำเว็บไซต์ให้รองรับกับหน้าจอหลาย ๆ ขนาด (responsive web) รวมทั้งรูปภาพที่ใช้ในเว็บด้วย โดยวิธีที่ใช้กันมากคือการกำหนด CSS ให้ที่ทำให้รูปภาพมีความกว้างตามขนาดพื้นที่ที่มี เช่น

การใช้ CSS กำหนดให้รูปภาพเป็น responsive image สามารถใช้งานได้ดี แต่ก็ยังมีปัญหาเรื่องประสิทธิภาพ เพราะต้องเตรียมรูปภาพขนาดใหญ่เผื่อไว้รองรับหน้าจอขนาดใหญ่ เมื่อถูกเปิดด้วยหน้าจอขนาดเล็กก็ต้องโหลดรูปภาพขนาดใหญ่โดยไม่จำเป็น และหากพื้นที่เป็นแนวตั้ง แต่รูปภาพเป็นแนวนอน ก็จะส่งผลให้รูปภาพถูกย่อจนเล็กดังภาพ

 

ซึ่งในจุดนี้ HTML5 picture element จะเข้ามาช่วยได้ โดยการยอมให้เราเตรียมรูปภาพหลากหลายขนาดที่เหมาะสมกับหน้าจอขนาดต่าง ๆ และ picture element จะสั่งให้ web browser โหลดเฉพาะไฟล์ขนาดที่เหมาะสมตามที่เราตั้งค่าไว้  (เงื่อนไขเหมือนกับ media screen ของ CSS) โดยมีตัวอย่างดังนี้

ถ้าหน้าจอขนาด 600px ก็จะโหลดรูป img_pink_flowers แทน img_orange_flowers ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ

credit: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015

Leave a Reply

Your email address will not be published. Required fields are marked *