ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

Adaptive Images (อแดปทีพ อิมเมจ) : Picture Element (พิคเจอ อเลเม้น) และ Srcset Attribute (เอสอาซีเซ็ท แอทริบิ้ว) คืออะไร

 Adaptive Images : Picture Element และ Srcset Attribute คืออะไร

 

      ในการทำ responsive web design (เรสป้อนซีพ เว็บ ดีไซน์) หากพูดถึงการใช้รูปต่างๆ ในหน้าเว็บแล้ว เราอาจจะต้องเลือกใช้รูปขนาดใหญ่สุดเพื่อที่จะสามารถแสดงผลได้อย่างคมชัดบน desktop (เดสท็อป) เเต่ด้วยข้อจำกัดของ responsive web design ทำให้เว็บในแต่ละเวอร์ชั่นนั้นจะใช้โค้ดร่วมกัน ไม่ว่าจะเป็น mobile (โมบาย), tablet (เเท็ปเล็ต) หรือ desktop ก็ตาม ด้วยเหตุนี้เอง จึงทำให้เกิดปัญหาที่ว่า mobile อาจจะต้องมาโหลดรูปขนาดใหญ่โดยไม่จำเป็นหรือผู้ที่ใช้ retina display (เรติน่า ดิสเพลย์) อาจจะพบว่ารูปที่โหลดมานั้นไม่คมชัดเท่าไรนัก เนื่องจากเป็นรูปที่ไม่ได้รองรับหน้าจอความละเอียดสูงนั่นเอง

      ปัญหาเกี่ยวกับรูปใน responsive web (เรสปอนซีฟ เว็บ) นี้ กลายเป็นปัญหาสำคัญ จึงทำให้เกิดการแก้ปัญหาที่เรียกว่า “Adaptive images (อแดปทีพ อิมเมจ)” ขึ้นมา โดยจุดประสงค์ก็คือ การทำให้ผู้ใช้งานโหลดเฉพาะรูปที่เหมาะสมกับสภาพแวดล้อมของผู้ใช้งานในขณะนั้นๆ แทนที่จะบังคับให้ผู้ใช้งานโหลดรูปขนาดใหญ่สุดไป แต่วิธีนี้นั้นค่อนข้างจะซับซ้อนและทำได้ยาก

picture element (พิคเจอร์ เอเลเม้น) ของ RICG (อาร์ไอซีจี) (Responsive Images Community Group (เรสปอนซีพ อิมเมจ คอมมูนิตี้ กรุ๊ป)) นั้นได้แรงบันดาลใจมาจาก video element (วีดีโอ เอเลเม้น) ซึ่ง RICG มองว่า pattern (เเพทเทริน) แบบนี้ authors(ออเทอร์) น่าจะคุ้นเคยกันเป็นอย่างดี จุดเด่นของ picture element (พิคเจอร์ เอเลเม้น) ก็คือการรองรับ media queries (มีเดีย คิวรี่) ซึ่งนั่นก็หมายความว่าเราสามารถกำหนดเงื่อนไขของการเลือกรูปมาแสดงได้ด้วยตัวเอง นอกจากนี้ picture element (พิคเจอร์ เอเลเม้น) ยังมี fallback (ฟอลเเบ็ค) สำหรับ web browsers (เว็บ บราวเซอร์) ที่ยังไม่รองรับอีกด้วย ซึ่งเป็นหลักการเดียวกับ video element นั่นเอง

 Adaptive Images : Picture Element และ Srcset Attribute คืออะไร

 

อย่างไรก็ดี picture element (พิคเจอร์ เอเลเม้น) อาจจะมีปัญหาอยู่บ้างในเรื่องของ performance (เพอฟอร์มแมน) เนื่องจาก parser (พาเซอร์) ของ web browsers (เว็บ บราวเซอร์) จะต้องมาเสียเวลาหา </picture> ให้เจอเสียก่อน จึงจะสามารถคำนวณได้ว่าควรเลือกรูปไหนมาแสดง

Srcset Attribute ไอเดียของ Edward O’Connor กันบ้าง เขาเลือกที่จะใช้ adaptive images (อแดปทิพ อิมเมจ) กับ img element (ไอเอ็มจี เอเลเม้น) เหมือนเดิม แทนที่จะสร้าง html element ขึ้นมาใหม่ เพียงแต่ว่าเขาเสนอให้เพิ่ม attribute เข้ามาอีกอันหนึ่ง ซึ่งก็คือ srcset นั่นเอง

 

Adaptive Images : Picture Element และ Srcset Attribute คืออะไร 

จากตัวอย่างการใช้ srcset attribute ด้านบน จะเห็นว่า srcset นั้นจะประกอบไปด้วยรูปเวอร์ชั่นต่างๆ ที่เราได้เตรียมไว้ โดยจะมี comma (คอมม่า) คั่นอยู่ จุดเด่นของ srcset attribute ก็คือเราจะสามารถใส่ “hint(คำใบ้)” ให้กับแต่ละเวอร์ชั่นได้ด้วยว่าเราอยากให้ web browsers เลือกรูปนี้มาแสดงเมื่อใด hint (ฮิ้น) ของ srcset attribute นั้นมีอยู่ 3 แบบ ด้วยกัน คือ w, h และ x โดย x นั้นจะหมายถึง pixel density ของ device นั้นๆ นั่นเท่ากับว่า เราสามารถเลือกแสดงรูปให้เหมาะสมกับหน้าจอความคมชัดสูงอย่าง retina display ได้แล้ว ส่วน w กับ h นั้นจะหมายถึงขนาดของ viewport ที่ใหญ่ที่สุด หรือ max-width และ max-height นั่นเอง ลองดูตัวอย่างต่อไปนี้

 

Adaptive Images : Picture Element และ Srcset Attribute คืออะไร 

จากตัวอย่างด้านบนจะเห็นว่า hint แบบ w นั้นจะอ้างอิงกับ max-width ไม่ใช่ min-width โดยรูปขนาดใหญ่ที่สุดที่เราจะใช้กับ infinite width (อินฟินิตี้ วาย) นั้นให้เราใส่ hint เป็น 1x ซึ่ง web browsers จะรู้เองว่ามันควรใช้รูปนี้มาแสดงผล หาก viewport (วิวพอร์ท) มีความกว้างมากกว่า 1280 p จะเห็นว่า srcset attribute นั้นมีข้อดีตรงที่เราไม่ต้องมาเขียน query (คิวรี่) เองว่าจะเลือกรูปไหนมาแสดงผล เราเพียงแต่ใส่ hint เข้าไปเท่านั้น ที่เหลือก็ปล่อยให้ web browsers (เว็บ บราวเซอร์) ตัดสินใจเองว่าจะเลือกรูปไหนมาใช้ซึ่งมันจะเลือกรูปที่ “เหมาะสม” ที่สุดในสภาพแวดล้อมนั้นๆ มาแสดงโดยอัตโนมัติ โดยมันจะดูจากปัจจัยหลายๆ อย่าง ไม่ว่าจะเป็น network speed (เน็ตเวริค สปีด) , latency (เลเทนซี่) รวมไปถึง orientation (โอเลี่ยนชัน)

ทำไมต้องมีทั้ง picture element และ srcset attribute ? 

      คำตอบง่ายๆ เลยก็คือ ทั้ง 2 solutions (โซโลลูชัน) ต่างก็ยังไม่สามารถตอบโจทย์ของ adaptive images ได้ครบในทุกๆ use cases (ยูส เคส) บ่อยครั้งที่เราพบว่ารูปใน mobile (โมบาย) นั้นเล็กจนดูไม่รู้เรื่อง ทั้งนี้เป็นเพราะว่าคนส่วนใหญ่จะลดขนาดของรูปลงให้สัมพันธ์กับขนาดของหน้าจอ พวกเขาอาจลืมไปว่าในบางครั้ง จุดโฟกัสนั้นไม่ได้อยู่ที่กึ่งกลางของรูป การกำหนดขนาดของรูปให้เป็น % โดยอิงตาม container (คอนเทนเนอร์) นั้นอาจทำให้ใจความสำคัญของรูปเสียไป หรืออาจเล็กลงมากจนดูไม่รู้เรื่องเมื่อดูในหน้าจอขนาดเล็ก

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การหาไฟล์รูปภาพที่ ครอบด้วย BBcode
โดย Ittichai_chupol ส 15 ธ.ค. 2018 6:19 pm บอร์ด PHP Knowledge
0
8
ส 15 ธ.ค. 2018 6:19 pm โดย Ittichai_chupol
การสร้างกระดานข่าวในส่วนของผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 4:38 pm บอร์ด phpBB user Guide Knowledge
0
17
ศ 14 ธ.ค. 2018 4:38 pm โดย จันนุสรณ์ ดีแก่
วิธีแก้เมื่อ Phpbb ขึ้นว่า กรุณาลบไดเรกเทอรี หากไดเรกเทอรียังอยู่ใช้ได้แต่ แผงควบคุมเท่านั้น
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 3:39 pm บอร์ด phpBB user Guide Knowledge
0
18
ศ 14 ธ.ค. 2018 3:39 pm โดย จันนุสรณ์ ดีแก่
การค้นหาภายในกระทู้
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 1:54 pm บอร์ด phpBB user Guide Knowledge
0
16
ศ 14 ธ.ค. 2018 1:54 pm โดย จันนุสรณ์ ดีแก่
การค้นหาภายในบอร์ด
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 12:10 pm บอร์ด phpBB user Guide Knowledge
0
21
ศ 14 ธ.ค. 2018 12:10 pm โดย จันนุสรณ์ ดีแก่
การค้นหาจากทั้งหมด
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 11:31 am บอร์ด phpBB user Guide Knowledge
0
20
ศ 14 ธ.ค. 2018 11:31 am โดย จันนุสรณ์ ดีแก่
เมื่อกราฟฟิกดีไซเนอร์อยากจีบสาว
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 10:45 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 14 ธ.ค. 2018 10:45 am โดย จันนุสรณ์ ดีแก่
การตั้งค่าบอร์ด
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 5:07 pm บอร์ด phpBB user Guide Knowledge
0
15
พฤ 13 ธ.ค. 2018 5:07 pm โดย จันนุสรณ์ ดีแก่
ส่งค่า ตัวแปร เปลี่ยนภาษา ไปยัง javascript บน phpbb
โดย Ittichai_chupol พฤ 13 ธ.ค. 2018 4:28 pm บอร์ด PHP Knowledge
0
14
พฤ 13 ธ.ค. 2018 4:28 pm โดย Ittichai_chupol
Styles Orange BBEs
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 3:58 pm บอร์ด phpBB 3.1 Extension Review
0
33
พฤ 13 ธ.ค. 2018 3:58 pm โดย จันนุสรณ์ ดีแก่
การจัดการกับข้อความ (การลบ)
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 3:30 pm บอร์ด phpBB user Guide Knowledge
0
16
พฤ 13 ธ.ค. 2018 3:30 pm โดย จันนุสรณ์ ดีแก่
JoomScan เครื่องมือตรวจสอบหาช่องโหว่ของระบบ Joomla แบบอัตโนมัติ
โดย tsukasaz พฤ 13 ธ.ค. 2018 2:24 pm บอร์ด Software Review
0
23
พฤ 13 ธ.ค. 2018 2:24 pm โดย tsukasaz
เมื่อจีบสาว!!
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 1:57 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
พฤ 13 ธ.ค. 2018 1:57 pm โดย จันนุสรณ์ ดีแก่
การเพิ่มกระทู้ให้อยู่ในรายการโปรด
โดย จันนุสรณ์ ดีแก่ พฤ 13 ธ.ค. 2018 1:22 pm บอร์ด phpBB user Guide Knowledge
0
23
พฤ 13 ธ.ค. 2018 1:22 pm โดย จันนุสรณ์ ดีแก่
สอบถามวิธีจัดการ Notify บน Browser หน่อยครับว่าจะตั้งค่ายังไงให้มันแสดง หรือให้ไม่แสดงยังไง
โดย tatiya พ 12 ธ.ค. 2018 7:13 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
38
พ 12 ธ.ค. 2018 7:13 pm โดย tatiya
Styles เว็บไซต์
โดย จันนุสรณ์ ดีแก่ พ 12 ธ.ค. 2018 5:48 pm บอร์ด phpBB 3.1 Extension Review
0
52
พ 12 ธ.ค. 2018 5:48 pm โดย จันนุสรณ์ ดีแก่
การเปลี่ยน Style Board phpBB
โดย จันนุสรณ์ ดีแก่ พ 12 ธ.ค. 2018 5:27 pm บอร์ด phpBB user Guide Knowledge
0
37
พ 12 ธ.ค. 2018 5:27 pm โดย จันนุสรณ์ ดีแก่
Q - วิธีการใส่ไฟล์ภาษาลงใน javascript
โดย Ittichai_chupol พ 12 ธ.ค. 2018 5:11 pm บอร์ด JavaScript & Jquery Ajax
1
58
พฤ 13 ธ.ค. 2018 11:27 am โดย mindphp
การเปลี่ยนสีและเพิ่มรูปภาพ USER!
โดย จันนุสรณ์ ดีแก่ พ 12 ธ.ค. 2018 4:10 pm บอร์ด phpBB user Guide Knowledge
0
35
พ 12 ธ.ค. 2018 4:10 pm โดย จันนุสรณ์ ดีแก่
วิธีสมัครเป็นสมาชิกในเว็บบอร์ด php
โดย จันนุสรณ์ ดีแก่ พ 12 ธ.ค. 2018 2:38 pm บอร์ด phpBB user Guide Knowledge
0
27
พ 12 ธ.ค. 2018 2:38 pm โดย จันนุสรณ์ ดีแก่