Web tasarımı için görüntüleri 72 DPI'da tutmak zorunlu mu?


50

Bir yıldan fazla bir süredir web bannerları tasarlıyorum ancak DPI'ı hiç düşünmedim.

Varsayılan 72DPI kullanıyordum, ama şimdi bilmek istiyorum ki, 72DPI'de web tasarımları oluşturmak gerekli midir? Ya bundan daha fazlasını kullanırsak, örneğin 200 DPI?

Daha fazla DPI’nın daha kaliteli bir görüntü anlamına geldiğini ve bu yüzden yüksek DPI kullanmak istediğimi biliyorum, ancak son zamanlarda bir yerlerde web bannerları için 72DPI kullanmamız gerektiğini okudum. Sadece zorunlu olup olmadığını bilmek ve herhangi bir yönden olumsuz etkiliyor mu bilmek istiyorum?

Yanıtlar:


84

PPI (İnç Başına Piksel) ayarları web görüntülerinde kullanılmaz. Web üzerindeki görüntüler, retina ekranları veya başkaları, herhangi bir ÜFE / DPI ayarına göre değil piksel boyutlarına göre (genişlik ve yükseklik) gösterilir. Aslında, png, gif, jpg gibi pek çok web görüntüsü bir ppi ayarını dahili verilerinde saklayamayabilir ve genişlik ve yükseklik ayarlarına dayanabilir.

Herhangi bir ÜFE / DPI ayarından bağımsız olarak, 100 piksel x 100 piksel görüntü web üzerinde görüntülenir.

Bu nedenle retina ekranlarının görüntüleri, artan ppi ayarlarından ziyade 2x boyutunda kaydedilir. Piksel yoğunluğu retina ekranların hala ekran devletler herhangi ÜFE ayarında dayanmayan bir resmin genişliği ve yüksekliği ne olursa olsun en görüntüyü Ancak daha yüksektir.

Gerçekte, 72 ppi piksel yoğunluğunu kullanan bir monitör 1980'lerin başından bu yana görülmedi. 72ppi yaklaşık 30 yıldır doğru değil. Aslında, Windows, piksel yoğunluğu için varsayılan olarak 96ppi kullandığından, Windows sistemleri için hiçbir zaman doğru olmadı.

Bana inanma Kendin için dene. Photoshop'ta iki görüntüyü, 100 piksel x 100 piksel olarak oluşturun. Bir görüntü 72 ppi ve diğer 300 ppi yapın. İkisini de web için saklayın .. bir web tarayıcısında farklı mılar? Hayır! İkisi de 100 piksel x 100 piksel görüntüdür.

DPI (İnç Başına Nokta) ayarları yalnızca görüntü yazdırırken uygulanabilir. DPI, ekran için tasarlanan görüntülerde hiçbir etkiye sahip değildir. DPI, basının bir inç içine yerleştireceği mürekkep noktalarının / noktalarının miktarını ifade eder. Dünya üzerinde hiçbir ekran mürekkep kullanmadığından, DPI ekranlarla ilgili herhangi bir şey için kullanmak için yanlış bir terimdir.

Bazı mobil üreticilerin bazen yalnızca DPI olarak kısaltılmış olan DPIx veya xDPI terimini kullanmayı seçtiğini unutmayın. Bu, kısaltmanın geleneksel şekli değildir ve üretici, suları çok fazla karıştırdı. DPI'yı mobil ekran çözünürlükleriyle ilgili olarak görüyorsanız, etkin ÜFE hakkında konuşurlar ve gerçekten İnç Başına Nokta değil . Daha uygun bir kısaltma, xPPI veya PPIx olurdu, çünkü tüm ekranlar gibi mobil ekranlar, piksel kullanmaz ve mürekkep kullanmaz.

Web görüntüleri için kullandığınız ppi ayarının hiçbir önemi yoktur. Önemli olan bir görüntünün (piksel) genişliği ve (piksel) yüksekliğidir.

Birden fazla görüntüyle çalışırken tutarlı kalmak önemlidir. Görüntüler arasında parçaları hareket ettirmeniz durumunda boyutların yeniden boyutlandırılmasını ve ölçeklenmesini önlemek için tüm resimlerinizin aynı ppi'ye ayarlanmasını isteyeceksiniz. 72, 96, 200 veya 145.8 ppi kullanmayı tercih etmeniz farketmez, ancak tüm görüntüler aynı olmalıdır.


NB, web sitesine, görüntülerin yüksek DPI sürümlerini yüklemesini isteyebileceğiniz, yararlı olabileceği durumlarda talimat verebilirsiniz: stackoverflow.com/a/43823483/32453
rogerdpack

2
Aslında @rogerdpack, tarayıcıya daha büyük görüntüyü yüklemesini söyleyebilirsiniz (piksel genişliği ve piksel yüksekliği) .. yani 2x hatta 3x. Yine de herhangi bir ÜFE ayarını okumuyor.
Scott

5

"Dpi" nin gerçekte ne anlama geldiğini örneklerle anlatacağım; Bununla cevabı kendin de görebilirsin. :

Kısacası, resminiz yan yana olan renkli noktalardan oluşur. Ancak bedenin fiziksel anlamda bir boyutu yoktur.

Şimdi, ekranda bir görüntü gösterdiğinizde, normalde görüntünün nokta renklerini, ekranınızın görüntüleyebileceği renkli dikdörtgenlerin rasterine koyacaksınız. Her ikisine de, “nokta” dediğim şeyin ve burada dikdörtgenlerin “piksel” olarak adlandırıldığını - ancak yakından baktıklarında farklı bir şey olduklarını unutmayın.

Bir görüntüyü ekranda bu doğal yolla gösterirsek, boyutunu ölçebiliriz.
Örneğin, görüntümüz 500 nokta genişliğinde, bunları ekrandaki renkli dikdörtgenlere yerleştirdik ve 5 inç genişliğinde olduğunu görüyoruz. Ardından, inç başına 100 noktamızı gösteren inç başına 100 dikdörtgenimiz var.
Yani, görüntümüz ekranda 100dpi'ye sahip.
Fakat görüntü dosyamızdaki dpi değerine bile bakmadık!

Şimdi, eğer dosyamıza bakarsak, görüntünün 200dpi olduğunu söyleyebiliriz! Dpi değeri, ekran genişliğinin veya yüksekliğinin inç başına kaç tane renkli noktanın göründüğü hakkındadır. Bu nedenle, görüntüdeki dpi değeri bize görüntüümüzün görüntülendiğinde 2,5 inç genişlikte olacağını söylemektedir - söz olarak, gerçek olarak değil .

Görüntü noktalarını ekrana atadığımızda bunu umursamadık bile, çünkü daha yeni gösterdik ve görüntünün ekran temsilinin gerçek, fiziksel dpi değerini ölçtük .
Yani, gördüğünüz gibi, söz sadece yanlış oldu . Ve kimse umursamıyor! Çünkü bu sadece alakalı değil.

Dosya ümit veriyordu - 200dpi diyerek - "gösterildiğinde 2,5 inç genişlikte" olacak. Sonra onu 5 inç genişliğinde gösteren bir ekran kullandık - bunu biliyoruz çünkü asıl ekranın ne olduğunu biliyoruz.
Normalde son kullanıcının ekran olarak ne kullanacağını bile bilmiyoruz, bu yüzden sadece yine de tahmin edebiliriz,

Yani, şimdi mantıklı:

  • Ekranda gösterilen görüntülerin dpi'lerini bilmiyorduk, çünkü ekranı bilmiyorduk.
  • Ama nasıl görünmesi gerektiği konusunda bir fikrimiz vardı, "kabaca bu boyutta ... tamam, o zaman yaklaşık 200dpi ya da öylesine ihtiyacımız var." ve "200dpi" dosyasını dosyaya kaydetti.
  • Daha sonra ekrana baktık ve 100dpi;

Ve görüntünün üzerinde gösterilebileceği tek bir ekran yoktur - boyut olarak farklı olabilirler, dolayısıyla bir görüntü dosyası oluştururken gerçek bir dpi değeri bilmek bile mümkün değildir.

Ayrıca bkz. Cevabım "Piksel" nedir? .


Doğrudan soruya, yukarıdakilere dayanarak:

Bir görüntü dosyasında dpi'yi belirttiğinizde, bu, sonuçtaki görüntü gösterisinin kalitesine doğrudan gösterilmez.
Ancak görüntü kalitesi hakkında iletişim kurmak için kullanılabilir - niyetler açısından: "Bu görüntünün 200 dpi ekranda gösterilmesini istiyorum" diyebilirsiniz.

Bu görüntüyü göstermek istersem, kendime iyi bakabilir ve 200dpi ekran bulabilirim; ya da belki sadece masamda olabilecek eski bir 75 dpi ekran kullanıyorum. Görüntü oldukça büyük olacak, kaydırmalıyım - ama bu benim sorunum, ve: gerçekte ne kullanıldığını bile bulamayacaksınız - 200dpi değeri görüntü kalitesini kontrol etmedi - sadece "doğru" nasıl gösterileceğini iletti "umursamıyorum.


Bir görüntüye gömülü olan DPI'ın bir fark yaratacağı bazı bağlamlar vardır. Örneğin Microsoft Word'e içe aktarırsanız, resmi, yazdırılan sayfada ölçüldüğünde DPI tarafından belirtilen boyutta olacak şekilde ölçeklendirir. Cevabınız doğru olsa da, DPI çok daha fazla göz ardı edilir.
Mark Ransom

İyi bir nokta. Böylece görüntü, teorik olarak yapılacak doğru şey olan çıktı aygıtının DPI'sına uyarlanır. Uygulamada, uyarlanmış dpi değerleri, farklı çıktı aygıtları (ekran ve yazıcı) içindir ve uyumsuzdur. Farklı birimlerde ifade edilen değerler gibi, santimetre ve inç cinsinden uzunluk değerleri eklenmesine benzer.
Volker Siegel

Düz yataklı tarayıcılar gibi bazı cihazlar aslında anlamlı bir DPI değeri sağlayabilir. Sadece kamera değil.
Mark Ransom

4

ÜFE kesinlikle önemli olmasa da - web ve uygulama tasarımı için önemli olan piksel boyutları, tasarım uygulamalarını kullanma ve ÜFE ayarlarını karıştırma konusunda çok dikkatli olmalısınız. İşte nedeni:

Ancak, her bir belge için Photoshop ve farklı piksel yoğunluklarını kullanmayı planlıyorsanız, katmanları sürükleme ve katmanlar arasında katman stillerini kopyalama katman stilleri - bir katmanı 326PPI Retina iPhone belgesinden 264PPI Retina iPad belgesine sürükleme, tüm katman stillerinin ölçeklendirileceği anlamına gelir % 20 oranında (daha sonra en yakın tam sayıya yuvarlanır). Muhtemelen istediğin de bu değildir. Ayrıca, OS X'in Önizlemesi, nasıl kurduğunuza bakılmaksızın, tam boyutta 72PPI görüntüler görüntüler.

İnç başına piksel sayısı sadece bir etikettir

Bu sebeplerden dolayı tüm tasarım belgelerime 72PPI atarım ve aynısını yapmanızı öneririm. Photoshop belgenizin piksel yoğunluğunu, görüntü verilerini yeniden boyutlandırmadan değiştirmek için, Görüntü Boyutu iletişim kutusunu açın, Görüntüyü Yeniden Boyutlandır'ın işaretini kaldırın ve istediğiniz piksel yoğunluğunu yazın.


0

Photoshop ile yaptığım bir görüntünün iki kopyasını test ettim. Ancak, kullandığım tarayıcılardan birinin ekranda farklı boyutlar gösterip göstermeyeceğini görmek için birini 72 dpi'ye, diğerini 720 dpi'ye ayarladım.

Biri dışındaki tüm tarayıcılarda aynı görünüyorlardı - boyut bilge ve kalite bilge. Ancak, Google Chrome'un kullanımıyla 72'de yapılan görüntü iyi görünüyordu, ancak 720'de yapılan görüntü çok küçüktü - sanki 1/10 boyutundaydı.

İyi keder. Bu, tüm ayakta durma (bir web sayfasında kısıtlanmayan) görüntüleri 72'ye koyma argümanı gibi görünüyor. Neredeyse tamamı (çoğu yüzlerce sayı) 120 dpi. Chrome'da hala yeterince büyük görünseler bile, belki de bu tarayıcıyı göz önünde bulundurarak hepsini 72'ye yerleştirmek için çalışmalıyım.


1
Bu testi çevrimiçi olarak bir yere mi koydun? Yoksa çevrelerinde HTML olmayan sadece saf görüntüler miydi?
Michael Schumacher
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.