Resim Boyutlandır

İki boyutlu bir raster görüntüyü yeniden boyutlandırmak, felaket düzeyinde görsel bozulmalara yol açmadan yalnızca piksel satırlarını silerek veya çoğaltarak gerçekleştirilemez. Dijital görüntüler örneklenmiş renk değerlerinden oluşan ayrık ızgaralar olduğundan, bir görüntüyü yeni bir boyutsal koordinat uzayında yeniden hesaplamak matematiksel enterpolasyon gerektirir—yani doğru ara piksel değerlerini sentezlemek için bilinen komşu piksel örneklerinin değerlendirilmesi şarttır.

En basit yöntem olan En Yakın Komşu (Nearest-Neighbor) enterpolasyonu, hedef ızgaradaki her nokta için orijinal ızgaradaki en yakın pikselin yoğunluğunu seçer. O(1) algoritmik karmaşıklığıyla hesaplama açısından önemsiz olsa da, en yakın komşu ölçekleme diyagonal kenarlar boyunca tırtıklı, bloklu merdiven basamağı artefaktları üretir ve bu da onu fotoğrafik içerik için tamamen uygunsuz hale getirir (buna karşın retro piksel sanatını korumak için son derece değerlidir). Çift Doğrusal (Bilinear) enterpolasyon, en yakın çevreleyen dört pikselden oluşan 2x2'lik bir ızgara boyunca mesafe ağırlıklı bir ortalama hesaplayarak bunu iyileştirir. Çift doğrusal ölçekleme tırtıklı merdiven basamaklarını ortadan kaldırsa da, düşük geçişli bir mekansal filtre gibi davranarak yüksek frekanslı dokuları bulanıklaştırır ve keskin tipografik hatları yumuşatır.

Motorumuz, kübik spline polinomlarını (Catmull-Rom veya Mitchell-Netravali çekirdekleri gibi) kullanarak 16 çevre pikselden oluşan 4x4'lük bir matrisi değerlendiren yüksek hassasiyetli Bikübik (Bicubic) enterpolasyondan yararlanır. Hem bitişik piksel yoğunluklarını hem de bunların mekansal renk değişim hızlarını (türevlerini) hesaba katan bikübik yeniden örnekleme; alt ölçekleme sırasında keskin kenar geçişlerini, ince cilt mikro dokularını ve ince tipografik kontrastı koruyarak çamurlu bulanıklık veya halkalanma artefaktları olmadan baskıya ve yayına hazır net görsel varlıklar sunar.

Erken dönem web geliştirmede bir CSS mantıksal pikseli, tam olarak bir fiziksel donanım ekran pikseline karşılık geliyordu (1x DPR). Ancak modern bilişim ortamlarına; Apple Retina paneller, 4K/5K masaüstü monitörler ve OLED akıllı telefon ekranları dahil olmak üzere 2x, 3x veya daha yüksek Cihaz Piksel Oranlarında çalışan yüksek DPI ekranlar hakimdir. Standart bir masaüstü ekranda 800 piksel CSS düzen genişliğine sahip duyarlı bir hero başlığı, 2x Retina ekranda jilet gibi optik netlikte işlenmek için 1600 fiziksel piksel genişliğine, 3x amiral gemisi mobil ekranda ise 2400 fiziksel piksel genişliğine ihtiyaç duyar.

Profesyonel web performansı mühendisliği, geliştiricilerin tüm ziyaretçilere asla herkese uyan tek bir monolitik görsel sunmaması gerektiğini belirtir. Bunun yerine önerilen modern mimari; boyutlandırma aracımızı kullanarak yapılandırılmış çok katmanlı bir kesme noktası merdiveni (genellikle 640px, 1024px, 1440px ve 1920px genişlikleri hedeflenerek) üretir ve bunları açık `sizes` tanımlarıyla eşleştirilmiş HTML `srcset` özniteliği aracılığıyla sunar. Bu, istemci tarayıcısının ön ayrıştırıcısının ziyaretçinin görüntüleme alanı genişliğine, ekran yoğunluğuna ve ağ koşullarına göre uyarlanmış tam çözünürlüğü dinamik olarak seçip indirmesine olanak tanır ve tek bir kilobaytlık hücresel bant genişliğini bile israf etmeden görsel mükemmelliği garanti eder.

Dijital sinyal işlemedeki kritik bir ilke, alt ölçekleme (küçültme) ve üst ölçeklemenin (büyütme) temelde asimetrik matematiksel işlemler olduğudur. Alt ölçekleme (decimation), milyonlarca gereksiz girdi pikselinin matematiksel olarak harmanlandığı ve daha kompakt bir ızgarada sıkıştırıldığı bir veri azaltma sürecidir. Girdi, çıktı hedefinin gerektirdiğinden çok daha fazla entropi ve yüksek frekanslı bilgi içerdiğinden; ince kumaşlarda veya geometrik ızgaralarda hare (moiré) desenlerini önlemek için uygun örtüşme önleyici (anti-aliasing) ön filtreleme uygulandığı sürece, yüksek kaliteli alt ölçekleme tutarlı bir şekilde son derece keskin, yoğun ve görsel olarak tatmin edici sonuçlar üretir.

Buna karşılık, üst ölçekleme (enterpolasyon) bir bilgi sentezi zorluğudur. 400x300 piksellik küçük bir resmi 1920x1080 piksele büyütürseniz, algoritmanın toplam piksel değerlerinin %95'inden fazlasını sıfırdan üretmesi matematiksel bir zorunluluktur. Bikübik enterpolasyon mevcut pikseller arasında pürüzsüz matematiksel gradyanlar hesaplasa da; tek tek saç telleri, uzaktaki mimari taş örgüsü veya ince ürün dokuları gibi kaybolan yüksek frekanslı ayrıntıları yoktan var edemez. Düşük çözünürlüklü varlıkları yerel boyutlarının %125 ila %150'sinin ötesine büyütmek kaçınılmaz olarak belirgin bir yumuşaklık ve suluboya benzeri bir bulanıklıkla sonuçlanır. Üretim web tasarımı için kaynak varlıklarınızı her zaman mevcut en yüksek çözünürlükte çekip kırpın ve hedef düzen özelliklerinize doğru aşağı yönde boyutlandırın.

En boy oranı, bir görüntünün yatay genişliği ile dikey yüksekliği arasındaki orantısal ilişkiyi tanımlar ve bir oran olarak ifade edilir (16:9 veya 1:1 gibi). Dijital pazarlamadaki en sık karşılaşılan görsel hatalardan biri, bir yazarın oranları kilitlemeden bir görüntüyü uyumsuz bir en boy oranına sahip bir kapsayıcıya zorlamasıdır; bu da grotesk bir şekilde ezilmiş yüzlere, uzatılmış tipografiye ve bozulmuş şirket logolarına yol açar. Boyutlandırma aracımız, siz yazarken matematiksel olarak tam eşlik eden boyutu sürekli hesaplayan ve mutlak geometrik bütünlük sağlayan otomatik bir En Boy Oranı Kilidi içerir.

Çok kanallı dijital yayıncılık için görsel varlıkları yeniden boyutlandırırken standartlaştırılmış endüstri en boy oranlarına bağlı kalın: Masaüstü hero afişleri, geniş ekran video küçük resimleri ve sunum slaytları için 16:9 (1920x1080); e-ticaret ürün katalogları, kare pazar yeri galerileri ve Instagram gönderileri için 1:1 (1080x1080 veya 2000x2000); dikey sosyal medya akış optimizasyonu için 4:5 (1080x1350); tam ekran dikey mobil hikayeler, TikTok içerikleri ve reels videoları için 9:16 (1080x1920); ve Facebook, LinkedIn ve Twitter Open Graph sosyal paylaşım kartları için 1.91:1 (1200x630). Kaynak varlığınız hedef oranla eşleşmiyorsa, boyutsal boyutlandırmayı yürütmeden önce kadrajı belirlemek için öncelikle <a href="/tr/tools/image/crop/" class="text-brand-600 dark:text-brand-400 font-medium underline">Resim Kırp</a> aracımızı kullanın.

Acemi web tasarımcıları arasında yaygın bir yanılgı, devasa bir 6000x4000 görseli yükleyip bunu CSS (`width: 100%; height: auto;`) ile sınırlamanın, görseli yüklemeden önce uygun şekilde yeniden boyutlandırmakla eşdeğer olduğudur. Mimari açıdan bakıldığında bu uygulama web performansı ve SEO sıralamaları için felakettir. Aşırı büyük bir görsel sunulduğunda, ziyaretçinin cihazı tüm çok megabaytlık yükü ağ üzerinden indirmek zorunda kalır; bu da tarayıcının kritik oluşturma yolunu tamamen engeller ve berbat Largest Contentful Paint (LCP) sürelerine neden olur.

Dahası, indirildikten sonra tarayıcının görsel oluşturma motoru, kodu çözülmüş raster bit eşlemini tutmak için RAM'de sıkıştırılmamış ham bellek ayırmalıdır (32 bit RGBA rengi için Genişlik x Yükseklik x 4 bayt olarak hesaplanır). Yeniden boyutlandırılmamış 24 megapiksellik bir fotoğraf, yalnızca kodunu çözmek için yaklaşık 100MB ham tarayıcı yığın (heap) belleği talep ederken, uygun şekilde yeniden boyutlandırılmış 1200 piksellik bir varlık için bu değer 4MB'tan azdır. Düşük seviyeli mobil cihazlarda bu aşırı bellek ayırma; agresif çöp toplamayı (garbage collection) tetikler, dokunmatik etkileşimleri kekeletir, Sonraki Boyamaya Etkileşim (INP) metriğini bozar ve sıklıkla tarayıcı sekmesi çökmelerine neden olur. İstemci tarafı aracımızı kullanarak varlıklarınızı önceden boyutlandırmak, medyanız bir üretim sunucusuna ulaşmadan önce tüm bu performans cezasını ortadan kaldırır.