px: esensi, piksel fisik dalam pengembangan mobile

Apa itu px?

px (pixel, picture element) — elemen terkecil yang dapat dialamatkan dari gambar raster atau layar. Setiap piksel menyimpan informasi warna dalam model RGB (merah, hijau, biru) dengan kedalaman warna 8 hingga 10 bit per saluran. Layar perangkat mobile modern mengandung jutaan piksel: iPhone 15 Pro — 3 juta, iPad Pro 12.9" — 5.6 juta piksel.

Ukuran fisik piksel tergantung pada kerapatan layar (PPI). Pada perangkat dengan 326 PPI (iPhone 11) satu piksel berukuran sekitar 0.078 mm. Pada layar dengan 460 PPI (iPhone 15 Pro) — 0.055 mm. Semakin kecil ukuran fisik piksel, semakin tinggi ketajaman gambar. Kerapatan piksel secara langsung memengaruhi performa rendering: lebih banyak piksel = lebih banyak kerja untuk GPU.

Menurut data Apple, resolusi layar iPhone 15 Pro adalah 1179 × 2556 px pada kerapatan 460 PPI. Sebagai perbandingan, iPhone SE (3rd gen) — 750 × 1334 px pada 326 PPI. Perbedaan jumlah total piksel hampir 3 kali lipat, yang menjelaskan persyaratan GPU yang lebih tinggi pada model Pro.

Resolusi layar dalam piksel

Resolusi layar — jumlah piksel fisik secara horizontal dan vertikal. Ditulis dalam format lebar × tinggi, misalnya 1179 × 2556 px. Resolusi adalah karakteristik fundamental layar yang tidak dapat diubah secara programatis — ditetapkan pada tingkat perangkat keras dan matriks.

Resolusi dalam piksel tidak boleh disamakan dengan ukuran logis layar (dalam pt untuk iOS atau dp untuk Android). Misalnya, iPhone 14 memiliki ukuran logis 390 × 844 pt, tetapi resolusi fisik 1170 × 2532 px — tepat 3 kali lebih besar, karena faktor skala sama dengan 3.

PPI dan kerapatan piksel

PPI (pixels per inch) — jumlah piksel per inci layar. Dihitung dengan rumus: PPI = √(lebar² + tinggi²) / diagonal. Semakin tinggi PPI, semakin halus piksel individual dan semakin mulus gambar terlihat. Apple menganggap layar dengan PPI di atas 300 pada jarak pandang tipikal sebagai layar Retina.

Kategori perangkat yang berbeda memiliki kerapatan yang berbeda: jam tangan Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Perangkat Android mengklasifikasikan kerapatan melalui Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Ember ini menentukan sumber daya mana (gambar, dimens) yang akan dimuat untuk perangkat tersebut.

Pengaruh PPI pada pengembangan: semakin tinggi kerapatan, semakin banyak memori yang diperlukan untuk menyimpan tekstur dan gambar. Satu piksel pada layar dengan 500 PPI memerlukan memori GPU 2.5 kali lebih banyak daripada layar dengan 320 PPI pada ukuran logis elemen yang sama. Optimalisasi aset untuk ember kerapatan tertentu adalah praktik standar dalam pengembangan Android.

px vs unit logis: pt, dp, sp

Piksel fisik (px) berbeda dari unit logis (pt, dp, sp) karena mereka terikat pada resolusi perangkat keras dan tidak berskala. Unit logis, sebaliknya, mengabstraksi pengembang dari layar tertentu, memungkinkan nilai 100 pt yang sama ditampilkan dengan ukuran fisik yang identik pada perangkat yang berbeda.

Rumus konversi: untuk iOS — px = pt × scale (di mana scale = 1, 2, atau 3). Untuk Android — px = dp × (dpi / 160). Penggunaan langsung px dalam kode berarti antarmuka akan terlihat berbeda pada perangkat dengan kerapatan berbeda: pada layar dengan PPI tinggi elemen akan terlalu kecil, dan pada PPI rendah — terlalu besar.

Mengapa px tidak digunakan dalam kode

Penggunaan px dalam kode sumber aplikasi mobile — antipola yang menyebabkan tampilan antarmuka yang tidak benar pada perangkat dengan kerapatan piksel berbeda. Framework modern (UIKit, SwiftUI, Jetpack Compose, XML Layouts) melarang atau tidak merekomendasikan penentuan ukuran dalam piksel.

• iOS UIKit — semua frame, bounds, dan constraint constants ditetapkan dalam pt. Piksel hanya muncul pada tahap rasterisasi melalui UIGraphicsImageRenderer
• SwiftUI — tidak ada API untuk menetapkan ukuran dalam px. Semua nilai adalah pt melalui Font, frame, padding
• Android XML — jika Anda menentukan px di dimens.xml, Android Studio menampilkan peringatan lint: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit untuk teks, Dp untuk elemen. Kompilator tidak mengizinkan pencampuran tipe

Satu-satunya penggunaan px yang sah dalam kode — bekerja dengan raster: memuat Bitmap, membuat Canvas untuk rendering gambar, bekerja dengan Metal atau OpenGL. Dalam kasus ini px — piksel fisik dari buffer target dan harus diperhitungkan untuk rendering yang benar. Dalam semua kasus lainnya, unit logis digunakan.

Piksel dalam gambar dan aset

Gambar dan ikon disimpan dalam piksel, tetapi untuk setiap tipe layar disediakan versi yang berbeda. iOS menggunakan sufiks @1x, @2x, @3x di Assets.xcassets. Android menggunakan folder drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Sistem secara otomatis memilih file yang tepat berdasarkan kerapatan layar.

Aturan penyediaan aset: buat gambar dalam format vektor (PDF, SVG) dan ekspor ke salinan raster dengan ukuran yang diperlukan. Aset vektor berskala tanpa kehilangan kualitas dan memakan lebih sedikit ruang di repositori. Di Android, sumber daya vektor dapat digunakan langsung melalui VectorDrawable, yang menghilangkan kebutuhan akan banyak salinan raster.