ใช้ตัวบอกความหนาแน่น

Katie Hempenius
Katie Hempenius

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  • โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์อื่นเพื่อดูว่าเบราว์เซอร์โหลดรูปภาพที่แตกต่างกันหรือไม่

คุณใช้โปรแกรมจำลองอุปกรณ์ได้ หากกำลังมองหาความหนาแน่นของการแสดงผลที่เฉพาะเจาะจง อุปกรณ์ต่อไปนี้เป็นอุปกรณ์ที่คุณลองใช้ได้

ความหนาแน่น 1x Blackberry Playbook, จอภาพภายนอกหลายจอ
ความหนาแน่น 2 เท่า iPad หรือ iPhone 5/6
ความหนาแน่น 3 เท่า Galaxy S5 หรือ iPhone X
  • โปรดดูรหัสที่ทําให้การดำเนินการนี้ใช้งานได้ใน index.html

หลักการทำงาน

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

พิกเซลคืออะไร

มาเริ่มกันตั้งแต่ต้นด้วยการกําหนดว่าพิกเซลคืออะไร ฟังดูง่าย แต่ "พิกเซล" นั้นมีหลายความหมาย

พิกเซลของอุปกรณ์ (หรือที่เรียกว่า "พิกเซลจริง")
จุดสีที่เล็กที่สุดที่แสดงบนอุปกรณ์ได้
พิกเซลเชิงตรรกะ
ข้อมูลที่ระบุสีในตำแหน่งที่เจาะจงบนตารางกริด พิกเซลประเภทนี้ไม่มีขนาดจริงโดยเนื้อแท้
พิกเซล CSS
ข้อกำหนด CSS กำหนดพิกเซลเป็นหน่วยวัดทางกายภาพ 1 พิกเซล = 1/96 นิ้ว

ความหนาแน่นพิกเซล

ความหนาแน่นของพิกเซล (หรือที่เรียกว่า "ความหนาแน่นของหน้าจอ" หรือ "ความหนาแน่นของจอแสดงผล") จะวัดความหนาแน่นของพิกเซลของอุปกรณ์ในพื้นที่ทางกายภาพหนึ่งๆ ซึ่งโดยทั่วไปจะวัดโดยใช้พิกเซลต่อนิ้ว (ppi)

เป็นเวลาหลายปีที่ความหนาแน่นของการแสดงผล 96 ppi เป็นค่าที่พบได้ทั่วไป (ด้วยเหตุนี้ CSS จึงกำหนดพิกเซลเป็น 1/96 นิ้ว) ตั้งแต่ปี 1980 ความละเอียดนี้เป็นความละเอียดเริ่มต้นของ Windows นอกจากนี้ ยังเป็นความละเอียดของจอภาพ CRT ด้วย

สถานการณ์นี้เริ่มเปลี่ยนแปลงเมื่อจอภาพ LED กลายเป็นที่นิยมในช่วงปี 2000 โดยเฉพาะอย่างยิ่งในปี 2010 Apple สร้างความตื่นตาตื่นใจอย่างมากเมื่อเปิดตัวจอแสดงผล Retina จอแสดงผลเหล่านี้มีความละเอียดขั้นต่ำ 192 ppi ซึ่งมากกว่าความละเอียดของจอแสดงผล "ปกติ" 2 เท่า (192 ppi/96 ppi = 2)

window.devicePixelRatio

เมื่อมีการเปิดตัวเทคโนโลยีการแสดงผลที่ใหม่กว่า "พิกเซลของอุปกรณ์" เริ่มมีรูปร่างและขนาดที่ต่างกันไป และไม่ได้มีขนาดเท่ากับ "พิกเซล CSS" อีกต่อไป ความต้องการกําหนดความสัมพันธ์ระหว่างขนาด "พิกเซลของอุปกรณ์" กับ "พิกเซล CSS" ส่งผลให้มีการเปิดตัว devicePixelRatio (บางครั้งเรียกว่า "อัตราส่วนพิกเซล CSS")

devicePixelRatio กำหนดความสัมพันธ์ระหว่างพิกเซลของอุปกรณ์กับพิกเซล CSS สำหรับอุปกรณ์หนึ่งๆ อุปกรณ์ 192 ppi มี devicePixelRatio เป็น 2 (192 ppi/96 ppi = 2) เนื่องจาก "พิกเซลที่แสดง 2 พิกเซลมีขนาดเท่ากับ 1 พิกเซล CSS"

ปัจจุบันอุปกรณ์ส่วนใหญ่มีอัตราส่วนพิกเซลของอุปกรณ์ระหว่าง 1.0 ถึง 4.0

  • กำหนดความหนาแน่นพิกเซลของอุปกรณ์โดยพิมพ์ window.devicePixelRatio ในคอนโซล

  • ดูตารางนี้เพื่อดูอัตราส่วนพิกเซลของอุปกรณ์ทั่วไป โดยส่วนใหญ่จะอยู่ระหว่าง 1.0 ถึง 4.0

แล้วคุณจะนำข้อมูลนี้ไปใช้จริงได้อย่างไร

ปรับขนาดรูปภาพตามอัตราส่วนพิกเซลของอุปกรณ์

คุณต้องระบุรูปภาพเวอร์ชันต่างๆ สำหรับ devicePixelRatios ที่แตกต่างกันเพื่อให้รูปภาพดูดีที่สุดบนหน้าจอที่มีความละเอียดสูง

อัตราส่วนพิกเซลของอุปกรณ์ บ่งบอกว่า ในอุปกรณ์นี้ แท็ก <img> ที่มี CSS กว้าง 250 พิกเซลจะดูดีที่สุดเมื่อรูปภาพต้นฉบับมีขนาด...
1 พิกเซลของอุปกรณ์ 1 พิกเซล = พิกเซล CSS 1 พิกเซล กว้าง 250 พิกเซล
2 พิกเซลของอุปกรณ์ 2 พิกเซล = พิกเซล CSS 1 พิกเซล กว้าง 500 พิกเซล
3 พิกเซลของอุปกรณ์ 3 พิกเซล = พิกเซล CSS 1 พิกเซล กว้าง 750 พิกเซล

สิ่งที่ควรทราบ

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

ใช้ตัวระบุความหนาแน่นเพื่อแสดงรูปภาพ
หลายรายการ

คุณสามารถใช้ข้อบ่งชี้ความหนาแน่นร่วมกับแอตทริบิวต์ "srcset " เพื่อแสดงรูปภาพที่แตกต่างกันให้กับ devicePixelRatio ที่แตกต่างกัน

  • ดูไฟล์ index.html และจดบันทึกองค์ประกอบ <img>
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

ตัวอย่างนี้แสดงเป็นข้อความ

  • 1x, 2x และ 3x ทั้งหมดเป็นข้อบ่งชี้ความหนาแน่นที่บอกเบราว์เซอร์เกี่ยวกับความหนาแน่นของพิกเซลที่รูปภาพมีไว้สำหรับแสดง ซึ่งจะช่วยประหยัดเวลาให้เบราว์เซอร์ไม่ต้องดาวน์โหลดรูปภาพเพื่อระบุข้อมูลนี้
  • โดยเบราว์เซอร์จะเลือกรูปภาพได้ 3 รูป ได้แก่ flower-1x.jpg (มีไว้สำหรับเบราว์เซอร์ที่มีความหนาแน่นพิกเซล 1.0) flower-2x.jpg (มีไว้สำหรับเบราว์เซอร์ที่มีความหนาแน่นพิกเซล 2.0) และ flower-3x.jpg (มีไว้สำหรับเบราว์เซอร์ที่มีความหนาแน่นพิกเซล 3.0)
  • flower.jpg คือรูปภาพสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ srcset

วิธีใช้

  • ใช้ devicePixelRatio และหน่วย x เพื่อเขียนตัวบ่งชี้ความหนาแน่น เช่น ตัวบ่งชี้ความหนาแน่นสำหรับหน้าจอ Retina หลายรุ่น (window.devicePixelRatio = 2) จะเขียนเป็น 2x
  • หากไม่ได้ระบุตัวบ่งชี้ความหนาแน่น ระบบจะถือว่าความหนาแน่นคือ 1x
  • การใส่ตัวบ่งชี้ความหนาแน่นในชื่อไฟล์เป็นแนวทางปฏิบัติทั่วไป (และจะช่วยให้คุณติดตามไฟล์ได้) แต่ก็ไม่จำเป็น รูปภาพมีชื่อไฟล์ใดก็ได้
  • โดยไม่จำเป็นต้องใส่แอตทริบิวต์ sizes แอตทริบิวต์ sizes ใช้กับข้อบ่งชี้ความกว้างเท่านั้น