DPI Efsanesi
Bir web sitesi düzenindeki görüntünün boyutu önemlidir. Düzgün hizalamadan doğru miktarda beyaz alan elde etmek, fotoğraf ve grafikleri düzgün şekilde boyutlandırmak, dengeli bir görünüm oluşturmak için çok önemlidir.
Web üzerindeki görüntüler piksel cinsinden ölçülür . Yine de pek çok kişi, görüntülerini inç başına 72 noktaya ayarlama zorluğundan geçiyor.
Web için bağlanan dijital görüntülerde çözünürlük ile ilgili yanlış anlama, inç başına belirli sayıda noktayı karşılamaları gerektiğidir.
Baskıda, inç başına düşen piksel ve inç başına nokta, bir görüntünün sayfadaki boyutunu etkiler. DPI, web'deki düzen için geçerli değildir.
Birisi bir görüntüyü 72 DPI'ye dönüştürdüğünde, hiçbir faydası olmayan fazladan bir adım ekliyorlar. Web sayfaları, inç cinsinden gerçek dünya birimleri değil, piksel cinsinden ölçülür.
Biri size iki inç genişliğinde bir web görüntüsü istediğinde, kendi monitörlerinde nasıl görüneceğini tahmin ediyorlar. Görüntünün piksel boyutlarını değiştirmeden, bu görüntü farklı monitörlerde daha büyük veya daha küçük görünür ve hatta farklı bir çözünürlük ayarında aynı monitörde farklı görünebilir.
Piksel Boyutu Bağlam Üzerine Bağlıdır
Bir piksel (“resim elemanı” için kısadır), dijital görüntüyü gösteren bir ızgara üzerindeki en küçük ölçü birimidir. DPI, bu piksellerin veya noktaların, yazdırıldıklarında ne kadar büyük olduğunu ölçer.
Aşağıdaki görüntü farklı DPI s olarak gösterilmiştir.
36 DPI
150 DPI
3,096 DPI
Kendiniz görmek için bir görüntü düzenleyicide indirin ve açın. Üçü de aynı görünüyor çünkü yeniden boyutlandırılıyor, yeniden örneklenmiyorlar.
Değişiklikleri Yeniden Boyutlandırma Piksel Boyutları; Yeniden Örnekleme Değişiklikleri Piksel Sayısı
Bir resmi büyütmenin iki yolu vardır: daha fazla piksel eklemek veya pikselleri büyütmek. Aynı şekilde, pikselleri küçülterek veya küçülen piksellerle de resmin boyutunu küçültebilirsiniz. Ancak küçülen ve traş olmak iki farklı süreçtir.
Yukarıda gösterilen, bir resmi yeniden boyutlandırma , piksel sayısını değil piksellerinin boyutunu değiştirir. Piksel sayısını artırmaya ya da azaltmayacağız, sadece bu piksellerin ne zaman basıldığı zaman ne kadar büyük olduğunu değiştiriyoruz. Ters bir ilişkidir: daha büyük piksellere sahip görüntüler, yazdırıldığında daha düşük bir piksel yoğunluğuna (aynı sayıda inçte daha az piksel) sahip olacaktır.
Yukarıda gösterilen, yeniden örnekleme , piksel sayısını artırarak veya azaltarak görüntünün boyutunu değiştirir. Daha fazla piksele sahip resimler daha fazla bilgi içerecek ve genellikle daha zengin grafikler oluşturacaktır.
Web tasarımı yeniden boyutlandırma, yeniden boyutlandırma ile ilgilidir, çünkü bir web sayfasındaki her piksel her zaman aynı boyutta olacaktır. 800 piksel genişliğinde bir web sayfası, 800 piksel genişliğe kadar görüntüleri barındırabilir. Her piksel genişliğini yapmak, düzenin yalnızca 800'ünü tutabileceğini değiştirmez.
Piksellerini yeniden boyutlandırarak ekranda daha büyük bir görüntü oluşturamazsınız, çünkü aynı ekrandaki her piksel aynı boyutta olur.
Photoshop'ta Yeniden Boyutlandırma ve Yeniden Örnekleme
Photoshop'un Görüntü Boyutu kutusu ( Resim ‚Üí Görüntü Boyutu ), görüntülerin yeniden boyutlandırılmasını ve yeniden örneklenmesini kontrol eder.
“Yeniden örnekle” onay kutusu, pikselin kaç santimetreye sığabileceğini değiştirir - kelimenin tam anlamıyla inç başına piksel sayısı. Yeniden örneklemeyi kapatırsak, resmin boyutunu değiştirmenin tek yolu, baskı için piksellerini büyütmek olacaktır.
Yeniden örnekleme kutusu seçili değilken, “çözünürlük” kutusunun değiştirilmesi, basıldığında piksel sayısını değil, görüntünün fiziksel boyutunu değiştirir. Yazdırıldığında, bir görüntü daha büyük veya daha küçük görünür. Bir web sayfasında, aynı boyutta olur.
Bir deney
DPI'nın web düzenlerinde önemli olup olmadığını anlamak için küçük bir deney yapılabilir. Bir görüntüyü 300 x 100 pikselden 72 DPI'da 300 x 100 piksele 144 DPI'de değiştirirsek, kaç pikselimiz olur?
- Görüntüyü 72 pikselde 300 piksel genişliğinde ve 100 piksel uzunluğunda yapın.
- Hadi biraz matematik yapalım. Bu kaç piksel olurdu?
- Şimdi görüntüyü 144 DPI'da 300 x 100 piksele yeniden boyutlandırın.
- Hadi biraz daha matematik yapalım. Bu kaç piksel?
Cevaplar:
- 300 x 100 = 30.000
- 300 x 100 hala 30.000
Ekran Başına İnç Piksel
İnç başına düşen piksel sayısı hala çevrimiçi alakalı ancak DPI ayarları resmin nasıl görüntülendiğini etkilemez.
Bilgisayar monitörleri fiziksel olarak inç olarak ölçülebilir ve her biri belirli sayıda piksel görüntüler. Örneğin, 19 ″ monitörde 1280 x 1024 piksel olduğunu varsayalım. Kullanıcı 1600 x 1200 piksel görüntülemek için değiştirebilir, böylece PPI'sını artırabilir (yani aynı sayıda inçte daha fazla piksel ekleyebilir.) Baskıdaki önemli fark, bir resmin piksel başına inç değerini kontrol edebilmenizdir.
Bunu en modern bilgisayarlarda deneyebilirsiniz. Mac'te, Apple Menu ‚Üí Sistem Tercihleri'ne gidin ve ardından monitörünüzü ayarlayabileceğiniz çeşitli çözünürlükleri görmek için“ Ekranlar ”a tıklayın. Windows için masaüstüne sağ tıklayın ve “Kişiselleştir” seçeneğini seçip “Görüntü ayarları” nı seçin. Ekran çözünürlüğünü (piksel sayısı) değiştirin ve Mac veya PC masaüstünüzdeki öğeler daha büyük veya daha küçük olsun.
Açıkçası, monitörünüz boyut değiştirmiyor. Ancak bir cetveli ekrana tutarsanız, simgelerin ve pencerelerin boyutunun görüntülenen piksel sayısıyla ters orantılı olduğunu görürsünüz. Örneğin 13 ″ dizüstü bilgisayar, 17 ″ CRT monitör ve 21 ″ düz panel monitör hepsi 1024 x 768 piksel ölçen bir masaüstünü sunabilir. Daha fazla piksel daha küçük simgeler anlamına gelir; daha az piksel daha büyük simgeler anlamına gelir. Aynı monitördeki daha fazla piksel size daha yüksek bir piksel yoğunluğu sağlar; daha az piksel daha düşük.
Fark, diğer ekran türleriyle daha belirgin hale gelir:
- 47 x 12 fitlik bir dijital pano sadece 888 x 240 piksel (yaklaşık 1,6 PPI) kullanabilir.
- Bugün bir iPhone ekranı 2 x 3 inç ölçer ve 320 x 480 piksel (yaklaşık 160 PPI) tutar .
100 x 100 piksel boyutunda tek bir PNG dosyası, 888 x 240 reklam panosuna ve 320 x 480 iPhone'a sığar. Ancak panodaki pikseller, iPhone'lardan 100 kat daha büyük olduğu için, panoda çok daha büyük görünürdü (1.6'ya karşı 160).
Aşağıdaki resimde farklı piksel boyutlarına sahip iki cihaz gösterilmektedir.
Aynı görüntü iki farklı ekranda gösteriliyor. Her bir ekranın PPI'sindeki farklılıklar, daha az piksele sahip olmasına rağmen, sağdaki görüntüyü daha büyük görünür hale getirir.
Bunu kendiniz test edebilirsiniz:
- Herhangi bir piksel yoğunluğunda 960 x 100 piksel ölçen bir JPG oluşturun.
- Bir cetvelle elle ölçün.
- Aynı görüntüye, daha büyük veya daha küçük bir monitöre sahip bir bilgisayarda bakın. Örneğin, görüntüyü 20 ekran üzerinde oluşturduysanız, 13 inçlik bir dizüstü bilgisayarda test edin.
- Kağıt üzerinde farklı boyutlar görmek için farklı piksel yoğunluklarında aynı sayıda piksel yazdırın.
Sonuç olarak, bu tek görüntü aynı sayıda piksele sahip olacak, ancak inç cinsinden farklı bir genişliğe sahip olacaktır. Web sitesi düzeni, aynı kodlara rağmen farklı boyutlarda görünecektir. (Ekstrem bir vaka için, bir iPhone'un tüm sayfasına bakın; 960 piksel, dosyanın kendisi değiştirilmeden üç inç veya daha azına monte edilmiştir.)
Neden 72 anlamlı
JPG, TIF ve PSD dahil olmak üzere birçok dosya formatı bir görüntünün piksel yoğunluğu ayarını saklar. Bir JPG'yi 200 piksel / inç'te kaydederseniz, 200 olarak kalır.
GIF ve PNG dahil olmak üzere diğer formatlar piksel yoğunluğunu ortadan kaldırır. Bir 200 DPI görüntüsünü PNG olarak kaydederseniz, bu DPI'yı hiç kaydetmez. Adobe Photoshop dahil olmak üzere birçok görüntü editörü, bir görüntünün 72 olduğunu varsayar
Yetmiş iki baskı ve tipografide sihirli bir sayıdır. 1737'de Pierre Fournier, türü ölçmek için ciceros denilen birimleri kullanmıştır. Altı ciceros, 0.998 inç idi.
Yaklaşık 1770'te François-Ambroise Didot, standart Fransız “ayağı” için biraz daha büyük ciceros kullanmıştı. Didot'un pikaları, 0.1776 inç uzunluğundaydı ve 12 artışa eşit bir şekilde bölünmüştü. Bugün onlara nokta diyoruz.
1886'da Amerikan Noktası Sistemi “pika” yı 0.166 inç olarak kurdu. Bunlardan altısı 0.996 inç.
Ünitelerin hiçbiri pika başına 12 noktadan uzaklaştı: inç başına 6 pikal = inç başına 72 nokta. Apple, ilk Macintosh bilgisayarı tanıtmak için hazırlanırken 1984'te önemli bir standarttı. Mac'in arayüzü, insanların bilgisayarı fiziksel dünyayla ilişkilendirmelerine yardımcı olmak için tasarlandı. Yazılım mühendisleri, bir bilgisayarın arke çalışmalarını “kağıt”, “klasör” ve “çöp kutusu” simgeleriyle tanımlamak için bir masa metaforunu kullandılar.
Orijinal Mac'in 9 inç (diyagonal) ve 512 x 342 piksel ekranındaki her piksel tam olarak 1 x 1 puan ölçtü. Bir cetveli cama tutun ve 72 pikselin aslında 1 inç dolduracağını göreceksiniz. Bu şekilde, bir görüntü veya metin parçası yazdırdıysanız ve ekranın yanında tuttuysanız, hem görüntü hem de basılı kopya aynı boyutta olur.
Ama erken dijital resimler tıkalı ve pürüzlü idi. Ekran teknolojisi ve bellek arttıkça, bilgisayarlar aynı boyuttaki monitörde daha fazla piksel gösterebildiler. Raster ve vektör uygulamaları kullanıcıların yakınlaştırıp pikselleri yakından incelemelerine izin verdiğinde, ekrana bir yazdırma eşleşmesi daha da kesinleşir. 1990'ların ortalarında, Microsoft Windows, ekranda inç başına 72 ve 96 piksel arasında değişebilir. Bu daha küçük yazı tipi boyutlarını daha okunaklı hale getirdi çünkü nokta başına daha fazla piksel mevcuttu.
Bugün, tasarımcılar ve müşteriler, ekrandaki öğelerin boyutlarının mutlak olmadığını anlıyorlar. Ekran boyutundaki ve yakınlaştırma işlevindeki farklar sıradan. Ama 72 hala varsayılan.
Daha Yüksek Ekran PPI, Daha Küçük Nokta Boyutlarında Daha İyi Güvenilirlik anlamına gelir
Daha fazla PPI ile ekranlar okunaklılık için mükemmeldir. İnç başına daha fazla piksel, mektup formlarının daha kolay okunmasını sağlar. Ayrıca, görüntülerin ve metinlerin okunabilmesi için daha büyük (piksel cinsinden) olması gerektiği anlamına gelir.
Yukarıdaki metin örneği iki farklı ekran PPI ayarından yeniden boyutlandırılmıştır. Üst satırda daha küçük pikseller (yani ekranda daha yüksek bir ÜFE) vardır, bu nedenle 8 nokta en küçük okunaklı yazı tipi boyutudur. Alt satırdaki metin, 10 puanın altında neredeyse okunamaz.
PC monitörleri, Mac monitörlerinin piksel yoğunluğunu 1990'ların ortalarında aştığından, Windows'da oluşturulan web siteleri, Mac kullanıcılarının büyük bir kısmı için daha küçük yazı tipi boyutlarına sahipti. Bugün, her iki platform için de ekranlar, farklılıkları gerçekleştirmek için yeterince yüksek piksel yoğunluklarına sahiptir.
Modern Tarayıcılar ile Elastik Web Görüntüleri
Artık DPI'nın tek başına bir resmin web'de boyutunu değiştirmediğini ve bir resmin hangi cihaz üzerinde görüntülendiğini kontrol etmediğimizi biliyoruz. Yani, bir görüntünün piksel boyutları önemli olan tek şey var mı? Şimdilik evet.
Tarayıcının boyutuna göre değişen akış genişliği düzenleri, bir dizi aygıt ve monitöre daha iyi uyum sağlayabilir. FireFox 3, Safari 3 ve Internet Explorer 7'den gelen modern tarayıcılar, görüntüdeki görüntüleri ölçeklemede eski sürümlerden daha iyidir. max-width CSS property forces images to fit their container but not grow past their actual size. CSS özelliği, görüntüleri kaplarına sığmaya zorlar, ancak gerçek boyutlarını geçmeyecek şekilde büyürler. Örneğin:
p { width: 25% } / * İçerik alanının çeyreği * / img { max-width: 100% }
p { width: 50% } / * İçerik alanının yarısı * / img { max-width: 100% }
p { width: 75% } / * İçerik alanının dörtte üçü * / img { max-width: 100% }
/ * Paragraf için genişlik belirlenmedi * / img { max-width: 100% }
Burada 800 piksel genişliğinde bir resim görüyoruz dört farklı boyuttaki paragraf öğelerine sığdırılır. Sayfa genişliği esnekse, tarayıcı pencerenizin yeniden boyutlandırılması, resmi genişletir, ancak orijinal 800 x 323 piksel boyutlarını geçmez. Aşırı genişlemeden asla çarpıtılmayacak veya “pikselleştirilmeyecek”.
Web için görüntülerin hazırlanması piksel cinsinden planlama anlamına gelir. Eğer biri web için 2 inçlik bir grafik isterse, baskı için değil, “pikselleriniz ne kadar büyük?” Diye sorar.
Sadece WDD için yazılmış Ben Gremillion . Ben, iletişim sorunlarını daha iyi tasarımla çözen serbest bir web tasarımcısı.
Hangi medyada çözünürlük sayılır? Çevrimiçi görüntüleri boyutlandırmak için en iyi yol nedir? Fikirlerinizi aşağıda paylaşın.