px: bản chất, pixel vật lý trong phát triển di động

px là gì?

px (pixel, phần tử hình ảnh) — phần tử có thể định địa chỉ nhỏ nhất của hình ảnh raster hoặc màn hình. Mỗi pixel lưu trữ thông tin màu sắc trong mô hình RGB (đỏ, lục, lam) với độ sâu màu từ 8 đến 10 bit trên mỗi kênh. Màn hình của các thiết bị di động hiện đại chứa hàng triệu pixel: iPhone 15 Pro — 3 triệu, iPad Pro 12.9" — 5,6 triệu pixel.

Kích thước vật lý của pixel phụ thuộc vào mật độ màn hình (PPI). Trên thiết bị 326 PPI (iPhone 11), một pixel có kích thước khoảng 0,078 mm. Trên màn hình 460 PPI (iPhone 15 Pro) — 0,055 mm. Kích thước vật lý của pixel càng nhỏ thì độ sắc nét của hình ảnh càng cao. Đồng thời, mật độ pixel ảnh hưởng trực tiếp đến hiệu suất kết xuất: nhiều pixel hơn = nhiều việc hơn cho GPU.

Theo Apple, độ phân giải màn hình của iPhone 15 Pro là 1179 × 2556 px ở 460 PPI. Để so sánh, iPhone SE (thế hệ thứ 3) — 750 × 1334 px ở 326 PPI. Sự khác biệt về tổng số pixel là gần 3 lần, điều này giải thích yêu cầu GPU cao hơn trên các mẫu Pro.

Độ phân giải màn hình tính bằng pixel

Độ phân giải màn hình — số lượng pixel vật lý theo chiều ngang và chiều dọc. Nó được viết theo định dạng rộng × cao, ví dụ 1179 × 2556 px. Độ phân giải là một đặc tính cơ bản của màn hình không thể thay đổi bằng phần mềm — nó được cố định ở cấp độ phần cứng và ma trận.

Độ phân giải tính bằng pixel không nên nhầm lẫn với kích thước logic của màn hình (tính bằng pt cho iOS hoặc dp cho Android). Ví dụ, iPhone 14 có kích thước logic 390 × 844 pt, nhưng độ phân giải vật lý là 1170 × 2532 px — lớn hơn chính xác 3 lần, vì hệ số tỷ lệ là 3.

PPI và mật độ pixel

PPI (số pixel trên mỗi inch) — số pixel trên mỗi inch của màn hình. Được tính bằng công thức: PPI = √(rộng² + cao²) / đường chéo. PPI càng cao, các pixel riêng lẻ càng nhỏ và hình ảnh càng mượt. Apple coi màn hình có PPI trên 300 ở khoảng cách xem điển hình là màn hình Retina.

Các loại thiết bị khác nhau có mật độ khác nhau: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Các thiết bị Android phân loại mật độ thông qua Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Các bucket này xác định tài nguyên nào (hình ảnh, dimens) sẽ được tải cho thiết bị.

Tác động của PPI đến phát triển: mật độ càng cao, càng cần nhiều bộ nhớ để lưu trữ kết cấu và hình ảnh. Một pixel trên màn hình 500 PPI yêu cầu bộ nhớ GPU gấp 2,5 lần so với màn hình 320 PPI cho cùng kích thước phần tử logic. Tối ưu hóa nội dung cho các bucket mật độ cụ thể là một thực hành tiêu chuẩn trong phát triển Android.

px so với đơn vị logic: pt, dp, sp

Pixel vật lý (px) khác với đơn vị logic (pt, dp, sp) ở chỗ chúng gắn liền với độ phân giải phần cứng và không được chia tỷ lệ. Ngược lại, đơn vị logic trừu tượng hóa nhà phát triển khỏi màn hình cụ thể, cho phép một giá trị 100 pt hiển thị với cùng kích thước vật lý trên các thiết bị khác nhau.

Công thức chuyển đổi: cho iOS — px = pt × scale (trong đó scale = 1, 2 hoặc 3). Cho Android — px = dp × (dpi / 160). Sử dụng px trực tiếp trong code có nghĩa là giao diện sẽ trông khác nhau trên các thiết bị có mật độ khác nhau: trên màn hình PPI cao, phần tử sẽ quá nhỏ, còn trên PPI thấp — quá lớn.

Tại sao px không được sử dụng trong code

Sử dụng px trong mã nguồn của ứng dụng di động là một phản mẫu dẫn đến hiển thị giao diện không chính xác trên các thiết bị có mật độ pixel khác nhau. Các framework hiện đại (UIKit, SwiftUI, Jetpack Compose, XML Layouts) cấm hoặc không khuyến nghị chỉ định kích thước bằng pixel.

• iOS UIKit — tất cả frame, bounds và constraint constants được đặt bằng pt. Pixel chỉ xuất hiện ở giai đoạn raster hóa thông qua UIGraphicsImageRenderer
• SwiftUI — không có API để đặt kích thước bằng px. Tất cả giá trị đều là pt thông qua Font, frame, padding
• Android XML — nếu bạn chỉ định px trong dimens.xml, Android Studio hiển thị cảnh báo lint: "Sử dụng `sp` thay vì `px` cho kích thước văn bản"
• Jetpack Compose — TextUnit cho văn bản, Dp cho phần tử. Trình biên dịch không cho phép trộn các loại

Việc sử dụng px hợp pháp duy nhất trong code là làm việc với raster: tải Bitmap, tạo Canvas để kết xuất hình ảnh, làm việc với Metal hoặc OpenGL. Trong những trường hợp này, px là pixel vật lý của bộ đệm đích và phải được tính đến để kết xuất chính xác. Trong tất cả các trường hợp khác, đơn vị logic được sử dụng.

Pixel trong hình ảnh và nội dung

Hình ảnh và biểu tượng được lưu trữ bằng pixel, nhưng các phiên bản khác nhau được cung cấp cho mỗi loại màn hình. iOS sử dụng hậu tố @1x, @2x, @3x trong Assets.xcassets. Android sử dụng các thư mục drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Hệ thống tự động chọn tệp chính xác dựa trên mật độ màn hình.

Quy tắc cung cấp nội dung: tạo hình ảnh ở định dạng vector (PDF, SVG) và xuất sang các bản sao raster có kích thước cần thiết. Nội dung vector có thể chia tỷ lệ mà không giảm chất lượng và chiếm ít dung lượng hơn trong kho lưu trữ. Trong Android, tài nguyên vector có thể được sử dụng trực tiếp thông qua VectorDrawable, loại bỏ nhu cầu về nhiều bản sao raster.