Logonuz neden JPG değil PNG olmalı

Logonuz, işletmenizde en çok yeniden kullanılan tek görsel. Web sitenizde, e-posta imzalarınızda, faturalarda, sunumlarda, sosyal medyada, basılı materyallerde ve düzinelerce belgeye gömülü olarak görünüyor. JPG olarak kaydedildiyse, bu kullanımların her biri biraz bozulmuş — bazıları ciddi şekilde kırılmış.

Kısa versiyon

Logo bir fotoğraf değil. Genellikle düz renklerden, keskin kenarlardan ve bazen metinden oluşan bir grafik — tam olarak JPG’nin kötü başa çıkmak için tasarlandığı şeyler.

JPG sıkıştırma aktif olarak şunlara zarar veriyor:

• Keskin kenarlar (harf veya logo şeklinin ana hattı)
• Düzgün renk alanları (madalyon veya rozetin arka planı)
• Doğrudan işlenmiş metin (harflerin etrafında “yankı” oluşturuyor)

Ve JPG şunu kesinlikle yapamaz:

• Şeffaf arka planlar — logoların PNG olması gerektiğinin en büyük nedeni

Şeffaflık sorunu

Beyaz olmayan bir arka plana — renkli şerit, fotoğraf, gradyan — logo yerleştiren herhangi bir web sitesi başlığına bakın. Logonun temiz bir şekilde oturması, etrafında beyaz dikdörtgen olmaması gerekir. Bu şeffaflık gerektirir.

JPG şeffaflığı desteklemiyor. Logoyu JPG olarak kaydederseniz, her şeffaf piksel düz beyaza (veya hangi dolgu rengi ayarlıysa ona) dönüşür. O beyaz dikdörtgen, logo saf beyaza yerleştirilmediği her yerde ortaya çıkar.

Olağan sonuçlar:

• Koyu navigasyon çubuğundaki logonuz — logonun etrafında beyaz kutu, kullanıcıya bağırıyor
• Fotoğrafın üzerindeki logonuz — aynı beyaz kutu
• Karanlık moddaki logonuz — yine o beyaz kutu
• Markalı renge sahip e-posta başlığındaki logonuz — utanç dikdörtgeni

PNG tam alfa kanalı destekler — her piksel tamamen şeffaf, kısmen şeffaf veya tamamen opak olabilir. Logo herhangi bir arka plana doğal oturur.

Metnin etrafındaki “yankı” sorunu

JPG görüntüleri 8×8 piksel bloklara bölerek ve her bloğu matematiksel eğriyle tahmin ederek sıkıştırır. Fotoğrafın kademeli geçişleri için harika çalışır. Siyah metin ile beyaz arka plan arasındaki sert geçiş için berbat.

Herhangi bir tipik web kalitesinde (%60-85) JPG olarak kaydedilmiş logo metnine yakınlaştırın ve şunları göreceksiniz:

• Her harfin etrafında soluk renkli lekelerden oluşan hale
• Keskin olması gereken yerlerde yumuşatılmış kenarlar
• Düz arka plan olması gereken yerde hafif renk değişimi

Bu bozulmalar gözün çekildiği tam noktalarda — harflerin kendisinde — en kötü. PNG aynı görüntüyü piksel-piksel kaydeder, bozulma yok, kenarlar korunmuş.

Nesil kaybı: her kayıt daha kötüye gidiyor

Logoyu JPG olarak kaydettiniz diyelim. Sonra bir iş arkadaşı açıp yeniden boyutlandırıyor ve tekrar kaydediyor. Sonra PowerPoint’e gömülüp dışa aktarılıyor. Sonra biri ekran görüntüsü alıp kırpıp yeniden kaydediyor.

Her kayıt kayıplı bir sıkıştırma adımı. JPG kalitesi her seferinde bozuluyor — buna nesil kaybı deniyor. Birkaç kayıttan sonra bulanık kenarlar ve birikmiş sıkıştırma gürültüsüyle nihai sonuç, kaynaktan belirgin şekilde daha kötü görünüyor.

PNG’nin nesil kaybı yok. Bir PNG’yi bin kez kaydedin, açın, tekrar kaydedin — dosya her seferinde bit-bit aynı. Logo kaç elden geçerse geçsin keskin kalır.

Yan yana: gerçek dünya senaryosu

Lacivert kalkan, beyaz “ACME” harfleri, şeffaf arka plan. Her durumda ne oluyor:

Senaryo	JPG olarak logo	PNG olarak logo
Beyaz web sitesi başlığında	İyi görünüyor (JPG bozulmaları belli belirsiz)	İyi görünüyor, kaynakla aynı
Lacivert e-posta afişinde	Kalkanın etrafında beyaz dikdörtgen — bozuk	Mavi üzerinde doğal oturuyor
Hero fotoğrafının üzerinde	Beyaz dikdörtgen fotoğrafı engelliyor	Kalkan temiz süzülüyor
5 yeniden kayıttan sonra	”ACME” metni etrafında görünür bulanıklık	Orijinalle piksel-özdeş
Renkli kağıda basıldığında	Beyaz kutu özellikle fark edilir	Sadece çizilen yere mürekkeple basılır
Karanlık mod PDF’e gömülü	Koyu sayfaya karşı beyaz dikdörtgen	Görünmez arka plan
Slayt sunumunda 4× yakınlaştırmada	Kenarların etrafında bloklu bozulmalar	Kenarlar keskin kalıyor

Dosya boyutu — PNG gerçekten daha mı büyük

Yaygın itiraz: “ama PNG dosyaları çok daha büyük.” Bir logo için bu neredeyse hiç doğru değil.

Logo tipik olarak şunlara sahip:

• Birkaç farklı renk (belki 2-5)
• Geniş düz renk alanları
• Keskin kenarlar ve basit şekiller

Bu tam olarak PNG sıkıştırmasının iyi olduğu şey. Tipik 600×600 logo:

• JPG (kalite 85): 30-80 KB
• PNG (24-bit + alfa): 15-60 KB
• PNG-8 (indeksli, ≤256 renge sahip logolar): 5-20 KB

Basit renk paletli logolar için PNG genellikle JPG eşdeğerinden daha küçük. Fotoğraflar JPG’nin boyutta kazandığı yer. Logolar PNG’nin hem boyutta hem kalitede kazandığı yer.

Ama logom SVG olmalı değil mi

Web kullanımı için evet, SVG teknik olarak en iyi format: sınırsız ölçeklenebilir, küçük dosya, herhangi bir çözünürlükte mükemmel keskin. Tasarımcınızdan SVG alabiliyorsanız, kullanın.

Ama SVG’nin sınırları var:

• E-posta istemcileri — çoğu SVG’yi güvenilir işlemiyor
• Office belgeleri — tutarsız SVG desteği
• Sosyal medya yüklemeleri — çoğu platform SVG reddediyor
• Baskı iş akışları — genellikle raster dosyalar bekleniyor

PNG evrensel yedek. SVG’nin çalışmadığı her yer için PNG en iyi seçenek — farklı kullanım durumları için birkaç standart çözünürlükte (400×400, 800×800, 1600×1600) bulundurmanız gereken şey.

Düzeltme: beş dakikalık yükseltme

JPG logo kullanıyorsanız şu adımları izleyin:

1. Orijinal kaynağı bulun — Photoshop dosyası, Illustrator dosyası veya yüksek çözünürlüklü ana kaynak. Bu şeffaflık bilgisini geri verir.

2. Kaynağınız yoksa — JPG her şeffaf piksele beyaz arka plan zaten işlemiştir. Arka planı manuel kaldırmanız (sıkıcı) veya logoyu yeniden oluşturmanız gerekir (tasarımcınız iyi bir JPG’den bunu hızla yapabilir).

3. PNG olarak dışa aktarın, kullanacağınız en büyük boyutun en az 2 katı çözünürlükte. Web’de 200 px genişlikte görünecekse, retina ekranlar için en az 400 px dışa aktarın.

4. Her yerde değiştirin. Web sitesini, e-posta imzalarını, belge şablonlarını güncelleyin ve yeni dosyayı ekiple paylaşın.

Yalnızca hızlı bir JPG→PNG dönüşümü gerekliyse — arka plan kaldırma için tasarımcıya teslim etmek gibi — JPG’den PNG’ye dönüştürücümüz bunu tarayıcınızda saniyeler içinde yapar. Hiçbir şey yüklenmez; logonuz özel kalır.

Çıkarım

JPG logo bir markalaşma hatası. Logonuzun harmanlanması gereken yerlere çirkin dikdörtgenler ekliyor, markanızı tanınır kılan kenarları yumuşatıyor, kaydedildikçe kademeli kötüleşiyor. PNG bunların hepsini düzeltiyor — genellikle daha küçük dosya boyutunda — ve yükseltmek yaklaşık beş dakika alıyor.

Bu yıl marka dosya hijyeni hakkında yalnızca bir şey değiştirirseniz, bu olsun.