รู้จักกับ Picture Element สำหรับการสร้าง Responsive Image
ถ้าคุณกำลังทำเว็บแบบ Responsive ไม่ว่าจะเคย หรือไม่เคยมา Workshop กับผม เรื่องของรูปภาพบนเว็บไซต์เป็นหนึ่งในโจทย์ที่ทุกคนต้องคิดแล้วคิดอีก เพราะถ้ามันจะถูกแก้ไข มันจะต้องทำด้วย HTML5 Element ที่ชื่อว่า <picture> element ครับ
ปัญหาของการใช้รูปภาพ ใน Responsive Web Design
ใครทำเว็บไซต์จะต้องรู้ว่า กว่าครึ่งหนึ่งของเว็บที่ถูกโหลดผ่านเครือข่ายมาเปิดในเครื่องเนี่ย เป็นรูปภาพครับ
มันเป็นส่วนหนึ่งที่ทำให้เว็บโหลดช้า แต่เราก็ปฏิเสธที่จะใช้มันไม่ได้
ทีนี้มายุคเว็บไซต์สำหรับอุปกรณ์พกพา ที่เรียกกันเท่ๆ ว่า Responsive Web Design เนี่ย ปัญหานี้เด่นชัดขึ้นกว่าแต่ก่อนอีก (คนที่ยังไม่รู้จัก Responsive Web Design ดูที่ผมเขียนสรุปไว้ที่นี่ครับ)
เพราะไม่ว่าคุณจะใช้ Notebook เปิดผ่าน Wifi หรือใช้มือถือเปิดผ่าน 3G มันก็ต้องโหลดไฟล์ภาพขนาดเดียวเหมือนกันหมด!
(ภาพ)
บางคนอาจจะไม่ยี่ระกับสิ่งที่เกิดขึ้นตรงนี้ แต่นักออกแบบและสร้างเว็บที่มีคุณภาพต้องใส่ใจนะ เพราะคำว่า Responsive Web ที่ดีมันไม่ได้หยุดแค่ Layout ที่เปลี่ยนไปอย่างเหมาะสมเท่านั้น แต่มันต้องใช้งานได้อย่างมีประสิทธิภาพในสถานการณ์ต่างๆ ด้วย (ดูแนวคิดการวางแผนทำเว็บแบบ Responsive 4 แบบที่นี่)
ทีนี้การจัดการรูปภาพบน Responsive Web ของเรามันก็เรียกได้ง่ายๆ ว่า “Responsive Image”
มีหลายวิธีให้เลือกใช้ ทั้ง CSS และ Javascript (PictureFill.js) แต่ส่วนใหญ่ถูกสร้างขึ้นมาให้ใช้แก้ขัดไปก่อนที่ HTML5 จะหาวิธีมารองรับการจัดการ Responsive Image อย่างสมบูรณ์จริงๆ
ซึ่งในบทความนี้จะกล่าวถึง picture element ที่เพิ่มเข้ามาใน HTML5 เมื่อไม่นานมานี้เองครับ และตอนนี้ทุกคนก็กำลังตื่นเต้นกับมันซะด้วย
เป้าหมายของ picture element
picture element จะให้อิสระแก่นักพัฒนาและนักออกแบบในการควบคุมรูปภาพบนเว็บสำหรับสถานการณ์ต่างๆ โดยไม่ต้องพึ่ง CSS หรือ Javascript
Picture element ตามสเปคของ W3C ถูกกำหนดให้มีหน้าที่ดังนี้ครับ
- ทำให้นักพัฒนาสามารถควบคุมรูปภาพที่ Web browser จะแสดงผล ด้วย Media Queries หรือชนิดของตัวภาพเองได้
- จะถูกใช้ในกรณีนี้รูปภาพที่ความละเอียดหลายระดับ หรือบนเว็บไซต์แบบ Responsive ที่ต้องการแสดงรูปภาพที่แตกต่างกันตามอุปกรณ์ที่แสดงผล
ง่ายๆ คือ เราสามารถควบคุมรูปภาพที่จะแสดงผลบนเว็บเพจของเราด้วย HTML ล้วนๆ ได้ ไม่ต้องพึ่ง CSS หรือ Javascript ให้เมื่อย
ซึ่ง User Agent (พวก Web Browser นั่นแหละ) จะทำการอ่าน Picture element แล้วเลือกภาพที่เหมาะสมที่สุดมาแสดงตามที่เราเตรียมไว้
วิธีการใช้งาน และ syntax ของ Picture element
มาดูตัวอย่างการใช้งาน Picture element แบบทั่วไปกันก่อนครับ
<picture>
<source media="(min-width: 768px)" srcset="assets/desktop.jpg">
<source media="(min-width: 480px)" srcset="assets/tablet.jpg">
<source srcset="assets/mobile.jpg">
<img src="assets/not-support.jpg" alt="Image for web browser that isn't support <picture> element">
</picture>
สรุปย่อ
-
<picture> เป็น container element ซึ่งเราต้องกำหนดรายละเอียดของรูปภาพด้านในอีกที
-
<source> คือตัวกำหนดรูปภาพ สามารถใช้ Media queries หรือ size เพื่อควบคุมการแสดงผลรูปในกรณีต่างๆ ได้
-
<img> จะใช้กันเหนียวครับ เผื่อไว้สำหรับ Web browser เก่าๆ (นึกถึงอะไรล่ะ?) ที่ยังไม่รองรับ <picture> element
ให้เราสังเกตว่าใน Source element จะมี attribute อยู่ 3 ส่วนด้วยกันคือ
- srcset: ไว้กำหนด url ของไฟล์รูปภาพ สามารถกำหนดได้หลายไฟล์
- media : ควบคุมการแสดงภาพจาก srcset ในกรณีที่ต้องการ เช่น กำหนดแสดงภาพตามขนาดความกว้างของหน้าจอ
- size : ขนาดของภาพที่จะแสดงผลหน้าจอ อย่างเช่น 100% คือกว้างเต็มหน้าจอ
รู้จักกันแล้วไปดูกันวิธีใช้งานกันเลยครับ
ตัวอย่างวิธีกำหนด Media attribute ให้แสดงภาพตามความกว้างของหน้าจอ
สำหรับคนที่เคยใช้ Media Queries ใน CSS เพื่อแสดงไฟล์รูปที่แตกต่างกันบนเว็บเพจโดยใช้ background-image ของ CSS ก็สามารถเรียนรู้การใช้ Media attribute ใน Source element ได้ไม่ยากครับ เช่นการกำหนดกรณีด้วย max-width และ min-width ก็ใช้ได้เหมือนเดิม
<picture>
<source media="(min-width: 768px)" srcset="assets/desktop.jpg">
<source media="(min-width: 480px)" srcset="assets/tablet.jpg">
<source srcset="assets/mobile.jpg">
</picture>
ในตัวอย่างคือ
- เริ่มจากขนาดจอที่กว้างอย่างต่ำ 768 pixel สำหรับภาพใหญ่ไว้ดูบนคอมพิวเตอร์ (desktop.jpg)
- ลงมาที่หน้าจอกว้างอย่างต่ำ 480 pixel สำหรับเอาไว้ดูบนพวก Tablet (tablet.jpg)
- และสุดท้ายคือ ภาพที่เตรียมไว้สำหรับอุปกรณ์พกพาครับ (mobile.jpg)
ซึ่งนอกจากหน่วย pixel (px) แล้ว ยังสามารถเลือกใช้หน่วยอื่นอย่าง em ได้ครับ
ตัวอย่างวิธีกำหนด Source element ให้แสดงภาพตามความละเอียดของหน้าจอ
โจทย์อันนี้ปวดเศียรเวียนเกล้ากันพอสมควรในยุคแรกๆ ของการทำ Responsive Web Design มาดูวิธีการกำหนด source element กันดีกว่า
<picture>
<source media="(min-width: 480px)" srcset="assets/mobile.jpg 1x, assets/[email protected] 2x">
<source srcset="assets/mobile.jpg">
<img src="assets/not-support.jpg" alt="Image for web browser that isn't support <picture> element">
</picture>
จะเห็นว่าด้านหลังของ url รูปภาพแต่ละรูปใน srcset มีการกำหนด 1x และ 2x ตามลำดับ
ซึ่ง Web Browser จะเป็นคนดูให้ว่าความละเอียดหน้าจอปัจจุบันเป็นเท่าไหร่ ถ้าเป็นหน้าจอความละเอียดทั่วไป รูป mobile.jpg ก็จะถูกโหลดและแสดงขึ้นมา แต่ถ้าเป็นอุปกรณ์หน้าจอความละเอียดสูง รูป [email protected] จะถูกโหลดและแสดงขึ้นมาแทน
ง่ายเลยใช่ไหมครับ กำหนดลงไปใน HTML attribute ได้เลย จบ 🙂
จริงมีวิธีใช้ได้หลากหลายกว่านี้ แต่ Webkit กำลังพัฒนาอยู่
การรองรับใน Web Browser ต่างๆ (และ IE)
ผมเองก็หวังว่า Picture Element จะเป็นผู้ให้แสงสว่างแก่นักออกแบบเว็บไซต์ในปัจจุบัน แต่กรรมของเรายังติดอยู่ที่ IE เจ้าเก่า เพราะท่าทีของ Microsoft ก็ดูยังไม่เล่นด้วย (Under Consideration) ไม่เหมือน FireFox กับ Google Chrome ที่เริ่มนำไปก่อน (อีกครั้ง) ซึ่งคุณสามารถดูอัพเดตสถานะการรองรับ Picture element ล่าสุดกันได้ที่นี่
แต่เจ้า Picture element มาดูดีทีเดียว เพราะออกมาแก้ปัญหาที่นักออกแบบเว็บไซต์ทั้งโลกกำลังเจออยู่ ผมคาดการว่ามันคงไม่แท้งไปก่อนคลอดจริงครับ
สำหรับใครต้องการใช้ Javascript เพื่อช่วยในการทำงานของ Responsive Image แวะมาดูที่วิธีใช้งาน PictureFill.js และวิดีโอแนะนำที่นี่ครับ
สรุปเรื่อง Picture Element
- Picture element เหมือนกล่องเปล่าๆ ด้านในเรากำหนดรูปภาพด้วย Source และ Image element อีกที
- attribute srcset ใช้ได้ทั้ง Source และ Image element กำหนดรูปภาพได้
- attribute media ใช้กำหนดกรณี (condition) เพื่อควบคุมการเลือกแสดงผลรูปภาพใน Picture element วิธีใช้เหมือนกับ CSS3 Media Queries
- สำหรับการเอาไปใช้งานกับ Web Browser รุ่นเก่า ก็ให้ใส่ Image element ลงไปด้วย หรือใช้ PictureFill.js
- Picture element อนาคตไกลพอตัว ซ้อมมือไว้
ในที่สุดผมเชื่อว่า Picture element จะเป็นที่นิยม และแพร่หลายแทนการใช้ Image element หรือการใช้ background-image ใน CSS
ทุกคนพร้อมแล้ว เหลือแค่พวก Web Browser นี่แหละครับ ที่ต้องรอเวลา
แล้วตบเจ้า IE มาร่วมวงเร็วๆ เล่า!