Apakah wajib menyimpan gambar di 72DPI untuk desain web?

Saya telah merancang spanduk web selama lebih dari satu tahun tetapi tidak pernah mempertimbangkan DPI.

Saya menggunakan 72DPI default, tetapi sekarang saya ingin tahu apakah perlu membuat desain web di 72DPI? Bagaimana jika kita menggunakan lebih dari itu, misalnya 200DPI?

Saya tahu bahwa lebih banyak DPI berarti lebih banyak gambar berkualitas dan itulah sebabnya saya ingin menggunakan DPI tinggi, tetapi baru-baru ini saya membaca di suatu tempat bahwa untuk spanduk web kita harus menggunakan 72DPI. Saya hanya ingin tahu apakah itu wajib dan apakah itu berdampak negatif dalam aspek apa pun?

Pengaturan PPI (Pixels Per Inch) tidak digunakan dalam gambar web. Gambar di web, tampilan retina atau lainnya, ditampilkan oleh dimensi pikselnya (lebar dan tinggi), bukan pengaturan PPI / DPI. Bahkan, banyak gambar web seperti png, gif, jpg bahkan mungkin tidak menyimpan pengaturan ppi dalam data internal mereka dan bergantung pada pengaturan lebar dan tinggi.

Gambar 100 piksel x 100 piksel ditampilkan di web terlepas dari pengaturan PPI / DPI apa pun.

Inilah sebabnya mengapa gambar untuk tampilan retina disimpan pada ukuran 2x, daripada pengaturan ppi meningkat. The kepadatan pixel display retina lebih tinggi namun mereka masih menampilkan gambar pada apa pun negara layar lebar dan tinggi dari suatu gambar tidak didasarkan pada pengaturan PPI.

Pada kenyataannya, monitor yang menggunakan kerapatan piksel 72ppi belum pernah terlihat sejak awal hingga pertengahan 1980-an. 72ppi belum akurat selama hampir 30 tahun. Bahkan, itu tidak pernah akurat untuk sistem Windows karena Windows menggunakan default 96ppi untuk kerapatan piksel.

Tidak percaya padaku Cobalah sendiri. Buat dua gambar di Photoshop 100 piksel dengan 100 piksel. Buat satu gambar 72ppi dan 300ppi lainnya. Simpan keduanya untuk web .. apakah mereka berbeda di browser web? Nggak. Mereka berdua 100px dengan 100px gambar.

Pengaturan DPI (Dots Per Inch) hanya berlaku saat mencetak gambar. DPI tidak ada kaitannya dengan gambar yang ditujukan untuk layar. DPI mengacu pada jumlah titik / titik tinta yang akan ditempatkan oleh pers dalam satu inci. Karena tidak ada tampilan di Bumi yang menggunakan tinta, DPI adalah istilah yang salah digunakan untuk apa pun yang terkait dengan layar tampilan.

Sadarilah beberapa produsen ponsel memilih untuk menggunakan istilah DPIx atau xDPI yang terkadang disingkat menjadi DPI sederhana. Ini bukan bentuk tradisional dari akronim dan pabrikan telah cukup memperkeruh air. Jika Anda melihat DPI dalam kaitannya dengan resolusi layar seluler, mereka berbicara tentang PPI yang efektif dan tidak benar - benar merujuk Dots Per Inch. Akronim yang lebih tepat adalah xPPI atau PPIx karena layar ponsel, seperti semua tampilan, menggunakan piksel dan bukan tinta.

Tidak ada bedanya pengaturan ppi apa yang Anda gunakan untuk gambar web. Lebar (piksel) dan tinggi (piksel) gambar yang penting.

Ketika bekerja dengan banyak gambar, penting untuk tetap konsisten. Anda akan ingin semua gambar Anda diatur pada ppi yang sama untuk menghindari pengubahan ukuran dan penskalaan aspek jika Anda memindahkan potongan di antara gambar. Apakah Anda memilih untuk menggunakan 72, 96, 200 atau 145,8 ppi tidak masalah, tetapi semua gambar harus diset sama.

Meskipun PPI jelas tidak masalah - dimensi pikselnya yang penting untuk desain web dan aplikasi, Anda harus sangat berhati-hati dalam menggunakan aplikasi desain dan menggabungkan pengaturan PPI. Inilah alasannya:

Namun, jika Anda berencana untuk menggunakan Photoshop dan kerapatan piksel yang berbeda untuk setiap dokumen, menyeret lapisan dan menyalin gaya lapisan antara gaya dokumen skala lapisan - menyeret lapisan dari dokumen iPhone Retina 326PPI ke dokumen Retina iPad 264PPI berarti semua gaya lapisan akan diskalakan sebesar 20% (kemudian dibulatkan ke bilangan bulat terdekat). Dan itu mungkin bukan yang Anda inginkan. Juga, Pratinjau OS X akan menampilkan gambar 72PPI pada ukuran yang tepat, tidak peduli bagaimana Anda mengaturnya.

Piksel per inci hanyalah sebuah tag

Karena alasan inilah saya menetapkan 72PPI untuk semua dokumen desain saya, dan saya sarankan Anda melakukan hal yang sama. Untuk mengubah kerapatan piksel dokumen Photoshop Anda tanpa mengubah ukuran data gambar, buka dialog Ukuran Gambar, hapus centang Ubah Ukuran Gambar dan ketikkan kerapatan piksel yang diinginkan.

Saya akan menjelaskan secara terperinci apa arti "dpi", melalui contoh; dengan itu, Anda mungkin hanya melihat jawabannya sendiri. :

Singkatnya, gambar Anda terdiri dari titik-titik warna, yang bersebelahan. Tetapi tidak memiliki ukuran dalam arti fisik.

Sekarang, ketika Anda menunjukkan gambar di layar, Anda biasanya hanya akan menempatkan titik warna gambar ke dalam raster persegi panjang berwarna yang dapat ditampilkan layar Anda. Perhatikan bahwa keduanya, apa yang saya sebut "titik" dan persegi panjang di sini, disebut "piksel" - tetapi dengan melihat lebih dekat, keduanya adalah sesuatu yang berbeda.

Jika kita menampilkan gambar dengan cara alami ini di layar, kita dapat mengukur ukurannya.
Misalnya, gambar kami selebar 500 titik, kami menempatkannya dalam persegi panjang berwarna di layar, dan melihat lebarnya 5 inci. Lalu, kami memiliki 100 persegi panjang per inci, menunjukkan 100 titik kami per inci.
Artinya, gambar kita memiliki 100dpi di layar.
Tapi kami bahkan tidak melihat nilai dpi di file gambar kami!

Sekarang, jika kita melihat file kita, itu mungkin mengatakan gambarnya 200dpi! Nilai dpi adalah tentang berapa banyak titik warna yang terlihat per inci dari lebar atau tinggi layar. Jadi, nilai dpi dalam gambar memberi tahu kita bahwa gambar kita akan selebar 2,5 inci saat ditampilkan - sebagai janji, bukan sebagai fakta .

Ketika kami menetapkan titik-titik gambar ke layar, kami bahkan tidak peduli tentang itu, karena kami baru saja menampilkannya, dan mengukur dpi fisik aktual dari representasi layar dari gambar.
Jadi, seperti yang Anda lihat, janji itu salah besar . Dan tidak ada yang peduli! Karena itu tidak relevan.

File itu menjanjikan - dengan mengatakan 200dpi - itu akan "selebar 2,5 inci saat ditampilkan". Lalu, kami menggunakan layar yang menunjukkan lebar 5 inci - kami bisa tahu itu karena kami tahu layar sebenarnya.
Biasanya kita bahkan tidak tahu apa yang akan digunakan pengguna akhir sebagai tampilan, jadi kita bisa menebaknya saja,

Jadi, sekarang masuk akal:

• Kami tidak tahu dpi gambar, ditampilkan pada layar, akan miliki, karena kami tidak tahu layar.
• Tapi kami punya ide bagaimana tampilannya, "kira-kira seukuran ini ... ok, maka kita membutuhkan sekitar 200dpi atau lebih." dan menyimpan "200dpi" dalam file
• Kemudian, kami melihat layar dan mengukur bahwa itu, pada kenyataannya, 100dpi;

Dan, tidak hanya ada satu layar di mana gambar dapat ditampilkan - ukurannya bisa berbeda, jadi bahkan tidak mungkin untuk mengetahui nilai dpi nyata saat membuat file gambar.

Lihat juga jawaban saya tentang Apa itu "Pixel"? .

Langsung ke pertanyaan, berdasarkan hal di atas:

Ketika Anda menentukan dpi dalam file gambar, itu tidak langsung mencerminkan kualitas tampilan gambar pada akhirnya.
Tetapi dapat digunakan untuk berkomunikasi tentang kualitas gambar - dalam hal maksud: Anda dapat mengatakan "Saya ingin gambar ini ditampilkan di layar 200dpi".

Jika saya ingin menampilkan gambar ini, saya dapat berhati-hati dan mencari untuk menemukan layar 200dpi; atau mungkin saya hanya menggunakan layar 75dpi lama yang mungkin ada di meja saya. Gambar akan cukup besar, saya harus menggulir - tapi itu masalah saya, dan: Anda bahkan tidak akan tahu apa yang benar-benar digunakan - nilai 200dpi tidak mengontrol kualitas gambar - itu hanya mengkomunikasikan cara menampilkannya "tepat cara "jika aku peduli.

Saya baru saja menguji dua salinan gambar yang saya buat dengan Photoshop. Namun saya menetapkan satu di 72 dpi dan yang lain di 720 dpi untuk melihat apakah ada browser yang saya gunakan akan membuat mereka ukuran yang berbeda di layar.

Pada semua browser kecuali satu, mereka terlihat identik - ukuran-bijaksana dan kualitas-bijaksana. Namun, dengan penggunaan Google Chrome, yang dibuat pada 72 tampak bagus, tetapi yang dibuat pada 720 sangat kecil - seperti ukuran 1/10.

Duka yang bagus. Itu tampak seperti argumen untuk menempatkan semua gambar berdiri-bebas (tidak dibatasi dalam halaman web) pada angka 72. Secara virtual semua milik saya (yang jumlahnya ratusan) adalah 120 dpi. Meskipun mereka masih terlihat cukup besar di Chrome, mungkin dengan browser itu dalam pikiran saya harus bekerja pada menempatkan mereka semua di 72. Mungkin di suatu tempat di cetak halus di preferensi Chrome ada obatnya.