Guide
DPI, PPI ve piksel yoğunluğu: tasarımcılar için çalışma rehberi
Biri yazıcıyı tarif ediyor. Biri görüntüyü. Biri ekranı. Bunları karıştırmak tasarım zamanına mal oluyor.
By Buğra SözeriPublished Updated
Üç sayı, üç anlam:
- DPI (inç başına nokta) — bir yazıcının doğrusal inç başına kaç mürekkep noktası yerleştirdiği. Yazıcının donanım özelliği.
- PPI (inç başına piksel) — hedef boyutta doğrusal inç başına kaç görüntü pikselinin baskı veya görüntüleme yaptığı. Görüntünün nasıl oluşturulduğunun özelliği.
- Piksel yoğunluğu — bir ekranda CSS pikseli başına cihaz pikseli. Ekranın özelliği (Retina, 4K vb.).
Neredeyse her tasarım aracı "çözünürlük" alanını PPI'ı kastederken DPI olarak etiketliyor. Kötüye kullanım o kadar yerleşmiş ki başparmak kuralı şu: bir tasarımcı DPI dediğinde, tam anlamıyla fiziksel bir yazıcının değerlendirilen çıktısından bahsetmiyorlarsa PPI demek istediklerini varsayın.
Her sayı size gerçekte ne söylüyor
DPI (yazıcı veya tarayıcı)
Modern mürekkep püskürtmeli yazıcılar 1.200-4.800 DPI çalışıyor. Lazer yazıcılar 600-2.400 DPI. Her iki sayı da donanımın mürekkep noktalarını ne kadar ince yerleştirebileceğini açıklıyor, bir sayfanın ne kadar görüntü ayrıntısını tutabileceğini değil. 4.800 DPI yazıcı 4.800 PPI görüntü yazdıramaz — efektif görüntü çözünürlüğü (PPI) en iyi mürekkep püskürtmelilerde bile yaklaşık 300-400'de zirve yapıyor, çünkü bir görüntü pikseli oluşturmak birden fazla mürekkep noktası gerektiriyor.
PPI (görüntü-hedef-boyut sayısı)
PPI bir görüntüyü yalnızca hedef fiziksel boyutu belirttiğinizde tanımlıyor. 3000×2000 piksellik görüntü 10×6,67 inç baskıda 300 PPI'dır. 5×3,33 inç baskıda 600 PPI. 20×13,33 inç baskıda 150 PPI. Aynı dosya, üç farklı PPI değeri.
Hangi PPI'ya ihtiyacınız olduğu için standart kurallar:
- 72-96 PPI — web gösterimi. Tarayıcılar gömülü PPI'yı yoksayıyor; yalnızca piksel sayısı önemlidir.
- 150 PPI — gazete baskısı, uzaktan görüntülenen büyük formatlı poster.
- 300 PPI — kitap, dergi, kol mesafesinden görüntülenen fotoğraf baskısı.
- 600+ PPI — çizgi sanatı, teknik çizimler, ince tipografi.
Piksel yoğunluğu (Retina sayısı)
Modern ekranlarda CSS'deki "1 piksel" bir ekran pikseli değil. iPhone'lar, MacBook Pro'lar ve çoğu modern Android telefon, bir CSS pikselinin 2× veya 3× fiziksel pikselle eşleştiği anlamına gelen 2 veya 3'lük devicePixelRatio kullanıyor. Bu nedenle Figma'da 1×'te çalışan bir tasarımcı, 2× veya 3× çözünürlükte dışa aktarmadıkça telefonda yumuşak görünen görüntüler üretiyor.
Yaygın çıktılar için pratik sayılar
| Çıktı | Piksel boyutları | PPI | Notlar |
|---|---|---|---|
| Open Graph kartı | 1.200 × 630 | 72 (yoksayılır) | Tarayıcılar/sosyal medya yalnızca pikselleri okuyor. |
| Retina kahraman görüntüsü | 2.400 × 1.200 (CSS 1.200×600) | 72 | 2× DPR pratik taban; premium için 3×. |
| 300 PPI'da A4 baskı | 2.480 × 3.508 | 300 | Kitap/broşür baskısı için. |
| Kartvizit (ABD, 300 PPI) | 1.050 × 600 (+ kanama) | 300 | Her tarafa 0,125 inç kanama ekleyin → 1.125 × 675. |
| Billboard (4,8 m × 2,4 m) | ~10 PPI'da 1.920 × 960 | 10-15 | 15+ metreden görüntüleniyor — PPI gereksinimi çöküyor. |
Karışıklığın ısırdığı yerler
1. "72 DPI" dışa aktarma sorunu
Bir tasarımcı Figma/Sketch'te "72 DPI"da çalışıyor (ekranda anlamsız ama aracın gösterdiği şey), bir PDF dışa aktarıyor ve matbaaya gönderiyor. Matbaa meta verilerinde 72 PPI iddia eden bir dosya alıyor; çıktı amaçlanan yoğunluğun 1/4'ü ve baskı pikselleşmiş görünüyor. Düzeltme: 300 PPI'da yeniden dışa aktarın ve piksel sayısının bu yoğunluğu desteklemeye yetecek kadar büyük olduğundan emin olun.
2. Retina @1× dışa aktarmaları
Figma'da 1×'te çalışan bir tasarımcı tam CSS boyutlarında (örneğin 24×24 px) bir simge dışa aktarıyor. 3× cihazda simge bulanık görünüyor çünkü tarayıcının ölçeği yerel 72×72 dışa aktarma kadar keskin değil. Düzeltme: @1× artı @2× ve @3× varyantları dışa aktarın, ardından doğru dosyayı sunmak için HTML srcset veya CSS'de image-set kullanın.
Hızlı başvuru: her sayının ne zaman önemli olduğu
- Web çalışması: yalnızca piksel sayısı + DPR önemlidir. Gömülü PPI meta verilerini yoksayın.
- Baskı çalışması: PPI kesinlikle önemlidir. Bunu baskının görüntüleme mesafesiyle eşleştirin (elle tutulanlar için 300 PPI, duvara asılanlar için 150 PPI, uzaktan görüntülenenler için daha düşük).
- UI tasarımı: 1× CSS boyutlarında tasarlayın, 2× ve 3×'te dışa aktarın.
Çalışılmış örnek: bir simgeyi üç platform için dışa aktarma
24×24 CSS piksellik bir araç çubuğu simgesinin masaüstü tarayıcıda, iPhone 15 Pro'da (3× DPR) ve 300 PPI'da baskı matbaasında keskin görünmesi gerekiyor.
- Masaüstü @1×: 24 × 24 PNG dışa aktarın.
- Retina @2×: 48 × 48 PNG,
2xtanımlayıcısıylaimage-setveyasrcsetaracılığıyla sunulacak. - iPhone @3×: 72 × 72 PNG,
3xile sunulacak. - En iyi yanıt her şey için: SVG kaynağını gönderin. Vektör primitifler DPR veya PPI'ı umursamıyor; işleyici isteğe bağlı olarak hedef çözünürlükte taramlaştırıyor. PNG/JPG'yi yalnızca raster içerik (fotoğraflar, gradyan çizimler) için saklayın.
Yaygın hatalar
- Yeniden örnekleme yerine Photoshop'ta PPI alanını değiştirmek. Photoshop'un "Görüntü Boyutu" iletişim kutusu "Yeniden Örnek" onay kutusu içeriyor. Yeniden örnekleme olmadan PPI'yı değiştirmek yalnızca baskı boyutu meta verilerini değiştiriyor; piksel sayısı ve görünür kalite değişmiyor.
- Figma'da varsayılan olarak 2×'te tasarlamak. Figma 1 birim = 1 CSS pikseli kullanıyor. 2× boyutlarda tasarlarsanız, dışa aktarılan @1×'iniz iki kat amaçlanan boyut ve @2×'iniz 4× olacak. 1×'te tasarlayın; dışa aktarmanın çarpanları yönetmesine izin verin.
- Baskı ve web'i aynı dosyada karıştırmak. 300 PPI baskı PDF'i baskı için boyutlandırılmış rasterlar gömüyor; aynı kaynaktan web dışa aktarımı web için fazlasıyla büyük. Ayrı web ve baskı ana dosyaları tutun.
- Baskıda kanama ve kırpmayı unutmak. 3,5" × 2,0" kartvizit 3,625" × 2,125" (0,125" kanama) gerektirir. 300 PPI'da bu 1.087 × 637 piksel, 1.050 × 600 değil.
Frequently asked questions
- DPI ile PPI arasındaki fark nedir?
- DPI (inç başına nokta), yazıcı kafasının doğrusal inç başına kaç mürekkep noktası yerleştirdiğini açıklayan fiziksel bir yazıcı özelliğidir. PPI (inç başına piksel), belirli bir baskı veya görüntüleme boyutunda doğrusal inç başına kaç görüntü pikselinin baskı veya gösterim yaptığını açıklar. 300 PPI'lık bir görüntü dosyası 300 DPI'lık bir yazıcı için idealdir, ancak terimler farklı şeyleri tanımlıyor.
- Profesyonel baskı için görüntülerin PPI'sı ne olmalı?
- 300 PPI, ofset baskı ve fotoğraf baskısı için standarttır. 1 m'den uzaktan görüntülenen büyük formatlı baskılar için 150 PPI genellikle yeterlidir. Yalnızca ekran görüntüleri 72-96 PPI'dan fazlasına ihtiyaç duymaz.
- 2'lik cihaz piksel oranı ne anlama gelir?
- 2'lik bir cihaz piksel oranı (DPR), ekranın her boyutta CSS pikseli başına 2 fiziksel piksele sahip olduğu, mantıksal piksel başına toplam 4 donanım piksel anlamına gelir. Bu Apple'ın Retina standardıdır ve bu ekranlarda keskin görüntüleme için @2x görüntülerin neden gerekli olduğunu açıklar.
- Bir JPEG'i 72 DPI yerine 300 DPI'ya kaydetmek dosya boyutunu neden değiştirmiyor?
- JPEG'e gömülü DPI/PPI meta veri etiketi piksel sayısını değiştirmiyor — yalnızca yazılıma görüntünün ne büyüklükte görüntüleneceğini veya yazdırılacağını söylüyor. Dosya boyutu piksel boyutları ve sıkıştırma düzeyiyle belirleniyor, DPI etiketiyle değil.
- 300 DPI'da 5×7 inç baskı için gereken piksel boyutlarını nasıl hesaplarım?
- Her baskı boyutunu hedef DPI ile çarpın: 5 × 300 = 1500 piksel genişlik ve 7 × 300 = 2100 piksel yükseklik. Dolayısıyla 300 DPI'da 5×7, en az 1500×2100 piksellik görüntü gerektiriyor.
Sources & references
Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.
- W3C CSS Values and Units Module Level 4 — çözünürlük — Tanımlanan ve karşılaştırılan CSS dppx / dpi / dpcm birimlerinin yetkili referansı(as of )
- MDN — devicePixelRatio — HiDPI oluşturmayı yönlendiren cihaz piksel oranı için tarayıcı uygulama referansı(as of )
- Apple Geliştirici — Görüntü Boyutu ve Çözünürlük (HIG) — Retina cihazlarda kullanılan @1x/@2x/@3x dışa aktarma kuralları için yetkili referans(as of )
Related
Published May 16, 2026 · Last reviewed May 31, 2026