Apa Itu Resolusi Gambar: Piksel, PPI, dan DPI Dijelaskan

Kebingungan seputar resolusi terjadi di mana-mana, dan itu wajar. Istilah yang sama dipakai untuk hal yang berbeda tergantung konteksnya: kamera bicara megapiksel, Photoshop bicara PPI, percetakan minta 300 DPI, dan Google menyarankan gambar web punya "resolusi yang cukup untuk layar Retina". Seolah tiap software dan tiap profesi memakai kosakatanya sendiri-sendiri.

Artikel ini menaruh tiap konsep pada tempatnya, menjelaskan bagaimana semuanya saling terkait dan mana yang benar-benar menentukan di tiap situasi nyata.

Apa itu piksel

Piksel adalah kependekan dari picture element — elemen gambar. Inilah satuan terkecil sebuah gambar digital raster: satu titik warna tunggal yang tak bisa dibagi lagi.

Gambar digital adalah kisi persegi panjang berisi piksel. Tiap piksel menyimpan satu nilai warna, umumnya dalam tiga kanal: merah (R), hijau (G), dan biru (B), masing-masing dengan 256 tingkat (0 sampai 255). Hasilnya 256³ = 16,7 juta kemungkinan warna per piksel pada model RGB 8 bit.

Piksel adalah satuan abstrak — ia tidak punya ukuran fisik bawaan. Sebuah piksel tidak besar dan tidak kecil: ia cuma nilai warna dalam sebuah kisi. Seberapa besar ruang yang ditempatinya di dunia nyata sepenuhnya bergantung pada konteks penayangan atau pencetakannya.

Pembedaan inilah biang dari seluruh kebingungan soal resolusi: piksel hidup di ruang abstrak, tanpa ukuran fisik. Setiap kali kita bicara resolusi, sebenarnya kita sedang bicara tentang bagaimana piksel abstrak itu dipetakan ke ruang fisik — entah di layar atau di kertas.

Apa itu resolusi gambar

"Resolusi" adalah istilah dengan dua makna berbeda yang sering tertukar:

• Resolusi sebagai ukuran total dalam piksel: "gambar ini resolusinya 3840×2160 piksel". Di sini resolusi sekadar menyebut berapa piksel lebar dan tingginya. Gambar "beresolusi tinggi" dalam arti ini berarti pikselnya banyak — lebih detail, lebih leluasa diperbesar atau dicetak besar.
• Resolusi sebagai kerapatan: "gambar ini 300 DPI". Di sini resolusi menyebut berapa piksel (atau titik) yang muat dalam satu satuan panjang fisik. Ini soal hubungan antara ruang digital (piksel) dan ruang fisik (sentimeter, inci).

Makna pertama — ukuran total dalam piksel — itulah yang menentukan kualitas dan "besar" sebuah gambar digital. Makna kedua — kerapatan — baru berarti ketika gambarnya harus dipetakan ke ukuran fisik, misalnya saat dicetak.

Apa itu PPI — Pixels Per Inch

PPI berarti piksel per inci (pixels per inch). Ini ukuran kerapatan piksel pada sebuah layar atau gambar digital: berapa banyak piksel yang ada di tiap inci lurus.

Monitor Full HD 24 inci punya resolusi 1920×1080 piksel. Lebar fisik layarnya sekitar 21,5 inci. Jadi: 1920 ÷ 21,5 ≈ 89 PPI. Tiap inci layar itu memuat 89 piksel.

iPhone 15 Pro punya layar 6,1 inci dengan resolusi 2556×1179 piksel. Lebar fisiknya 2,82 inci. Jadi: 2556 ÷ 2,82 ≈ 460 PPI — lebih dari lima kali kerapatan monitor biasa.

PPI sebuah layar menentukan ketajamannya: makin tinggi PPI-nya, makin kecil tiap pikselnya, makin sulit dibedakan mata telanjang, dan makin tajam gambarnya terlihat. "Layar Retina" dari Apple dinamai begitu karena, pada jarak pakai yang wajar, mata manusia tidak lagi sanggup membedakan piksel satu per satu di atas 300 PPI.

Apa itu DPI — Dots Per Inch

DPI berarti titik per inci (dots per inch). Aslinya, istilah ini menunjuk kerapatan titik tinta yang dijatuhkan printer ke kertas. Printer 600 DPI menaruh 600 titik tinta di tiap inci lurus kertasnya.

Dalam percakapan sehari-hari desain grafis, DPI dan PPI dipakai bergantian untuk menyebut kerapatan piksel sebuah gambar yang akan dicetak. Ketika percetakan minta "file 300 DPI", maksudnya gambar itu harus punya 300 piksel untuk tiap inci ukuran cetak akhirnya.

Hubungan antara piksel, PPI/DPI, dan ukuran fisik

Inilah rumus inti yang menjelaskan semuanya:

Ukuran fisik (inci) = Jumlah piksel ÷ Kerapatan (DPI atau PPI)

Contoh dengan satu gambar selebar 3000 piksel:

Perhatikan bahwa gambarnya sendiri tidak berubah — 3000 pikselnya sama di semua kasus. Yang berubah adalah cara piksel itu disebar di ruang fisik. Pada 300 DPI, tiap piksel menempati 1/300 inci. Pada 72 DPI, piksel yang sama menempati 1/72 inci — lebih dari empat kali lebih besar. Itulah kenapa cetakan pada 72 DPI terlihat "pecah": tiap pikselnya sudah cukup besar untuk terlihat satu per satu.

Apa itu megapiksel

Satu megapiksel berarti 1 juta piksel. Kamera 12 megapiksel menghasilkan gambar dengan sekitar 12 juta piksel. Resolusi 12 MP yang lazim adalah 4032×3024 piksel — dan 4032 × 3024 = 12.192.768 piksel, yang setelah dibulatkan jadi "12 megapiksel" seperti yang diiklankan.

Kesimpulan praktisnya: ponsel pintar mana pun keluaran masa kini (12 MP ke atas) resolusinya lebih dari cukup untuk dicetak A4 pada 300 DPI. Kamera ponsel bukan lagi penghambat untuk ukuran cetak yang umum.

Kenapa "72 DPI" telanjur dianggap "untuk web"

Ini salah satu kelaziman tertua sekaligus paling disalahpahami dalam desain digital. Asalnya soal sejarah: pada 1980-an, monitor Macintosh generasi pertama punya sekitar 72 piksel per inci. Sistem Apple memakai 72 PPI sebagai acuan karena memudahkan pencocokan antara layar dan cetak: 1 poin tipografi = 1/72 inci. Photoshop lalu menjadikan 72 PPI sebagai bawaan untuk dokumen layar, dan kebiasaan itu bertahan sampai sekarang.

Monitor masa kini punya kerapatan 90 sampai 140 PPI. iPhone terbaru mencapai 460 PPI. Angka 72 PPI sudah sama sekali usang sebagai penggambaran layar.

Konsekuensi terpentingnya: nilai DPI di metadata sebuah gambar digital sama sekali tidak berpengaruh pada tampilannya di layar. Gambar 1200×800px bermetadata "72 DPI" dan gambar lain bermetadata "300 DPI" tampil persis sama di browser — sebab browser mengabaikan metadata itu dan menampilkan satu piksel file sebagai satu piksel layar. Metadata DPI baru berarti ketika gambarnya dibuka di software yang akan mencetaknya.

Layar Retina dan faktor @2x

Apple memperkenalkan layar Retina lewat iPhone 4 (2010) dengan 326 PPI — kira-kira dua kali lipat PPI monitor pada masa itu. Jalan keluar yang dipakai adalah pembedaan piksel logis vs piksel fisik:

• Piksel logis (CSS pixel): satuan yang dipakai di dalam kode. Gambar yang ditulis width: 300px di CSS menempati 300 piksel logis.
• Piksel fisik: titik yang benar-benar ada di layar. Pada layar Retina @2x, tiap piksel logis digambar oleh 4 piksel fisik (2×2). Pada layar @3x, tiap piksel logis setara 9 piksel fisik.

Akibatnya, gambar raster tampak buram di layar berkerapatan tinggi kalau resolusinya tidak memadai. Jalan keluarnya adalah menyediakan gambar dengan ukuran dua kali (atau tiga kali) ukuran tayangnya:

• Gambar yang tampil selebar 300px → sediakan 600px (@2x) atau 900px (@3x)
• Untuk galeri dengan gambar 800×600px → sediakan file 1600×1200px

Pakai Ubah Ukuran dari ImageTools untuk menyetel ukurannya dengan presisi sebelum diunggah.

Resolusi untuk cetak: menghitung piksel yang dibutuhkan

Berangkat dari rumus Piksel = Ukuran fisik × DPI:

Untuk banner dan materi format besar yang dilihat dari jauh, 150 DPI umumnya sudah cukup. Untuk cetakan berukuran meja (kartu nama, foto, selebaran), standarnya 300 DPI.

Resolusi untuk layar: apa yang benar-benar menentukan

Untuk gambar yang ditujukan ke layar dan web, lupakan DPI. Aturan praktisnya:

1. Sesuaikan ukurannya dengan ruang tampil × faktor layarnya. Untuk banner selebar 1440px di layar @2x, sediakan 2880px. Untuk foto produk yang tampil 600px, sediakan 1200px.
2. Jangan mengunggah gambar lebih besar dari yang dibutuhkan. Foto 4032×3024px untuk ditampilkan 800×600px di situs itu pemborosan — browser mengunduh 12× lebih banyak piksel daripada yang dipakainya.
3. Metadata DPI tidak berpengaruh apa pun di web. Mengekspor "pada 72 DPI" atau "pada 300 DPI" untuk web sama saja — jumlah pikselnyalah yang menentukan.

Kenapa menaikkan DPI sebuah gambar tidak menaikkan kualitasnya

Inilah mungkin salah kaprah yang paling sering terjadi sekaligus paling menjengkelkan. Ada dua cara mengubah DPI di Photoshop (lewat Image → Image Size):

• Tanpa resample: jumlah pikselnya tidak berubah. Photoshop cuma menghitung ulang ukuran cetak fisiknya. Gambar 720×540px pada 72 DPI jadi gambar 720×540px pada 300 DPI — piksel yang sama, di ruang fisik yang lebih sempit. Kualitasnya sama sekali tidak naik.
• Dengan resample: Photoshop membuat piksel baru lewat interpolasi — menghitung nilai antara piksel-piksel yang sudah ada. Hasilnya memang lebih banyak piksel, tapi piksel "karangan". Gambarnya tampak melunak atau buram, tidak pernah lebih tajam. Detail yang memang tidak ada di foto aslinya tidak bisa diciptakan lewat matematika.

Kesimpulannya: satu-satunya cara mendapat piksel asli yang lebih banyak adalah berangkat dari gambar yang memang beresolusi lebih tinggi. Mengubah DPI di Photoshop tidak menciptakan detail — ia hanya menyebar ulang piksel yang sudah ada ke ruang fisik yang berbeda.

Resolusi video: apa kaitannya dengan gambar

Pertanyaan yang sering diajukan