Bir görüntüyü yayına hazırlamak

Görüntüyü gerçekte gösterileceği boyuta, yüksek yoğunluklu ekranlar için en fazla bunun iki katına küçültün. Tarayıcının onu ezmesine izin vermek yerine yerleşimin ihtiyaç duyduğu biçime kırpın. Bozulmalar tam belirene kadar sıkıştırın, sonra bir kademe geri alın. Üstveriyi en son ayıklayın. Sıra önemlidir: ilkinden sonraki her adım çok daha az piksel üzerinde çalışır.

Önce ölçüler gelir

Piksel sayısı genişliğin karesiyle büyür, dolayısıyla ölçülerdeki ölçülü bir fark veride devasa bir fark demektir. 4000 piksel genişliğinde saklanan ve 800 piksellik bir sütunda gösterilen bir görüntü, ihtiyacının yaklaşık yirmi beş katı veri taşır ve hiçbir kalite ayarı bunu kurtarmaz.

Hedef genişliği seçmek için ekranın ulaştığı en büyük genişliği değil, görüntünün yerleşim içinde çizildiği en büyük genişliği ölçün. Üç sütunlu bir ızgaradaki bir kart hiçbir zaman 380 pikselden geniş olmayabilir. Tek bir dosya birkaç yere hizmet ediyorsa en büyüğüne göre boyutlandırın.

Aygıt pikselleri, CSS pikselleri ve DPI efsanesi

CSS pikseli fiziksel bir nokta değil, bir yerleşim birimidir. Aygıt piksel oranı, ekranın her CSS pikseli için kaç aygıt pikseli boyadığıdır: eski monitörlerde 1, çoğu modern telefon ve dizüstünde 2, bazı telefonlarda 3. Oranı 2 olan bir ekranda 800 CSS piksellik bir sütun 1600 aygıt pikseliyle boyanır; CSS genişliğine göre boyutlandırılmış bir görüntünün yumuşak görünmesinin nedeni budur.

Pratik kural 2x'tir. Gösterilen genişliğin iki katında dışa aktarın ve küçültmeyi tarayıcıya bırakın. 3x'e çıkmak, normal izleme mesafesinde pek az kişinin göreceği bir fark için veride %125 daha maliyet çıkarır.

Bir dosyada saklanan DPI ve PPI değerlerinin web ile ilgisi yoktur. Bunlar dosyanın hangi fiziksel boyutta basılması gerektiğini söyleyen tek bir başlık sayısıdır ve tarayıcılar bunu tümüyle yok sayar.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

"300 DPI" ile dışa aktarmak ne piksel ekler ne de görüntü verisini değiştirir.

Yeniden örnekleme ne yapar

Küçültmek, çok sayıda kaynak pikselinin bire dönmesi demektir. Yeni ızgaradan daha ince ayrıntı temsil edilemez ve yeniden örnekleyici bütün alan boyunca ortalama almak yerine çok az kaynak pikseli örneklerse, o ayrıntı sahte örüntü olarak geri katlanır: tırtıklı çaprazlar ve çizgili bir gömlek ya da bir piksel kenarlıklı bir tablo gibi ince tekrarlı dokularda moiré. İyi bir küçültme, katkı veren her pikselin ortalamasını alır ve genellikle ardından biraz keskinleştirme ister.

Büyütmek hiçbir ayrıntı yaratmaz. Ara değerleme yalnızca zaten var olan pikseller arasındaki değerleri tahmin eder, dolayısıyla sonuç yumuşak ya da bloklu olur. Makine öğrenmesi tabanlı büyütücüler bunun yerine akla yatkın ayrıntı uydurur ki bu, ayrıntıyı geri getirmekle aynı şey değildir.

En boy oranı: kırpma, kutulama ya da esnetme

Kırpma özneyi kendi ölçeğinde tutar ve kenarları atar; doğru varsayılan da budur. Kutulama bütün kareyi korur ama çubuk ekler ve bir çubuk rengi seçmeye zorlar; hiçbir şeyin kesilemeyeceği durumlarda, örneğin bir sanat eseri ya da bir şemada hakkını verir. Esnetme biçimi bozar ve göz bunu yüzlerde, dairelerde ve yazıda anında yakalar.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Tek bir dosya birkaç farklı biçimde göründüğünde güvenli alan üzerinden düşünün: her kırpmadan sağ çıkan bölge. 16:9 bir afiş üstten ve alttan keser, 1:1 bir karo ile 4:5 bir kart kenarlardan keser; dolayısıyla hepsinin koruduğu şey ortadan geçen bir şerittir. Özneyi ve varsa metni bunun içinde tutun, yoksa yatay bir fotoğrafın kenarındaki bir yüzün başı kare kırpmada gider.

Kalite ayarını bulmak

Kalite sayısı hiçbir şeyin yüzdesi değildir ve ölçekler kodlayıcılar arasında karşılaştırılabilir değildir. JPEG 80, WebP 80 ve AVIF 80 birbiriyle ilgisiz üç ayardır.

Yöntem hepsi için aynıdır. Birkaç ayarda dışa aktarın, sonucu gösterileceği boyutta görüntüleyin ve bozulmaların ilk nerede yüzeye çıktığına bakın: bantlanan ve lekelenen gökyüzü gibi yumuşak geçişler; çınlayan sert kenarlar ve metin. Hasarın görünür hale geldiği yeri bulun, bir kademe geri alın, durun.

Tek bir sabit sayı her görüntü için yanlıştır, çünkü ne kadarının atılabileceğine içerik karar verir: gürültülü, dokulu bir fotoğrafın hayatta kalmak için daha çok bite ihtiyacı vardır; oysa düz bir çizim, kalabalık bir fotoğrafın omuz silktiği bir ayarda parçalanır.

Kesimler, yumuşak kenarlar ve haleler

Arka planı kaldırmak, görüntünün birden çok arka plan rengi üzerinde durması ya da başka öğelerle örtüşmesi gerektiğinde doğrudur: ürün çekimleri, logolar, bir yerleşime yerleştirilen bir kişi. Sınırın gerçekten ince olduğu yerlerde, örneğin saçta, yapraklarda ya da camda yanlıştır, çünkü kötü bir maske dürüst bir dikdörtgenden kötü görünür.

Sert kenar ikilidir; her piksel ya tam opak ya tam saydamdır. Bu, düz grafiklere uyar ama fotoğrafik her şeyde merdiven basamağı oluşturur. Yumuşak bir maske kesirli opaklığa izin verir, dolayısıyla bir piksel %40 özne olabilir; saçın doğru görünmesinin tek yolu da budur.

Hale, sınırdaki piksellerden gelir. Objektif bulanıklığı ve kenar yumuşatma özne rengini eski arka planla zaten karıştırmıştır, dolayısıyla her piksel şunu barındırır:

observed = alpha * foreground + (1 - alpha) * background

Arka plan kaldırma yalnızca alfayı hesaplar. O piksellerde kalan renk hâlâ bulaşıktır, dolayısıyla beyaz bir stüdyo çekiminden kesilmiş bir özne soluk bir saçak taşır: beyaz bir sayfada görünmez, koyu bir sayfada apaçık. Düzgün maskeleme ön plan rengini de çözer ve bu, saçak giderme (defringe) ya da renk arındırma (decontaminate colours) olarak sunulur. O da yoksa maskeyi bir pikselin kesri kadar içeri çekin ve kenarını yeniden yumuşatın.

Döndürme ve üstveri

Bir programda dik, başka birinde yan duran bir görüntünün nedeni neredeyse her zaman EXIF yönlendirmesidir. Kameralar sensör görüntüsünü döndürmeden saklar ve nasıl çevrileceğini söyleyen bir etiket ekler. Etiketi okuyan yazılım görüntüyü doğru gösterir; birçok görüntü kütüphanesi ve küçük resim üreticisi dahil, etiketi yok sayan yazılım ise ham pikselleri yan yatmış halde gösterir.

Çözüm, döndürmeyi piksellere işlemek ve etiketi 1 yapmak ya da kaldırmaktır. 90 derecelik adımlarla döndürmek pikselleri yeniden örneklemeden yeniden dizer. Çifte döndürmeye dikkat edin: pikseller zaten çevrilmiş, etiket hâlâ ayarlı, dolayısıyla kurallara uyan her görüntüleyici onları bir kez daha çeviriyor.

Üstveriyi ayıklamak bir düzen işi değil, bir gizlilik adımıdır. EXIF, IPTC ve XMP blokları rutin olarak birkaç metre hassasiyette GPS koordinatları, çekim zamanı, kamera markası, modeli ve seri numarası, sahip adı ve bazen de görüntünün kırpılmadan önceki halini hâlâ gösteren gömülü bir küçük resim taşır. Evde çekilip olduğu gibi paylaşılan bir fotoğraf, bir ev adresini yayımlar.

En son ayıklayın, bir istisnayla: ICC renk profili o üstverinin yanında durur ve geniş gamutlu bir görüntüden kaldırılması, sRGB olarak okunacak sayılar bırakır; bu da donuk ya da aşırı doygun renk olarak karşınıza çıkar. Önce sRGB'ye dönüştürün, sonra geri kalan her şeyi ayıklayın.