Logo Dosyası Kaç Piksel Olmalı?

Web başlığında logo: görüntüleme boyutu ve dosya boyutu ayrımı

Çoğu web başlığında logo 120 ile 300 piksel genişliği arasında görüntülenir. Bu değer tamamen tasarım kararına bağlıdır ve sitenin layout yapısına göre değişir. Önemli olan, bu görüntüleme boyutunu baz alarak dosya boyutuna karar vermektir.

Standart (1x) ekranlar için dosya genişliğinin görüntüleme boyutuna eşit olması yeterlidir. Retina ve yüksek yoğunluklu ekranlar (2x device pixel ratio) için ise dosyanın görüntüleme boyutunun iki katı genişlikte olması gerekir. Yani logonuz başlıkta 220 piksel genişliğinde görünecekse, 2x için 440 piksel genişliğinde bir PNG yeterlidir. Bu değerin üstüne çıkmak — 800, 1200 veya 2000 piksel üretmek — ekran kalitesine herhangi bir katkı sağlamaz; yalnızca dosya boyutunu ve sayfa yükleme süresini artırır.

Yükseklik için ayrı bir hesap yapmak gerekmez. Logo oranı sabit tutularak genişlik üzerinden boyutlandırma yapıldığında yükseklik otomatik türetilir. HTML'deki width ve height attribute'larını gerçek dosya piksel boyutlarıyla eşleştirmek, tarayıcının yükleme öncesinde alan rezerve etmesini sağlar ve layout kaymasını önler.

Retina ekranlar için 2x logo üretmek yerine SVG tercih etmenin mümkün olduğu durumlarda piksel kararı tamamen farklı bir boyuta taşınır; bu durum son bölümde ayrıca ele alınmaktadır.

Favicon için logo: küçük ölçekte ayrı bir yaklaşım

Favicon bağlamında logo boyutu meselesi farklı bir soruya dönüşür. Tarayıcı sekmeleri, yer imleri, işletim sistemi görev çubukları ve kısayol simgeleri için kullanılan favicon boyutları 16×16 ile 48×48 piksel arasında değişir. Bu ölçeklerde logonun tam versiyonunu — özellikle sözcük içeriyorsa — okunaklı kılmak çoğunlukla mümkün değildir.

16×16 pikselde yedi harfli bir logotipin okunabilmesi neredeyse imkânsızdır. Bu nedenle favicon için çoğu durumda logonun sadeleştirilmiş türevi ya da yalnızca sembol kısmı kullanılır: ilk harf, grafik işaret ya da markayı temsil eden tek bir basit şekil. Bu sadeleştirme orijinal logodan tamamen bağımsız olmamalı; renk ve temel form tutarlılığını korumalıdır.

Favicon üretiminin ayrıntılarına bakıldığında .ico dosyasının hâlâ önemli olduğu görülür: eski tarayıcılar ve bazı platformlar yalnızca .ico'yu tanır. Modern yaklaşım, temel olarak .ico dosyasını koruyup yanına SVG favicon eklemektir. SVG favicon modern tarayıcılarda tüm boyutlarda keskin görünür ve karanlık mod gibi sistem tercihlerine CSS ile yanıt verebilir; bu esneklik raster favicon'da yoktur.

Özetle favicon için logo boyutu meselesi piksel sayısından çok tasarım sadeleştirmesiyle ilgilidir. Hangi ölçekte ne görünmesi gerektiğini belirleyip bu bağlam için ayrı bir varlık üretmek, header logosunu küçültmeye çalışmaktan her zaman daha iyi sonuç verir.

Raster logoda üretim boyutu: nerede durmalı

PNG ya da WebP formatında üretilen raster logolar için boyut kararı, görüntüleme boyutunun iki katında sınırlanmalıdır. Pratikte bu, web kullanımı için çoğu logonun 400 ile 800 piksel genişliği arasında dosya boyutuna ihtiyaç duyduğu anlamına gelir. Bu aralık; standart ekranlarda keskin, 2x retina ekranlarda netlik kaybı olmaksızın görünmeyi sağlar.

Daha büyük dosya üretmenin cazibesi gerçek fakat yanıltıcıdır: "büyük üreteyim, her yerde çalışır" mantığı web bağlamında geçerli değildir. Ekranın piksel yoğunluğu belirli bir değerin üzerinde arttığında — çoğu consumer cihazda 3x nadiren anlam taşır — gözün algılayabileceği fark ortadan kalkar. 3x kaynak dosyası yalnızca çok yüksek yoğunluklu büyük ekranları hedefleyen senaryolarda anlamlı hale gelir; ortalama bir web projesi için 2x yeterlidir.

Baskı için hesap farklıdır. 300 DPI baskıda 10 cm genişliğinde çıktı alınacaksa gereken piksel sayısı 1180 piksel civarındadır — bu web boyutlarının oldukça üzerindedir. Ama bu hesap yalnızca baskı bağlamı için geçerlidir; web'e aynı dosyayı kullanmak dosya boyutunu gereksiz yere büyütür. İki bağlamı birbirinden ayırarak her birine uygun dosya üretmek operasyonel olarak daha temizdir.

Şeffaf arka plan gerektiren logolarda PNG tercih edilir; şeffaflık gerekmiyorsa WebP daha küçük dosya boyutu üretir. SVG, PNG ve raster format arasındaki seçimi konu içeriğine ve kullanım bağlamına göre değerlendirmek gerekir; her durumda tek bir format cevabı yoktur.

Sosyal medya ve meta görsellerinde logo kullanımı

Open Graph ve Twitter Card protokolleri 1200×630 piksel boyutunda görsel bekler. Logo bu alana yerleştirilmek istendiğinde iki seçenek çıkar: logo doğrudan OG görseli olarak kullanılır ya da bir arka plan kompozisyonuna dahil edilir.

Logo tek başına OG görseli olarak kullanıldığında çoğunlukla ya köşede küçük görünür — çünkü oranlar tutmaz — ya da yatay bir logo 1200×630 alanında orantısız biçimde küçük, etrafı beyaz boşlukla çevrilmiş bir nesneye dönüşür. Sosyal medya platformlarının önizleme kartlarında bu görüntü ikna edici olmaz; paylaşım önizlemesinin görsel ilgisi ortadan kalkar.

Daha işlevsel yaklaşım şudur: marka rengiyle ya da markayla uyumlu bir arka plan üzerine logo ortalanmış, varsa kısa bir başlık ya da slogan metniyle birleştirilmiş 1200×630 piksel bir görsel üretmek. Bu görsel hem logonun okunabilirliğini korur hem de sosyal medyada dikkat çekici bir kart oluşturur.

Bu görselin raster format olması zorunludur; SVG Open Graph görseli olarak çalışmaz. PNG veya JPEG üretilmeli ve platformun sıkıştırma davranışı göz önünde bulundurularak kalite seçilmelidir. Facebook, Twitter ve LinkedIn dosyayı yeniden işler; JPEG için 85 ile 90 kalitesi arasında başlamak ve yeniden sıkıştırma sonrası görüntüyü kontrol etmek yerinde olur.

SVG logosu varken piksel kararı nasıl değişir

SVG çözünürlükten bağımsızdır: tarayıcı ne boyuta indirirse indirsin, ne kadar büyütürse büyütsün vektör keskinliğini korur. Bu nedenle web başlığı için SVG logo kullanıldığında piksel sayısı değil dosya boyutu — kilobayt cinsinden — önem kazanır. Optimize edilmiş bir SVG logo genellikle 5 ile 20 kilobayt arasında kalır; bu değer retina desteği de dahil her çözünürlükte geçerlidir.

Ancak SVG'nin bu avantajı tüm bağlamlarda geçerli değildir. Favicon için hâlâ raster versiyonlar gereklidir; .ico dosyası SVG ile birlikte sunulsa bile eski ortamlar için raster yedek önemini korur. OG görseli için raster üretmek zorunludur — sosyal platformlar SVG kabul etmez. E-posta imzalarında SVG güvenilir biçimde çalışmaz; HTML e-posta istemcilerinin büyük bölümü SVG'yi desteklemez; e-posta için PNG tercih edilmelidir.

"SVG varsa piksel kararı gerekmez" yaklaşımı bu nedenle eksiktir. Daha doğru çerçeve şudur: SVG web başlığı, hero alanı ve benzeri ölçeklenebilir yüzeyleri karşılar; favicon, OG görseli ve e-posta gibi raster gerektiren bağlamlar için özel dosyalar üretilmelidir. SVG dosya boyutunu optimize etmek piksel değeriyle değil, tasarım aracından gelen gereksiz metadata ve path verisini temizlemekle ilgilidir; bu iki konu farklı süreçler gerektirir.

Logo için tek bir "doğru piksel sayısı" yoktur; bağlam sayısı kadar boyut kararı vardır. Web başlığı için görüntüleme boyutunun iki katı genişliğinde raster ya da SVG; favicon için 16/32/48 piksel raster artı tercihen SVG favicon; sosyal medya için 1200×630 raster kompozisyon; baskı için bağımsız yüksek çözünürlüklü versiyon. Bunlar birbiriyle ilişkili ama birbirinin yerine geçemeyen kararlardır.

Bu kararları tek dosyayla karşılamaya çalışmak yaygın bir operasyon hatasıdır. Başlık için optimize edilmiş büyük PNG favicon'da tanınamaz hale gelir; favicon için üretilmiş küçük PNG başlıkta retina ekranda yetersiz kalır; ikisi için "orta bir değer" seçmek her iki bağlamda da yarım çözüm üretir. Her bağlam için uygun boyut ve formatta ayrı dosya üretmek karmaşık görünebilir; ama bakım kolaylığı ve görsel kalite açısından her bağlam için ayrı dosya tutmak pratikte daha az sorun üretir.

Başlangıç noktası olarak SVG varsa SVG ile başlamak en az karmaşıklık yaratır: web yüzeyleri otomatik olarak kapsanır, ardından favicon ve sosyal medya için bağlama özgü dosyalar eklenir. SVG yoksa görüntüleme boyutunun 2 katı genişliğinde PNG temel kabul edilir ve her bağlam bu temelden türetilir. Hangi yoldan gidilirse gidilsin, karar bağlamdan başlamalı — piksel sayısından değil.