72 PPI Web Resolusi Mitos

Ditulis oleh Steve Patterson. Jika Anda sudah berada di komputer dan gambar digital untuk sementara waktu, terutama jika Anda seorang desainer web atau fotografer penerbitan foto Anda online, Anda sudah tidak diragukan lagi mendengar bahwa resolusi yang benar untuk gambar yang ditampilkan di web, atau di layar komputer secara umum, adalah 72 pixel per inch (ppi). Anda mungkin pernah mendengar itu mengatakan bahwa sementara 72 ppi benar untuk gambar yang ditampilkan pada Mac, PC berbasis Windows membutuhkan resolusi diatur ke 96 ppi. Ada yang bilang itu "ppi" (pixel per inci), yang lain mengklaim itu "dpi" (titik per inci), dan semuanya akan menjadi sangat membingungkan jika bukan karena satu fakta kecil - itu semua omong kosong! Dalam tutorial ini, kita akan mempelajari mengapa ada hanya ada hal seperti web standar atau resolusi layar dan mengapa, jika gambar Anda ditakdirkan untuk web, Anda tidak perlu khawatir tentang resolusi gambar sama sekali!

Sejarah Little ...

Asal usul resolusi layar ppi 72 tanggal sepanjang jalan kembali ke pertengahan 1980-an ketika Apple merilis Macintosh komputer pertama. Komputer-komputer ini termasuk layar built-in 9 inci dengan resolusi layar 72 pixel per inci. Mengapa piksel per inci 72? Itu karena layar Macintosh secara khusus dirancang untuk bekerja dalam harmoni yang sempurna dengan Apple imagewriter printer, yang memiliki resolusi cetak 144 titik per inci - persis dua kali resolusi layar. Hal ini membuat mudah untuk skala tampilan layar ke halaman yang dicetak, yang berarti bahwa teks dan grafis bisa ditinjau pada layar pada ukuran yang tepat mereka akan muncul bila dicetak. Kemudian, seperti Apple mulai membuat layar yang lebih besar untuk Macintosh, mereka memastikan untuk menjaga resolusi layar diatur ke sama 72 pixel per inci sehingga pengguna akan selalu melihat preview di layar akurat dari dokumen tercetak (asalkan mereka menggunakan printer imagewriter).
Tapi 72 pixel per inch resolusi layar adalah standar saja dengan Apple, dan itu tidak berlangsung. Perusahaan pihak ketiga yang menjual monitor untuk Macintosh tidak menempel standar, dan juga tidak bersaing monitor PC. Hari ini, hampir tiga dekade kemudian, teknologi telah sangat meningkat dan hari-hari layar dengan resolusi hanya 72 ppi sudah lama berlalu. Bahkan Apple, perusahaan yang memulai semuanya, sekarang menjual display mereka dengan resolusi yang lebih tinggi. Tidak ada yang membuat 72 ppi layar lagi. Tidak ada yang menggunakan 72 ppi layar lagi. Namun, meskipun itu teknologi lama jauh di belakang kami, kami masih memiliki seluruh banyak orang yang terus percaya bahwa kita perlu untuk mengatur resolusi gambar untuk 72 piksel per inci di Photoshop sebelum meng-upload ke web. Kebanyakan orang berpikir alasannya adalah agar gambar akan ditampilkan dengan benar pada layar, jadi mari kita mulai hal off dengan belajar cara mudah untuk membuktikan bahwa monitor komputer Anda, bersama dengan setiap monitor komputer modern, sebenarnya memiliki resolusi lebih tinggi dari 72 ppi.

Puting 72 PPI Standard Untuk Pengujian

Seperti orang lain hari ini, layar komputer Anda (apakah itu monitor mandiri, sistem all-in-one seperti iMac, atau bagian dari sebuah laptop) memiliki resolusi layar lebih tinggi dari 72 pixel per inci, dan Anda tidak memiliki mengambil kata saya untuk itu. Anda dapat dengan mudah menguji sendiri. Yang Anda butuhkan adalah sebuah penggaris atau pita pengukur. Sekarang, ketika toko menjual Anda monitor komputer, mereka biasanya memberitahu Anda ukuran berdasarkan lebar diagonal, dengan beberapa ukuran umum adalah 17 inci, 19 inci, 24 inci, dan sebagainya. Itu bagus, tapi untuk uji kami di sini, kita tidak perlu peduli tentang jumlah itu. Apa yang kita perlu mencari tahu adalah lebar aktual, dalam inci, layar Anda. Untuk melakukan itu, cukup ambil penggaris atau pita pengukur dan mengukur area layar Anda dari kiri ke kanan. Pastikan Anda hanya berukuran area layar itu sendiri. Jangan menyertakan salah satu perbatasan di sekitar layar. Kita perlu lebar aktual layar itu ( monitor komputer foto dari Shutterstock):

Ukur lebar layar Anda (tidak termasuk batas luar).

Setelah Anda diukur lebar, hal lain yang Anda butuhkan untuk memastikan adalah bahwa monitor Anda diatur ke resolusi layar asli, yang merupakan jumlah aktual piksel layar dapat menampilkan dari kiri ke kanan dan dari atas ke bawah. Sebagai contoh, sebuah monitor dengan resolusi layar asli 1920 x 1080 (sering disebut hari ini sebagai "full HD") berisi 1920 piksel dari kiri ke kanan dan 1080 piksel dari atas ke bawah. Saat ini saya menggunakan monitor dengan resolusi layar asli 2560 x 1440, tapi laptop saya memiliki resolusi layar asli 1920 x 1200 sehingga tidak bervariasi, yang berarti Anda harus mengetahui resolusi asli layar monitor khusus Anda dan pastikan itu apa yang Anda miliki monitor diatur dalam opsi tampilan sistem operasi Anda.
Sekarang Anda telah diukur lebar aktual layar Anda dan Anda sudah memastikan monitor Anda berjalan pada resolusi layar asli, untuk mencari tahu apa resolusi layar sebenarnya adalah (pixel per inci), hanya mengambil angka pertama dari pribumi menampilkan resolusi, yang memberitahu Anda lebar layar Anda dalam pixel, dan membaginya dengan lebar layar dalam inci. Misalnya, resolusi layar asli saya adalah 2560 x 1440, jadi saya akan mengambil nomor pertama, 2560, yang merupakan lebar layar dalam pixel, dan aku akan membaginya dengan lebar dalam inci, yang dalam kasus saya adalah 23,4 (atau cukup dekat, anyway). Menggunakan sistem operasi saya berguna built-in kalkulator, 2560 ÷ 23,4 = 109,4, yang saya akan melengkapi ke 109. Jadi, hanya dari tes ini cepat dan sederhana, saya telah mengkonfirmasi bahwa resolusi layar saya adalah 109 piksel per inci, tidak 72 pixel per inci. Tes Anda sendiri dengan layar Anda dapat memberikan hasil yang berbeda dari saya, tetapi jika Anda masih menggunakan salah satu komputer Macintosh asli dari pertengahan '80-an, maka akan banyak lebih tinggi dari 72 ppi.
Jika Anda suka, Anda dapat melakukan hal yang sama dengan ketinggian layar Anda. Hanya mengambil penggaris atau pita pengukur dan mengukur tinggi yang sebenarnya layar dalam inci (sekali lagi menghindari daerah perbatasan sekitarnya):

Mengukur tinggi layar Anda (tidak termasuk batas luar).

Kemudian, mengambil nomor kedua dari resolusi asli layar monitor anda, yang memberi Anda tinggi dalam pixel, dan membaginya dengan tinggi dalam inci. Sekali lagi, resolusi layar asli saya adalah 2560 x 1440 jadi saya akan mengambil nomor kedua, 1440, dan membaginya dengan tinggi saya diukur layar yang 13,2 inci. Menggunakan kalkulator saya, 1440 ÷ 13,2 = 109,09 yang lagi aku akan melengkapi ke 109. Seperti yang bisa kita lihat, Anda harus mendapatkan cukup banyak hasil yang sama baik menggunakan lebar atau tinggi layar Anda. Dalam kasus saya, mereka berdua bekerja untuk 109 pixel per inci, tidak 72 pixel per inci.
Sebagai perbandingan, mari kita periksa resolusi layar yang sebenarnya dari laptop saya. Ini adalah MacBook Pro (dibuat tentu saja oleh Apple, perusahaan yang memberi kami asli 72 ppi standar bertahun-tahun yang lalu). MacBook Pro memiliki layar resolusi native 1920 x 1200, jadi hanya seperti yang saya lakukan sebelumnya, saya akan mengambil nomor pertama, 1920, yang memberi saya layar lebar dalam pixel, dan aku akan membaginya dengan lebar layar dalam inci, yang dalam hal ini adalah 14,4. Jadi, 1920 ÷ 14,4 = 133,3, yang saya akan melengkapi dengan 133 pixel per inci. Itu jauh lebih tinggi dari 72 dan bahkan lebih tinggi dari monitor mandiri saya. Saya akan melakukan hal yang sama dengan ketinggian, mengambil tinggi dalam piksel (1200) dan membaginya dengan tinggi dalam inci (9). 1200 ÷ 9 = 133,3, lagi dibulatkan menjadi 133 pixel per inci.
Dua layar yang berbeda, masing-masing dengan dua resolusi layar yang berbeda (109 ppi dan 133 ppi), keduanya jauh lebih tinggi dari 72 ppi yang menurut banyak orang saat ini, tetap resolusi standar industri untuk melihat gambar di web dan di layar. Jika layar saya, layar layar Anda dan orang lain memiliki resolusi lebih tinggi dari 72 ppi, belum lagi fakta bahwa kedua layar saya memiliki resolusi yang sangat berbeda satu sama lain dan layar Anda mungkin memiliki resolusi yang berbeda juga, maka jelas, tidak hanya tidak ada standar resmi lagi untuk resolusi layar, tetapi bahkan jika ada, akan ada lagi 72 ppi. Hari-hari, seperti komputer Macintosh asli itu dirancang untuk, adalah sejarah.

Resolusi gambar Mempengaruhi Ukuran Cetak, Bukan Ukuran Layar

Jika fakta bahwa monitor komputer saat ini semua memiliki resolusi layar lebih tinggi dari 72 ppi belum meyakinkan Anda bahwa tidak ada hal seperti itu lagi sebagai ppi layar resolusi standar 72, inilah fakta penting lainnya untuk dipertimbangkan. Jika sebelumnya Anda membaca kami Resolusi Gambar, Dimensi Pixel dan Dokumen Ukuran tutorial, Anda sudah tahu bahwa resolusi gambar sama sekali tidak ada hubungannya dengan bagaimana gambar Anda muncul pada layar Anda. Bahkan, gambar digital, dengan sendirinya, tidak memiliki resolusi yang melekat sama sekali. Ini hanya piksel. Ia memiliki sejumlah piksel dari kiri ke kanan dan sejumlah dari atas ke bawah. Lebar dan tinggi dari suatu gambar, dalam piksel, dikenal sebagai dimensi pixel, dan itu semua layar komputer peduli.
Ukuran di mana sebuah gambar muncul di layar Anda hanya bergantung pada dua hal - dimensi pixel dari gambar dan resolusi layar layar Anda. Selama Anda telah mengatur layar Anda untuk resolusi layar asli seperti yang kita bahas sebelumnya, maka gambar akan ditampilkan pixel-pixel untuk. Dengan kata lain, setiap pixel dalam gambar akan mengambil tepat satu piksel pada layar Anda. Misalnya, 640 × 480 piksel citra akan mengisi 640 × 480 piksel daerah layar Anda. 800 pixel-lebar banner di website akan muncul 800 pixel pada layar. Tidak lebih, tidak kurang. Dan tidak peduli apa yang Anda mengatur resolusi gambar untuk di Photoshop, apakah itu 72 ppi, 300 ppi atau 3000 ppi, itu tidak akan berpengaruh sama sekali pada seberapa besar atau kecil gambar muncul di layar.
Itu karena resolusi gambar hanya mempengaruhi satu hal - ukuran gambar ketika itu dicetak. Dengan menetapkan resolusi di Photoshop, kita memberitahu printer, bukan layar, berapa banyak piksel dalam gambar untuk menekan ke inci kertas. Semakin banyak piksel yang Anda meremas ke setiap inci kertas, semakin kecil gambar akan muncul bila dicetak. Dan secara umum, semakin banyak piksel Anda mencetak per inci, semakin tinggi kualitas cetak .
Kita dapat dengan mudah mengetahui seberapa besar foto akan dicetak berdasarkan resolusi gambar tertentu. Cukup mengambil lebar foto dalam piksel dan membaginya dengan resolusi gambar Anda, kemudian mengambil ketinggian foto dalam piksel dan membaginya dengan resolusi gambar juga. Jika kita mengambil 640 x 480 pixel gambar, sebagai contoh, dan mengatur resolusi sampai 72 ppi di Photoshop, maka kita dapat membagi lebar dan tinggi foto dengan resolusi untuk menentukan bahwa mereka akan mencetak di atas kertas sekitar 8,9 x 6,7 inci. Jika kita meningkatkan resolusi di Photoshop untuk, katakanlah, 240 ppi, yang merupakan resolusi cetak lebih umum, sekali lagi jika kita melakukan matematika, pembagian lebar pixel dan tinggi 240 ppi oleh, kita tahu bahwa foto akan dicetak pada ukuran dari 2,7 x 2 inci, yang jauh lebih kecil daripada jika kita telah dicetak pada 72 ppi tetapi kualitas cetak secara keseluruhan akan jauh lebih baik. Tapi yang lebih penting untuk dipahami di sini adalah bahwa dengan mengubah resolusi, kita tidak, dengan cara apapun, mempengaruhi penampilan gambar pada layar.
Untuk melihat lebih jelas bagaimana resolusi mempengaruhi ukuran cetak dan bukan ukuran layar, inilah gambar saya telah terbuka di Photoshop. Pria kecil ini juga telah mencoba untuk memahami semua ini 72 ppi web hal resolusi, tapi sepertinya ia mungkin overthinking itu sedikit ( pemikiran anak foto dari Shutterstock):

Resolusi gambar adalah benar-benar tidak rumit ini, tapi jelas A untuk usaha.

Aku akan membuka Image kotak dialog Photoshop Ukuran dengan pergi ke menu Image di Menu Bar di bagian atas layar dan memilih Ukuran Gambar:

Pergi ke Image> Ukuran Gambar.

Di bagian atas kotak dialog Image Size adalah bagian Dimensi Pixel yang memberitahu kita lebar dan tinggi gambar dalam piksel. Di sini kita dapat melihat bahwa foto saya memiliki baik lebar dan tinggi 500 piksel, sehingga ukuran yang layak untuk ditampilkan di web. Ini adalah satu-satunya bagian dari kotak dialog Image Size bahwa layar komputer Anda peduli tentang - dimensi pixel gambar sebenarnya:

Bagian Dimensi Pixel menunjukkan lebar dan tinggi dalam piksel.

Di bawah dimensi pixel adalah bagian Ukuran Dokumen yang memberitahu kita seberapa besar gambar saat akan muncul di atas kertas jika kita mencetaknya. Bagian ini berurusan secara eksklusif dengan ukuran cetak dan tidak memiliki efek sama sekali pada tampilan gambar di layar. Hal ini juga terjadi menjadi rumah bagi pilihan Resolusi yang sangat penting (alasan kita semua di sini!), Yang masuk akal karena resolusi mempengaruhi ukuran cetak, bukan ukuran layar. Seperti yang kita lihat, Photoshop telah pergi ke depan dan mengatur resolusi foto saya ke 72 pixel per inch (ya, bahkan Photoshop memberikan kontribusi ke 72 ppi mitos), dan langsung di atas opsi Resolusi, dalam Lebar dan Tinggi kotak, kita dapat melihat bahwa pada 72 ppi, saya 500 x 500 pixel foto akan dicetak pada 6,944 x 6,944 inci di atas kertas (500 ÷ 72 = 6,944):

Bagian Ukuran Dokumen menunjukkan ukuran cetak berdasarkan resolusi saat ini. Hal ini tidak berpengaruh pada ukuran layar.

Mari kita lihat apa yang terjadi jika saya meningkatkan resolusi gambar. Sebelum saya melakukan itu, meskipun, aku akan cepat hapus centang pada Gambar Resample pilihan di dekat bagian bawah kotak dialog sehingga gambar membuat dimensi pixel aslinya ketika saya mengubah resolusi:

Centang opsi Gambar Resample.

Dengan Resample Gambar dicentang, saya akan meningkatkan resolusi dari 72 pixel per inci sampai 240 pixel per inci. Kita bisa melihat di bagian Dimensi Pixel di bagian atas yang meningkatkan resolusi belum mengubah dimensi pixel yang sebenarnya. Ini masih 500 x 500 piksel, yang berarti masih akan mengambil x daerah pixel 500 500 pada layar. Tetapi pada 240 ppi, sekarang akan mencetak pada kertas dengan ukuran hanya 2,083 x 2,083 inci (500 ÷ 240 = 2,083). Mengubah resolusi berubah ukuran cetak foto, tapi tidak ada yang lain:

Gambar sekarang akan mencetak lebih kecil tapi akan tetap sama persis 500 x 500 ukuran piksel pada layar.

Aku lagi akan meningkatkan resolusi gambar, kali ini untuk sesuatu yang gila seperti 500 pixel per inci, hanya untuk membuat matematika sangat mudah. A 500 x 500 piksel gambar, set ke resolusi 500 piksel per inci, akan mencetak sebagai 1 x gambar 1 inci di atas kertas (500 ÷ 500 = 1). Sekali lagi, dimensi pixel gambar sebenarnya tidak berubah. Bahkan pada 500 ppi, gambar saya akan muncul tidak lebih besar atau lebih kecil pada layar yang akan pada 72 ppi, atau 240 ppi, atau pada resolusi apapun karena masih 500 x gambar 500 piksel terlepas dari pengaturan resolusi, dan dimensi pixel yang semua layar komputer Anda peduli tentang:

Pada 500 ppi, gambar akan dicetak sangat kecil memang tapi masih akan muncul sebagai 500 x 500 pixel gambar pada layar.

Akhirnya, di sini adalah perbandingan sisi-by-side gambar seperti yang muncul di semua tiga dari keputusan di atas. Aku sudah membuat gambar lebih kecil (itu kini hanya 200 x 200 piksel), jadi saya bisa cocok untuk semua tiga versi samping satu sama lain, tapi versi pertama di sebelah kiri disimpan pada 72 ppi. Versi di tengah diselamatkan pada 240 ppi, dan versi di sebelah kanan disimpan pada 500 ppi:

A 72 ppi (kiri), 240 ppi (tengah) dan 500 ppi (kanan) versi gambar.

Seperti kita dapat melihat dengan jelas, resolusi tidak berpengaruh sama sekali pada bagaimana gambar tampak pada layar. Semua tiga versi masing-masing mengambil ruang persis 200 x 200 piksel terlepas dari pengaturan resolusi. Kualitas setiap versi juga persis sama. Setiap versi akan mencetak pada ukuran yang sangat berbeda karena pengaturan resolusi yang berbeda, tapi itu tidak membuat perbedaan apapun dengan ukuran layar atau kualitas gambar.
Sementara itu diragukan bahwa 72 ppi web dan resolusi layar omong kosong akan pergi dalam waktu dekat, saya berharap tutorial ini setidaknya telah membuat lebih mudah untuk melihat mengapa hal itu, pada kenyataannya, omong kosong pada saat ini. Monitor komputer hari ini semua memiliki resolusi layar lebih tinggi dari 72 ppi, dan pilihan resolusi gambar di Photoshop hanya mempengaruhi ukuran cetak foto itu, bukan ukuran layar. Foto apapun dengan dimensi pixel cukup kecil untuk ditampilkan di web akan terlalu kecil bagi siapa saja untuk men-download dan mencetak versi berkualitas baik dengan ukuran yang berguna, jadi dengan semua alasan ini dalam pikiran, jika foto Anda hanya akan dilihat di layar, apakah itu di web, di email, atau apa pun yang mungkin terjadi, tidak ada cukup alasan logis mengapa Anda akan perlu untuk mengatur resolusi sampai 72 ppi di Photoshop. Kecuali Anda mencetak foto, Anda tidak perlu khawatir tentang resolusi gambar sama sekali.
Dan ada yang kita miliki!