px: แก่นแท้ พิกเซลทางกายภาพในการพัฒนาแอปมือถือ
px — พิกเซลทางกายภาพ ซึ่งเป็นองค์ประกอบที่เล็กที่สุดของภาพบนหน้าจออุปกรณ์ ในการพัฒนาแอปมือถือ px ถูกใช้เป็นหน่วยพื้นฐานของความละเอียดหน้าจอและความหนาแน่นของพิกเซล (PPI) แต่ในทางปฏิบัติไม่ถูกใช้สำหรับการจัดวางอินเทอร์เฟซ — แต่จะใช้หน่วยเชิงตรรกะ pt, dp และ sp แทน บทความนี้อธิบายว่า px แตกต่างจากหน่วยเชิงตรรกะอย่างไร ความละเอียดและ PPI สัมพันธ์กันอย่างไร และなぜการใช้ px โดยตรงในโค้ดเป็นปฏิยานุกรม
ประเด็นสำคัญ
- px — พิกเซลทางกายภาพของหน้าจอที่ไม่คำนึงถึงความหนาแน่นของหน้าจอ (PPI)
- ความละเอียดหน้าจอ ในหน่วย px — จำนวนพิกเซลในแนวกว้างและแนวสูง เช่น 1179 × 2556 px
- PPI — จำนวนพิกเซลต่อนิ้ว ตัวบ่งชี้หลักของความคมชัดของภาพ
- หน่วยเชิงตรรกะ (dp, pt, sp) ทำให้ px เป็นนามธรรมและปรับอินเทอร์เฟซให้เข้ากับหน้าจอต่าง ๆ
- การใช้ px ในโค้ดเป็นปฏิยานุกรม เพราะอินเทอร์เฟซจะไม่แสดงผลอย่างถูกต้องบนอุปกรณ์ที่มีความหนาแน่นต่างกัน
px คืออะไร?
px (พิกเซล, องค์ประกอบของภาพ) — องค์ประกอบที่สามารถระบุตำแหน่งได้ที่เล็กที่สุดของภาพแรสเตอร์หรือหน้าจอ แต่ละพิกเซลเก็บข้อมูลสีในโมเดล RGB (แดง, เขียว, น้ำเงิน) ด้วยความลึกของสี 8 ถึง 10 บิตต่อช่องสัญญาณ หน้าจอของอุปกรณ์มือถือสมัยใหม่มีพิกเซลนับล้าน: iPhone 15 Pro — 3 ล้าน, iPad Pro 12.9" — 5.6 ล้านพิกเซล
ขนาดทางกายภาพของพิกเซลขึ้นอยู่กับความหนาแน่นของหน้าจอ (PPI) บนอุปกรณ์ที่มี 326 PPI (iPhone 11) หนึ่งพิกเซลมีขนาดประมาณ 0.078 มม. บนหน้าจอที่มี 460 PPI (iPhone 15 Pro) — 0.055 มม. ยิ่งขนาดทางกายภาพของพิกเซลเล็กเท่าใด ความคมชัด ของภาพก็ยิ่งสูงขึ้นเท่านั้น ในขณะเดียวกัน ความหนาแน่นของพิกเซลส่งผลโดยตรงต่อประสิทธิภาพการเรนเดอร์: พิกเซลมากขึ้น = งานสำหรับ GPU มากขึ้น
ตามข้อมูลของ Apple ความละเอียดหน้าจอของ iPhone 15 Pro คือ 1179 × 2556 px ที่ 460 PPI สำหรับการเปรียบเทียบ iPhone SE (รุ่นที่ 3) — 750 × 1334 px ที่ 326 PPI ความแตกต่างของจำนวนพิกเซลทั้งหมดเกือบ 3 เท่า ซึ่งอธิบายความต้องการ GPU ที่สูงขึ้นในรุ่น Pro
ความละเอียดหน้าจอในหน่วยพิกเซล
ความละเอียดหน้าจอ — จำนวนพิกเซลทางกายภาพในแนวนอนและแนวตั้ง เขียนในรูปแบบกว้าง × สูง เช่น 1179 × 2556 px ความละเอียดเป็นคุณสมบัติพื้นฐานของหน้าจอที่ไม่สามารถเปลี่ยนแปลงได้ด้วยซอฟต์แวร์ — มันถูกกำหนดไว้ที่ระดับฮาร์ดแวร์และเมทริกซ์
| อุปกรณ์ | ความละเอียด (px) | PPI | อัตราส่วนภาพ |
|---|---|---|---|
| iPhone SE (รุ่นที่ 3) | 750 × 1334 | 326 | 16:9 |
| iPhone 14 | 1170 × 2532 | 460 | 19.5:9 |
| iPhone 15 Pro Max | 1290 × 2796 | 460 | 19.5:9 |
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 505 | 19.5:9 |
| Google Pixel 8 Pro | 1344 × 2992 | 490 | 20:9 |
| iPad Pro 12.9" | 2048 × 2732 | 264 | 4:3 |
ความละเอียดในหน่วยพิกเซลไม่ควรสับสนกับขนาดเชิงตรรกะของหน้าจอ (ในหน่วย pt สำหรับ iOS หรือ dp สำหรับ Android) ตัวอย่างเช่น iPhone 14 มีขนาดเชิงตรรกะ 390 × 844 pt แต่ความละเอียดทางกายภาพคือ 1170 × 2532 px — มากกว่า 3 เท่าพอดี เนื่องจากสเกลแฟกเตอร์เท่ากับ 3
PPI และความหนาแน่นของพิกเซล
PPI (พิกเซลต่อนิ้ว) — จำนวนพิกเซลต่อหนึ่งนิ้วของหน้าจอ คำนวณโดยสูตร: PPI = √(กว้าง² + สูง²) / เส้นทแยงมุม ยิ่ง PPI สูงเท่าใด พิกเซลแต่ละพิกเซลก็ยิ่งเล็กลงและภาพยิ่งดูเรียบเนียนมากขึ้นเท่านั้น Apple ถือว่าหน้าจอที่มี PPI สูงกว่า 300 ที่ระยะการมองเห็นทั่วไปเป็นจอภาพ Retina
อุปกรณ์แต่ละประเภทมีความหนาแน่นต่างกัน: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI อุปกรณ์ Android จัดประเภทความหนาแน่นผ่าน Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640) บัคเก็ตเหล่านี้กำหนดว่าทรัพยากรใด (ภาพ, dimens) จะถูกโหลดสำหรับอุปกรณ์
ผลกระทบของ PPI ต่อการพัฒนา: ยิ่งความหนาแน่นสูงเท่าใด หน่วยความจำที่จำเป็นสำหรับการจัดเก็บพื้นผิวและภาพก็ยิ่งมากขึ้นเท่านั้น พิกเซลบนหน้าจอ 500 PPI ต้องการหน่วยความจำ GPU มากกว่าหน้าจอ 320 PPI ถึง 2.5 เท่าสำหรับขนาดองค์ประกอบเชิงตรรกะที่เท่ากัน การปรับแอสเซทให้เหมาะสมสำหรับบัคเก็ตความหนาแน่นเฉพาะเป็นแนวทางปฏิบัติมาตรฐานในการพัฒนา Android
px เทียบกับหน่วยเชิงตรรกะ: pt, dp, sp
พิกเซลทางกายภาพ (px) แตกต่างจากหน่วยเชิงตรรกะ (pt, dp, sp) ตรงที่พวกมันผูกติดกับความละเอียดของฮาร์ดแวร์และไม่สามารถปรับขนาดได้ ในทางกลับกัน หน่วยเชิงตรรกะทำให้ผู้พัฒนาเป็นนามธรรมจากหน้าจอเฉพาะ ทำให้ค่า 100 pt ค่าเดียวสามารถแสดงด้วยขนาดทางกายภาพที่เท่ากันบนอุปกรณ์ต่าง ๆ
| หน่วย | แพลตฟอร์ม | ขึ้นอยู่กับ PPI | ปรับขนาดได้ | วัตถุประสงค์ |
|---|---|---|---|---|
| px | ทั้งหมด | ใช่ (พิกเซลทางกายภาพ) | ไม่ | ภาพ, บัฟเฟอร์, Metal |
| pt | iOS/macOS | ไม่ (จุดเชิงตรรกะ) | สเกลแฟกเตอร์ | เลย์เอาต์, UIKit, SwiftUI |
| dp | Android | ไม่ (อิสระจากความหนาแน่น) | บัคเก็ตความหนาแน่น | เลย์เอาต์, ขนาดองค์ประกอบ |
| sp | Android | ไม่ (อิสระจากสเกล) | ความหนาแน่น + สเกลแบบอักษร | ข้อความ (textSize) |
สูตรการแปลง: สำหรับ iOS — px = pt × scale (โดยที่ scale = 1, 2 หรือ 3) สำหรับ Android — px = dp × (dpi / 160) การใช้ px โดยตรงในโค้ดหมายความว่าอินเทอร์เฟซจะดูแตกต่างกันบนอุปกรณ์ที่มีความหนาแน่นต่างกัน: บนหน้าจอ PPI สูง องค์ประกอบจะเล็กเกินไป และบน PPI ต่ำ — ใหญ่เกินไป
ทำไมไม่ใช้ px ในโค้ด
การใช้ px ในซอร์สโค้ดของแอปพลิเคชันมือถือเป็นปฏิยานุกรมที่ทำให้อินเทอร์เฟซแสดงผลไม่ถูกต้องบนอุปกรณ์ที่มีความหนาแน่นของพิกเซลต่างกัน เฟรมเวิร์กสมัยใหม่ (UIKit, SwiftUI, Jetpack Compose, XML Layouts) ห้ามหรือไม่แนะนำให้ระบุขนาดเป็นพิกเซล
- iOS UIKit — frame, bounds และ constraint constants ทั้งหมดถูกตั้งค่าในหน่วย pt พิกเซลจะปรากฏเฉพาะในขั้นตอนการแรสเตอร์ผ่าน UIGraphicsImageRenderer
- SwiftUI — ไม่มี API สำหรับการตั้งค่าขนาดในหน่วย px ค่าทั้งหมดเป็น pt ผ่าน Font, frame, padding
- Android XML — หากคุณระบุ px ใน dimens.xml Android Studio จะแสดงคำเตือน lint: "ใช้ `sp` แทน `px` สำหรับขนาดตัวอักษร"
- Jetpack Compose — TextUnit สำหรับข้อความ, Dp สำหรับองค์ประกอบ คอมไพเลอร์ไม่อนุญาตให้ผสมประเภท
การใช้ px ที่ถูกต้องเพียงอย่างเดียวในโค้ดคือการทำงานกับแรสเตอร์: โหลด Bitmap, สร้าง Canvas สำหรับการเรนเดอร์ภาพ, ทำงานกับ Metal หรือ OpenGL ในกรณีเหล่านี้ px คือพิกเซลทางกายภาพของบัฟเฟอร์เป้าหมาย และต้องพิจารณาเพื่อการเรนเดอร์ที่ถูกต้อง ในกรณีอื่นทั้งหมด จะใช้หน่วยเชิงตรรกะ
พิกเซลในภาพและแอสเซท
ภาพและไอคอนถูกจัดเก็บในหน่วยพิกเซล แต่มีเวอร์ชันต่าง ๆ สำหรับหน้าจอแต่ละประเภท iOS ใช้คำต่อท้าย @1x, @2x, @3x ใน Assets.xcassets Android ใช้โฟลเดอร์ drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) ระบบจะเลือกไฟล์ที่ถูกต้องโดยอัตโนมัติตามความหนาแน่นของหน้าจอ
| สเกล iOS | บัคเก็ต Android | ตัวคูณ | ตัวอย่าง (48 pt/dp) |
|---|---|---|---|
| @1x | mdpi (160 dpi) | 1× | 48 × 48 px |
| @2x | xhdpi (320 dpi) | 2× | 96 × 96 px |
| @3x | xxhdpi (480 dpi) | 3× | 144 × 144 px |
| — | xxxhdpi (640 dpi) | 4× | 192 × 192 px |
กฎการจัดส่งแอสเซท: สร้างภาพในรูปแบบเวกเตอร์ (PDF, SVG) และส่งออกเป็นสำเนาแรสเตอร์ในขนาดที่ต้องการ แอสเซทแบบเวกเตอร์สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพและใช้พื้นที่น้อยลงในคลังเก็บ ใน Android ทรัพยากรเวกเตอร์สามารถใช้ได้โดยตรงผ่าน VectorDrawable ซึ่งช่วยลดความจำเป็นในการมีสำเนาแรสเตอร์หลายชุด
คำถามที่พบบ่อย
ความแตกต่างระหว่าง px และ dp คืออะไร?
px — พิกเซลทางกายภาพของหน้าจอ dp (พิกเซลอิสระจากความหนาแน่น) — หน่วยเชิงตรรกะของ Android ที่เท่ากับ 1 px บนหน้าจอที่มีความหนาแน่น 160 dpi ที่ความหนาแน่นต่างกัน dp จะแปลงเป็นจำนวน px ที่แตกต่างกันโดยอัตโนมัติ โดยคงขนาดทางกายภาพขององค์ประกอบไว้
ทำไมไม่สามารถระบุขนาดเป็น px ในโค้ดได้?
เพราะ px ไม่คำนึงถึง ความหนาแน่นของหน้าจอ องค์ประกอบขนาด 100 px จะดูแตกต่างกันบนอุปกรณ์ที่มี PPI ต่างกัน: บนหน้าจอ 326 PPI มันจะใหญ่กว่าบน 460 PPI หน่วยเชิงตรรกะ (dp, pt, sp) แก้ปัญหานี้โดยอัตโนมัติ
PPI คืออะไรและคำนวณอย่างไร?
PPI (พิกเซลต่อนิ้ว) — จำนวนพิกเซลต่อหนึ่งนิ้วของหน้าจอ คำนวณโดยสูตร: PPI = √(w² + h²) / d โดยที่ w และ h คือความละเอียดในหน่วย px, d คือเส้นทแยงมุมในหน่วยนิ้ว ยิ่ง PPI สูงเท่าใด ภาพก็ยิ่งคมชัดมากขึ้นเท่านั้น จอภาพ Retina ของ Apple เริ่มต้นที่ 300 PPI
เมื่อใดที่การใช้ px สมเหตุสมผล?
px สมเหตุสมผลเมื่อทำงานกับบัฟเฟอร์แรสเตอร์: การสร้าง Bitmap, การเรนเดอร์ใน Canvas, การเขียนโปรแกรมเชเดอร์ Metal/OpenGL, การประมวลผลภาพจากกล้อง ในเลย์เอาต์และการพิมพ์ px ไม่ถูกใช้ — ใช้ pt (iOS), dp และ sp (Android) แทน
จะทราบความละเอียดหน้าจอในหน่วย px ได้อย่างไร?
ใน iOS: UIScreen.main.nativeBounds คืนค่าขนาดในหน่วย px ใน Android: DisplayMetrics.widthPixels และ heightPixels จาก context.resources.displayMetrics ใน SwiftUI: GeometryReader คืนค่าขนาดในหน่วย pt สำหรับ px ต้องคูณด้วย displayScale
สรุป
- px — พิกเซลทางกายภาพของหน้าจอ หน่วยพื้นฐานของความละเอียดหน้าจอ
- ความละเอียด — จำนวนพิกเซลในแนวนอนและแนวตั้ง กำหนดที่ระดับฮาร์ดแวร์
- PPI — พิกเซลต่อนิ้ว กำหนดความคมชัดของภาพและความต้องการ GPU
- หน่วยเชิงตรรกะ (pt, dp, sp) ทำให้ px เป็นนามธรรมและปรับอินเทอร์เฟซให้เข้ากับหน้าจอใด ๆ
- ปฏิยานุกรม — การใช้ px ในเลย์เอาต์และการพิมพ์ โดเมนที่ถูกต้องคือบัฟเฟอร์แรสเตอร์
- แอสเซท จัดส่งในความละเอียดต่าง ๆ (@1x/@2x/@3x สำหรับ iOS, density buckets สำหรับ Android)
- รูปแบบเวกเตอร์ (PDF, SVG, VectorDrawable) เหนือกว่าสำเนาแรสเตอร์หลายชุด
เราจะพัฒนาแอปพลิเคชันบนมือถือแบบครบวงจร
IT Sectr สร้างแอปพลิเคชัน iOS และ Android สำหรับสตาร์ทอัพและธุรกิจตั้งแต่ปี 2017 เราจะให้คำแนะนำและเสนอวิธีแก้ปัญหาที่ดีที่สุดแก่คุณ
อ่านเพิ่มเติม