รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

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

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

ไวยากรณ์ที่สื่อความหมาย

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

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

ไวยากรณ์ที่ต้องสั่งโดยแพทย์

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

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

ในกรณีเหล่านี้ คุณต้องการควบคุมอย่างชัดแจ้งว่าจะแสดงแหล่งที่มาใดและจะแสดงเมื่อใด สิ่งเหล่านี้เป็นการรับรองว่า srcset และ sizes ไม่อาจ มอบสิ่งดีๆ ให้เราได้ โดยคุณจะต้องใช้องค์ประกอบ <picture> จึงจะควบคุมได้