Yüklediğin dosya, tuvalde gösterilen dosya değil. Ne yüklersen yükle — PNG, JPEG, WebP, GIF, AVIF — sunucu görseli sıfırdan PNG olarak yeniden yazıyor ve tam ölçüye getiriyor. Yani "hangi format daha iyi sıkışır" sorusunun burada pratikte bir karşılığı yok.
Ama seçim yine de önemli, çünkü yeniden kodlama kaynağın kalitesini düzeltmez. Bozuk giren bozuk çıkar. Bu yazı tam olarak neyin korunduğunu, neyin kaybolduğunu ve neyi dışa aktarman gerektiğini anlatıyor.
Yeniden kodlama tam olarak ne yapıyor
Dosyan yüklendikten sonra sırayla:
- Dosyanın gerçek türü kendi baytlarından doğrulanıyor. Uzantıya ve tarayıcının bildirdiği tipe bakılmıyor.
- Görsel çözülüyor, çözülmüş boyut için bir üst sınır uygulanıyor.
- Kiraladığın alanın tam pixel karşılığına ölçekleniyor: blok sayısı × 10.
- Sıfırdan PNG olarak yazılıyor.
Bunun somut sonuçları var.
Korunmayanlar: EXIF verisi, çekim konumu, fotoğraf makinesi bilgisi, renk profili etiketleri, dosyanın sonuna eklenmiş her şey, animasyon kareleri, katmanlar, çok sayfalı yapılar, gömülü küçük önizlemeler. Hiçbiri çıkış dosyasına geçmiyor. Bu bir gizlilik özelliği: kendi telefonundan çektiğin bir görseli yüklersen konum bilgisi tuvale çıkmaz.
Korunanlar: pixellerin kendisi ve saydamlık kanalı. Yani tasarımın. Ve maalesef tasarımındaki her kusur.
Değişebilenler: ölçek. Kaynak dosya hedef ölçüde değilse yeniden boyutlandırılır. En boy oranı tutmuyorsa kenarlardan kırpılır — ortalanmış bir "kapla" davranışı — ve yükleme sırasında bu konuda uyarılırsın.
Neden kayıplı kaynak pixel işini bozuyor
JPEG, fotoğraf için tasarlandı. Yumuşak geçişleri, doğal dokuları, kademeli renk değişimlerini çok verimli sıkıştırır. Bunu yaparken görüntüyü küçük bloklara ayırır ve her blokta gözün fark etmeyeceğini varsaydığı detayı atar.
Sorun şu: pixel sanatında gözün fark etmeyeceği detay yok. Her şey sert kenar, düz dolgu ve yüksek kontrastlı sınır. JPEG'in attığı tam da bu bilgi. Sonuçta:
- Keskin kenarların etrafında hafif dalgalanmalar oluşur — "halkalanma" denir. Siyah bir çizginin iki yanında hayalet gri pixeller görürsün.
- Düz dolgu alanlar tam olarak düz kalmaz. Tek renk olması gereken bir zemin, birbirine çok yakın birkaç tona bölünür.
- Metin en çok zarar gören öğedir. Zaten 5–7 pixel yüksekliğindeki bir harfin kenarları bulanınca harf okunmaz.
Bu bozulmalar kaynak dosyaya kalıcı olarak işlenmiş oluyor. Sunucu PNG'ye çevirdiğinde bozulmayı geri alamaz, sadece bozuk pixelleri sadakatle kopyalar. Aynısı kayıplı modda kaydedilmiş WebP ve AVIF için de geçerli.
Somutlaştıralım: 50 × 20 pixellik bir alan kiraladın — 1.000 pixel, haftada 1.000 dolar. Dört hafta tutarsan 4.000 dolar. Bu alanda bozulmanın etkilediği yer avuç içi kadar bir ekran parçası, ve o parçada 1.000 pixelin var. Yüzde birlik bir bozulma 10 pixel demek — yani logonun bir kenarının tamamı. Bu ölçekte kayıplı sıkıştırmayla tasarruf edilecek bir şey yok; dosya boyutu zaten önemsiz.
Format format
PNG. Kayıpsız. Sert kenarları, düz dolguları ve saydamlığı tam olarak korur. Küçük, az renkli görsellerde dosya boyutu da zaten küçük olur. Bu işin doğru formatı.
JPEG. Kayıplı, saydamlık desteklemez. Fotoğraf için iyi, pixel işi için kötü. Reklamın gerçek bir fotoğraf içeriyorsa ve elindeki tek kaynak JPEG'se kullanabilirsin — ama önce fotoğrafı hedef ölçüye getirip PNG olarak kaydet, yeniden JPEG'leme.
WebP. Hem kayıpsız hem kayıplı modu var, saydamlığı destekler. Kayıpsız modda kaydedildiyse PNG kadar iyidir. Sorun şu ki dosyaya bakarak hangi modda kaydedildiğini anlamak kolay değil, ve çoğu dışa aktarma varsayılanı kayıplıdır. Emin olamıyorsan PNG'ye geç.
AVIF. Modern ve çok verimli. Ama verimliliği büyük fotoğraflarda anlamlı; 100 pixellik bir görselde kazanç yok, üstelik varsayılan olarak kayıplıdır. Kabul ediyoruz, ama seçmek için bir sebep göremiyorum.
GIF. Kabul ediliyor, ama animasyonu çalışmıyor. Tuval tek bir birleşik durağan görüntü olarak sunuluyor, bu yüzden GIF'in sadece ilk karesi alınıyor.
Hareketli GIF yüklemeden önce
Animasyonun çalışmayacağını bilmek yetmiyor; ilk karenin ne olduğunu kontrol etmen gerekiyor. Çoğu animasyonun ilk karesi tasarımın "tam" hali değildir — bazen boş bir zemin, bazen bir geçiş karesi, bazen sadece logonun yarısıdır.
Yapman gereken: animasyonun en anlamlı karesini seç, onu tek başına dışa aktar, PNG olarak yükle. Böylece ne göreceğini tahmin etmek zorunda kalmazsın.
Animasyon şart diye düşünüyorsan şöyle düşün: tuvalde herkes durağan. Hareket eden tek şey olmak avantaj gibi görünür ama teknik olarak mümkün değil, ve bunun yerine kontrastı ve formu güçlendirmek aynı dikkati daha güvenilir biçimde çeker.
Saydamlık ne yapıyor
PNG ve WebP saydamlık kanalı taşır, JPEG taşımaz. Bu, koyu zeminli bir tuvalde önemli bir karar.
Görselinin bir kısmını saydam bırakırsan orada tuvalin kendi koyu zemini görünür. Yani "saydam" pratikte "neredeyse siyah" demek. Bunu bilerek kullanabilirsin: logonu saydam zeminle yüklersen alanın sınırı kaybolur, tasarım tuvale gömülür. Bazı markalar için bu tam istenen etkidir.
İstediğin bu değilse — alanının bir nesne gibi okunmasını istiyorsan — saydamlığı kullanma, dikdörtgenin tamamını dolu bir renkle doldur. Ara bir yol da var: kenarlarda dolu bir plaka, içeride saydam bir alan.
Dikkat edilecek nokta yarı saydamlık. Kısmi opaklık taşıyan yumuşak kenarlar, koyu zeminin üstünde beklediğinden daha sönük durur, çünkü karıştıkları şey siyaha yakın bir renk. Beyaz arka planlı tasarım programında ferah görünen bir gölge, tuvalde kirli bir bulanıklığa dönüşür. Yumuşak kenarları at, sert kenarla çalış.
Doğru dışa aktarma
Pratik reçete:
- Tasarımını hedef ölçüde kur. 5 × 2 blok kiraladıysan tuvalin 50 × 20 pixel olsun. Büyük tasarlayıp otomatik küçültmeye bırakma; büyük çalışmak zorunda kaldıysan küçülttükten sonra sonucu pixel pixel elle düzelt.
- Küçültürken yumuşak değil sert bir yeniden örnekleme kullan — "en yakın komşu" pixel işinde kenarları keskin bırakır. Yumuşak yöntemler sınırları bulanıklaştırır.
- PNG olarak kaydet. Sıkıştırma ayarı varsa en yüksek seviye zaten kayıpsızdır, kaliteyi etkilemez.
- Kaydettikten sonra dosyayı %100 yakınlaştırmada aç ve bak. Ekranda gördüğün şey, tuvalde göreceğin şeyin ta kendisi.
- En boy oranını kontrol et. 50 × 20 için oran tam 5:2 olmalı. Değilse kenarlardan kırpılır.
Bir şey daha: SVG yükleyemezsin. SVG bir görsel dosyası değil, bir kod dosyasıdır ve tasarım programından çıkan varsayılan format bazen odur. Vektör çalışıyorsan dışa aktarma ekranında formatı PNG'ye çevir ve genişlik/yükseklik alanlarına hedef pixel sayısını yaz.
Kaynak dosyanı sakla
Yüklediğin PNG'yi ve onu ürettiğin kaynak dosyayı sakla. İki sebepten:
Revizyon. Görselin moderasyondan geçmezse alan sende kalır ve düzeltilmiş yeni bir sürüm yüklersin; kiralama sayacı onayla başladığı için bu sürede bir şey kaybetmezsin. Ama elinde kaynak yoksa düzeltmeyi sıfırdan yapmak zorunda kalırsın.
Yenileme. Süreni uzattığında ya da aynı alanı tekrar kiraladığında görseli güncellemek isteyebilirsin. Aynı ölçüde çalışmaya devam eden bir kaynak dosya, bunu beş dakikalık bir işe indirir.
Dosya adına ölçüyü yazmak basit ama işe yarar bir alışkanlık: logo-50x20.png gibi. Üç ay sonra hangi dosyanın hangi alan için olduğunu hatırlamazsın.
Kısa özet
Format sorusunun cevabı kısa: tam ölçüsünde PNG. Kayıplı kaynaklar sert kenarlara zarar veriyor ve sunucudaki yeniden kodlama bu zararı geri alamıyor; GIF'ten sadece ilk kare alınıyor; AVIF ve WebP'nin verimliliği bu ölçekte hiçbir şey kazandırmıyor. Doğru ölçüde, kayıpsız, kontrol edilmiş bir PNG hazırla — gerisini sistem halleder.