Web Sitesi Görseli İçin PNG mi JPG mi Seçmeli?

Format seçimi bir hız kararıdır

Web sitesi görsellerinde format seçimi estetik değil, performans meselesidir. Ziyaretçinin gördüğü görüntü çoğu zaman iki formatta da aynıdır; fark, o görüntünün tarayıcıya ulaşması için kaç bayt indirilmesi gerektiğindedir. Bir sayfada onlarca görsel varsa, yanlış format seçimi sayfa ağırlığını gereksiz yere birkaç katına çıkarabilir.

Bu yazıda PNG ile JPG'yi web bağlamında karşılaştırıyoruz: hangi içerikte hangisi kazanır, karar verirken hangi soruları sormalısınız ve toplu dönüşüm yaparken nelere dikkat etmelisiniz.

Önce eleyici soru: şeffaflık gerekiyor mu?

Karşılaştırmaya başlamadan önce cevaplanması gereken tek bir soru var. Görselin arka planı saydam olmak zorunda mı?

Cevap evet ise karar bitmiştir: JPG bir seçenek değildir. JPG formatının yapısında alfa kanalı diye bir bileşen tanımlı değildir. Şeffaf bir görseli JPG olarak kaydettiğinizde saydam bölgeler kalıcı olarak düz bir renkle doldurulur — çoğunlukla beyaz. Renkli bir zemin üzerinde duran logonuz aniden beyaz bir dikdörtgenin içine hapsolur.

Cevap hayır ise karşılaştırma anlamlı hale gelir ve karar içerik türüne göre verilir.

İçerik türü: asıl belirleyici faktör

Fotoğrafik içerikte JPG açık ara kazanır. Manzara, portre, ürün çekimi, kalabalık bir sahne — bu tür görsellerde neredeyse her piksel komşusundan farklıdır. PNG'nin kayıpsız sıkıştırması tekrar eden desen bulamadığı için verimsiz kalır. Aynı fotoğrafın PNG hali, JPG halinin birkaç katı olabilir ve makul bir kalite ayarında görünür fark neredeyse yoktur. Bir blog kapak görseli, ekip fotoğrafı veya ürün çekimi için PNG kullanmak, ziyaretçiye hiçbir kazanç sunmadan sayfayı ağırlaştırmaktır.

Grafik ve metin içerikte PNG kazanır. Ekran görüntüsü, arayüz tasarımı, tablo, diyagram, çizgi grafik veya düz zeminli logo geniş tek renk alanlar içerir. PNG bunları çok verimli paketler. JPG ise bu içerikte iki yönden birden kaybeder: hem keskin kenarların çevresinde halelenme ve metinde okunabilirlik kaybı yaratır, hem de keskin kenarlar yüksek frekanslı olduğu için sıkıştırma verimliliği düşer — yani bazen daha kötü görünürken daha büyük dosya üretir.

Arada kalan durumlar. Bazı görseller ikisinin karışımıdır: üzerine yazı eklenmiş bir fotoğraf, ya da fotoğraf içeren bir infografik. Burada pratik kural şudur: görselin baskın karakteri neyse ona göre karar verin. Alanın çoğunu fotoğraf kaplıyorsa JPG, çoğunu düz zemin ve metin kaplıyorsa PNG.

Boyut farkı gerçekte ne kadar önemli

Sayfa ağırlığı doğrudan yükleme süresine, yükleme süresi de ziyaretçinin sayfada kalıp kalmamasına etki eder. Özellikle mobil bağlantılarda bu fark hissedilir hale gelir.

Buradaki asıl mesele tek bir görselin boyutu değil, toplamdır. Bir ürün listeleme sayfasında yirmi ürün fotoğrafı varsa, her birinde yapılan yanlış format tercihi yirmiyle çarpılır. Bu yüzden format kararını görsel görsel değil, görsel kategorisi bazında vermek çok daha verimlidir: "tüm ürün fotoğrafları JPG, tüm arayüz ikonları PNG" gibi bir kural, hem tutarlılık sağlar hem karar yorgunluğunu ortadan kaldırır.

Dönüşüm yaparken kaçınılması gereken hatalar

Toplu ve ayrımsız dönüşüm. Bir klasördeki tüm PNG'leri seçip JPG'ye çevirmek en sık yapılan hatadır. Aralarındaki şeffaf logolar sessizce beyaz kutuya dönüşür ve bunu genellikle site yayına girdikten sonra fark edersiniz. Dönüşüm öncesi şeffaflık içeren dosyaları ayırın.

Zaten sıkıştırılmış görseli tekrar sıkıştırmak. Elinizdeki PNG aslında bir JPG'den üretilmişse, tekrar JPG'ye çevirmek ikinci bir kayıplı tur ekler. Mümkünse her zaman orijinal kaynak dosyadan çalışın.

Kalite ayarını körlemesine seçmek. JPG kalite ayarını çok yükseğe çekerseniz boyut kazancını kaybedersiniz, çok düşürürseniz görünür bozulma oluşur. Dönüşüm sonrası çıktıyı yüzde yüz yakınlaştırıp özellikle düz renk geçişlerine ve keskin kenarlara bakın.

Geri dönüşün olmadığını unutmak. PNG'den JPG'ye geçiş tek yönlüdür. Kaybolan şeffaflık ve atılan detay geri gelmez; JPG'yi tekrar PNG'ye çevirmek sadece mevcut halini kayıpsız saklar. Bu yüzden orijinal PNG'leri silmeyin, bir yerde saklayın. Dosyalarınızı dönüştürmek için PNG'den JPG'ye dönüştürme aracını kullanabilirsiniz.

Pratik bir karar akışı

Her görsel için sırayla şunu sorun: Şeffaflık gerekiyor mu? Evet ise PNG, karar bitti. Hayır ise: içerik fotoğraf mı? Evet ise JPG. Hayır, metin veya keskin kenarlı grafik mi? O zaman PNG. Karışıksa baskın karaktere bakın.

Bu üç adımlı akış, web görsellerinin büyük çoğunluğu için doğru kararı verir ve uzun uzun düşünmeye gerek bırakmaz.

Özetle

PNG ile JPG rakip değil, farklı işler için tasarlanmış araçlardır. Fotoğraflarda JPG belirgin şekilde daha verimlidir ve görünür kalite kaybı yaratmaz. Şeffaflık gerektiren her durumda ve metin-grafik içerikli görsellerde PNG doğru seçimdir. Sitenizin hızını gerçekten iyileştirmek istiyorsanız yapılacak iş, tüm görselleri tek bir formata zorlamak değil, her görseli kendi içerik türüne uygun formata yerleştirmektir.