สำรวจการสาธิตนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดหน้าเว็บซ้ำโดยใช้อุปกรณ์เครื่องอื่นเพื่อดูเบราว์เซอร์โหลดรูปภาพแบบต่างๆ
คุณใช้โปรแกรมจำลองอุปกรณ์เพื่อดำเนินการดังกล่าวได้ หากคุณกำลังมองหาความหนาแน่นของการแสดงผลที่เจาะจง ลองพิจารณาอุปกรณ์บางส่วนต่อไปนี้
| ความหนาแน่น 1 เท่า | 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 โดยเฉพาะอย่างยิ่ง Apple ก็ได้รับความนิยมอย่างมากในปี 2010 เมื่อเปิดตัวจอแสดงผลแบบ 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 เครื่อง = 1 พิกเซล CSS | กว้าง 250 พิกเซล |
| 2 | พิกเซลอุปกรณ์ 2 เครื่อง = 1 พิกเซล CSS | กว้าง 500 พิกเซล |
| 3 | พิกเซลของอุปกรณ์ 3 เครื่อง = 1 พิกเซล CSS | กว้าง 750 พิกเซล |
สิ่งที่ควรทราบ
- ขนาดพิกเซลที่แสดงในโปรแกรมแก้ไขรูปภาพ ไดเรกทอรีไฟล์ และตำแหน่งอื่นๆ เป็นการวัดพิกเซลเชิงตรรกะ
- สำหรับหน้าจอที่มีความละเอียดมากขึ้นและหน้าจอขนาดใหญ่ขึ้น คุณจะต้องใช้รูปภาพที่มีขนาดใหญ่ขึ้น การขยายรูปภาพเพียงแค่สั้นๆ ก็ทําให้การทํางานผิดพลาดในการแสดงโฆษณาหลายเวอร์ชัน เบราว์เซอร์ควรทำเช่นนี้อยู่แล้วหาก ไม่ได้ใส่รูปภาพความละเอียดสูง
ใช้ข้อบ่งชี้ความหนาแน่นเพื่อแสดงรูปภาพ
หลายภาพ
คุณสามารถใช้ข้อบ่งชี้ความหนาแน่นร่วมกับแอตทริบิวต์ "srcset " เพื่อแสดงรูปภาพที่แตกต่างกันไปยัง devicePixelRatios ที่แตกต่างกันได้
- ดูไฟล์
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เพื่อเขียนข้อบ่งชี้ความหนาแน่น ตัวอย่างเช่น ข้อบ่งชี้ความหนาแน่นสำหรับหน้าจอเรตินาจำนวนมาก (window.devicePixelRatio = 2) จะเขียนเป็น2x - หากไม่ได้ระบุข้อบ่งชี้ความหนาแน่น ระบบจะถือว่าเป็น
1x - การใส่ข้อบ่งชี้ความหนาแน่นในชื่อไฟล์เป็นเรื่องปกติ (และจะช่วยให้คุณติดตามไฟล์ได้) แต่ไม่จำเป็น รูปภาพอาจมีชื่อไฟล์ใดก็ได้
- ไม่จำเป็นต้องใส่แอตทริบิวต์
sizesแอตทริบิวต์sizesจะใช้ กับตัวบอกความกว้างเท่านั้น