Yeniden Boyutlandırma mı, Kırpma mı: Web ve Sosyal Medya için Doğru Görsel Boyutları

6000×4000 bir fotoğrafı, görselin 400×300 olarak göründüğü bir e-ticaret ürün listesine yüklersiniz ve platformun sistemi bunu yayınlarken yeniden boyutlandırıp yeniden sıkıştırır. Fotoğraf bunu atlatır ama yüklediğiniz PNG ekran görüntüsü artık bulaşmış gibi görünür: betik onu tek olmayan bir boyuta ölçeklemiş, ikinci bir JPEG sıkıştırmasından geçirmiş ve net arayüz yazılarınızı yumuşak kenarlara dönüştürmüştür. Kaynak dosyada bir kusur yoktu — hasar, zaten bir kez kodlanmış bir görselin, hedef boyutun ne olacağı bilinmeden yeniden boyutlandırılıp yeniden kaydedilmesinden doğar. Bu rehber o süreci kontrol altına almakla ilgilidir: yeniden boyutlandırma ve kırpma işlemlerinin gerçekte ne yaptığını, DPI'nin web pikselleriyle neredeyse hiç ilgisinin olmadığını, sosyal platformların gerçekte hangi boyutları beklediğini ve Convrs'nin tarayıcı araçlarının aynı işi tek bir dosya cihazınızdan çıkmadan nasıl yaptığını.

Yeniden boyutlandırma ve kırpma: iki işlem, tek görsel

İki komut da görselin boyutlarını değiştirdiği için benzer görünür, ama çalışma biçimleri farklıdır ve pratikte hangisini istediğinize bilinçli karar vermeniz gerekir.

• Yeniden boyutlandırma tüm görseli ölçekler: her piksel yeni bir genişliğe ve yüksekliğe sıkıştırılır ya da gerilir; oranı zorlamadığınız sürece en-boy oranı korunur. Bir yerleşimin maksimum boyutuna sığmak ya da dosyayı yüklemeden önce küçültmek için kullanın.
• Kırpma yalnızca dikdörtgensel bir bölgeyi tutar ve dışındaki her şeyi atar. Görsel, içerik eksildiği için küçülür ve neredeyse her durumda en-boy oranı değişir. Çerçeveyi yeniden kurmak, dağınık bir kenarı kesmek ya da bir platformun oranına (16:9, 1:1, 4:5, 9:16) uymak için kullanın.

Pratik sıra genellikle önce kırpma, sonra boyutlandırmadır: önce yerleşimin istediği en-boy oranına kırpın, sonra sonucu piksel boyutuna getirin. Tersi, istenmeyen içeriği hâlâ taşıyan bir çerçeveyi boyutlandırmak ya da zaten enterpolasyona uğramış bir dosyayı kırpmak demektir — küçük ama gerçek bir kalite kaybı.

Geri dönüşü olmayan hasar: yeniden sıkıştırma

JPEG ve WebP kayıplı biçimlerdir. Her kayıt, kodlayıcının görünmez saydığı ayrıntıları atarak pikselleri yeniden niceler. Yeniden sıkıştırma bunu birleştirir: küçültülüp yeniden kaydedilen bir JPEG ikinci kuşaktır; ince kenarlar — yazı, logo, arayüz ekran görüntüleri — halka, sinek gürültüsü ve yumuşama geliştirir. Üçüncü ya da dördüncü kuşakta bozulma küçük resim boyutunda bile belli olur. PNG kaydedildikçe kayıpsızdır, ama tam sayı olmayan bir boyuta ölçeklenip yeniden kodlanan bir PNG ekran görüntüsü yine de enterpolasyona uğrar: çapraz çizgiler merdivenleşir, yazı bulanıklaşır.

Tüm bunları önleyen kural şudur: ana dosyayı saklayın. Orijinal çekimi kaydedin, tam olarak bir kez boyutlandırın ve ondan dışa aktarın. Artık orijinaliniz yoksa — ya da varsa ama üçüncü adımdaki yeniden sıkıştırılmış canavarsa — en iyi kopyanızı yeni ana dosya olarak kabul edin ve onu düzenlemeyi bırakın.

Pikseller, DPI değil: '300 DPI' ne demek

Dijital bir görsel, tam olarak iki özelliği olan bir piksel ızgarasıdır: genişlik ve yükseklik. Web'in okuduğu tek şey budur. DPI (dots per inch, inç başına nokta) ve PPI (pixels per inch, inç başına piksel), bir yazıcının bu pikselleri kâğıda ne kadar yoğun döşediğini anlatır — yalnızca baskıya özgü, meta veri olarak saklanan kavramlar. 1200×1200 bir görsel, DPI etiketi ne derse desin her ekranda — dizüstü ya da telefon — 1200 pikseldir.

Bir müşteri '300 DPI görsel' istediğinde neredeyse her zaman baskı kalitesi istiyordur. 300 PPI'da 5×7 inçlik bir baskı yaklaşık 1500×2100 piksel gerektirir; aynı boyutta bir web banner'ı fazlasıdır. DPI sayısını editörde yükseltmek piksel eklemez — yalnızca meta veriyi yeniden yazar ve bazı araçlarda dosyayı boşuna yeniden kodlar. Web ve sosyal medya için tek soru piksel boyutlarıdır.

Sosyal medya için en-boy oranları ve önceden boyutlandırma

Platformlar yüklediklerinizi kendi yerleşimlerine uyacak şekilde kırpar ve ölçekler; yönlendirici olan da sizin en-boy oranınızdır (genişlik:yükseklik). Oranı doğru verirseniz çerçevenin denetimi sizde kalır; yanlış verirseniz platformun kırpması izleyicilerinizin göreceği şeyi belirler. Pratikte karşınıza çıkacak oranlar:

• 16:9 yatay video ve çoğu paylaşım bağlantısı kartı için (Facebook/LinkedIn).
• 1:1 Instagram akış kareleri ve profil ızgaraları için.
• 4:5 dikey akış gönderileri için — Instagram akışının kırpmadan gösterebildiği en uzun oran.
• 9:16 Stories, Reels, Shorts ve TikTok için.

Ezberlemeye değer yerleşimler:

Önceden boyutlandırma kuralı: gerçekten ihtiyacınız olan en büyük yerleşimi üretin ve ondan aşağı kırpın. Hem akış gönderisi (1:1) hem story (9:16) önemliyse kareyi 1080×1080 olarak üretin, sonra dikeyi aynı ana dosyadan hazırlayın — hâlâ küçük bir karenin içinden 9:16 çerçeve koparmayın. Platformlar yüklediğinizi yeniden sıkıştırır; doğru oranı ve rahatça büyük bir dosyayı verirseniz bir kez sıkıştırırlar, iki kez değil.

Tarayıcıda canvas ile yeniden boyutlandırma

Kod içinde — burada ya da bir yükleme bileşeninde — boyutlandırırken tarayıcı size canvas verir ve kaliteyi iki bayrak belirler. Bir fotoğrafın keskin biçimde küçültülmesi düzleştirmenin açık olmasını ister ve imageSmoothingQuality: 'high' tarayıcıyı daha pahalı ama gözle görülür biçimde daha iyi bir filtreye geçirir. EXIF dönüşünü de ele almak gerekir: telefonlar fotoğrafları dik kaydeder ama bir dönüş etiketiyle işaretler; saf drawImage çağrıları bu etiketi yok sayarak fotoğrafınızı yan yatık gösterir.

async function resizeToMax(file, maxDim, quality = 0.82) {
  // Görseli çözer ve kameranın EXIF dönüş etiketine saygı duyar
  const bitmap = await createImageBitmap(file, {
    imageOrientation: "from-image",
  });

  const scale = Math.min(1, maxDim / Math.max(bitmap.width, bitmap.height));
  const w = Math.max(1, Math.round(bitmap.width * scale));
  const h = Math.max(1, Math.round(bitmap.height * scale));

  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  ctx.drawImage(bitmap, 0, 0, w, h);

  // Kırpmak için istediğiniz kaynak bölgeyi çizin:
  // ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, w, h);

  const blob = await new Promise((resolve) =>
    canvas.toBlob(resolve, "image/webp", quality) // veya "image/jpeg"
  );
  bitmap.close(); // çözülen bitmaplerin belleğini boşaltır
  return blob;
}

Ölçek kasıtlı olarak 1 ile sınırlandırılmıştır: Math.min(1, ...) kelepçesi bu işlevin asla büyütme yapamamasını sağlar. Çıktı yalnızca aynı boyutta ya da daha küçük olur — web görselleri için kural tam da budur.

Bir araçta mı boyutlandıralım, yoksa CSS'ye mi bırakalım

CSS görünümü ölçekler, baytları değil. max-width: 100%, object-fit: cover (bir CSS kırpması) ve srcset ile sizes birlikte görüntülenen fotoğrafı her görüntü alanına uyarlar — doğrudur ve ucuzdur. Ama tarayıcı yine de orijinal dosyayı indirir. CSS onu 400 piksele küçültsün diye 6000×4000 bir JPEG yüklemek her sayfa görüntülemesinde megabayt harcar ve görseli ağda kimsenin fark etmediği kadar uzun süre tutar.

Web'e uygun sıra: dosyayı herhangi bir yerleşimin ihtiyaç duyabileceği en büyük boyuta getirin — retina için ortak 2× kuralı, yani tam ekran görülebilecekse 1920 ya da 2400 genişlik — sonra daha küçük kırılımlarda CSS'in küçültmesine izin verin ve yavaş cihazlar için srcset içinde birkaç açık boyut belirtin. Görsel dosyaları statiktir: her ziyaretçiye yeniden sıkıştırma vergisi ödetmek yerine onları bir kez doğru üretin.

Yuvarlak sayılar, iki katları ve büyütmeme kuralı

Üç alışkanlık dışa aktarımları öngörülebilir kılar. İlki, yuvarlak boyutlara dışa aktarın: 1193 değil 1200 genişlik. Tek sayılar zincirleme ölçekleme matematiğinden çıkar ve görünür enterpolasyon izleri davet eder. İkincisi, sabit bir faktörle küçültüyorsanız temiz adımları tercih edin — 0.5×, 0.25× — çünkü bazı hatlar (döşeme, mipmap, doku atlası ve bazı küçük resim servisleri) iki katlarında en iyi şekilde yeniden örnekler; 2048 piksellik bir kaynak 1024'e indirilirken 2×2 blokları temizce ortalar, 1000 ise kesirli örnekleme getirir.

Üçüncüsü, bulanık görselleri her filtreden daha çok düzelten kural: web görselini asla doğal çözünürlüğünün ötesine büyütmeyin. Büyütme piksel uydurur. 400 piksel genişliğindeki bir görsel 1200'e gerildiğinde hâlâ 400 piksellik gerçek ayrıntı taşır — enterpolasyon gerisini tahmin eder ve hiçbir keskinleştirme filtresi, hiç yakalanmamış bilgiyi ekleyemez. Yerleşim 1200 piksel istiyor, kaynağınız 400 ise yeniden çekin ya da yeniden üretin; editörde 'iyileştirmeye' çalışmayın.

Filtreler ve filigranlar: son rötuşlar, doğru sırada

Filtreler ve filigranlar en sona aittir: boyutlandırma ve kırpma son çerçeveyi kilitledikten sonra. Önce filigran, sonra kırpma olursa kendi logonuzu kare dışına atmış olursunuz; filigranı boyutlandırmadan önce eklerseniz yazı okunamayacak kadar küçülebilir ya da filigran, teslim edilenle ilgisi olmayan bir çerçeveye göre ölçeklenir.

Sağlam bir sıra: (1) görünümü kaynağa uygulayın — gri tonlama, sepya, parlaklık/kontrast, doygunluk, bulanıklık; (2) hedef orana kırpın; (3) hedef piksel boyutuna getirin; (4) filigranı nihai görsele göre boyut ve opaklıkla ekleyin; (5) bir kez dışa aktarın. Metin filigranları küçük boyutlarda okunabilirlik açısından genellikle görsel filigranlardan iyidir; kısa kenarın %4–6'sı boyut ve %30–50 opaklıkla bir köşe, yaygın ve göze batmayan bir varsayılandır. Tüm düzenlemelerden sonra tek kez dışa aktarmak kalite vergisini tek bir kuşak kaybında tutar.

Convrs'teki görsel araçları

Convrs tüm hattı tarayıcıda sunar ve dosyalar cihazınızdan asla çıkmaz: Görsel Boyutlandırıcı piksellere göre ya da yüzdeyle, kalite kontrolüyle boyutlandırır, Görsel Kırpıcı en-boy oranı önayarlarına (16:9, 1:1, 4:5, 9:16) ya da özel bir kutuya kırpar, Görsel Filtreleri gri tonlama, sepya, parlaklık/kontrast/doygunluk ve bulanıklık uygular, Filigran Ekleme konum, boyut ve opaklıkla metin ya da görsel filigran bindirir, Görsel Sıkıştırıcı da yükleme için dosya boyutunu küçültür. Oranı kilitli kırpın, platform piksellerine boyutlandırın, görünümü keskinleştirin, bir kez filigranlayın, yol için sıkıştırın — ana dosya ve türetilmiş her dosya makinenizde kalır, yalnızca bitmiş dışa aktarım hareket eder.