JPG vs PNG vs WebP vs AVIF — Aslında Hangi Görüntü Formatını Kullanmalısınız?

JPG (JPEG) anne babanızın adını bilmeden kullandığı formattır. 1992 yılında oluşturulan bu format, otuz yıldır varsayılan fotoğraf formatı olmuştur. Dünyadaki her cihaz, her tarayıcı, her uygulama JPG'leri açar. Kayıplı sıkıştırma kullanır; yani dosya boyutunu küçültmek için bazı görüntü verilerini atar. Yüksek kaliteli ayarlarda (%85-95), fark çoğu kişi tarafından görülmez. Düşük kalitede, kenarlarda karakteristik "bloklu" yapılar elde edersiniz.

PNG tasarımcıların sevdiği formattır. Kayıpsız sıkıştırma kullanır; hiçbir veri kaybolmaz. Bu iki nedenden dolayı önemlidir: şeffaflık desteği (JPG şeffaf arka planlar yapamaz) ve metin netliği. Ekran görüntüleri, logolar, metinli grafikler, keskin çizgileri olan her şey — PNG bunları mükemmel şekilde halleder. Takas dosya boyutundadır: PNG, aynı fotoğrafın JPG'sinden kolaylıkla 5-10 kat daha büyük olabilir.

WebP Google'ın "JPG ve PNG'nin çocuğu olsaydı?" sorusuna cevabı nedir? Hem kayıplı hem de kayıpsız sıkıştırmayı destekler, şeffaflığı yönetir ve genellikle eşdeğer JPG'lerden %25-35 daha küçük dosyalar üretir. Tarayıcı desteği 2023'te %95'in üzerine çıktı, yani eski uyumluluk bahanesi temelde ortadan kalktı. Web'de görseller sunuyorsanız WebP şu anda pratik bir seçimdir.

AVIF AV1 video codec bileşenini temel alan en yeni yarışmacıdır. Saf sıkıştırma verimliliği açısından diğer her şeyi geride bırakır; aynı görsel kalitede JPG'den yaklaşık %50 daha küçüktür. Şeffaflığı, HDR'yi ve geniş renk gamını destekler. Dezavantajı mı? Kodlama yavaştır (WebP'den belirgin şekilde daha yavaştır) ve tarayıcı desteği iyi olmasına rağmen henüz evrensel değildir. Safari yakın zamanda tam destek ekledi.

Tatil fotoğrafları, ürün görselleri, portreler gibi fotoğraflar için kayıplı sıkıştırma istiyorsunuz çünkü bu görsellerde düzgün geçişler ve çok sayıda renk değişimi var. JPG Önceliğiniz uyumluluk ise mükemmel çalışır. Bunları bir web sitesine koyuyorsanız, WebP Görünürde sıfır farkla bant genişliğinizi %30 oranında azaltır. AVIF daha fazla tasarruf sağlar ancak kodlaması daha uzun sürer.

Gerçek dünyadan örnek: Bir manzaranın 1920x1080 fotoğrafı, kaliteli 90 JPG olarak 450 KB, WebP olarak 320 KB ve AVIF olarak 200 KB olabilir. Üçünde de aynı görsel kalite; fark yalnızca dosya boyutundadır. 20 görsel yükleyen bir web sitesi için bu, 9 MB ile 4 MB görsel verisi arasındaki farktır. 4G bağlantılarındaki kullanıcılarınız bunu fark edecektir.

Keskin kenarlı, metinli, düz renkli veya şeffaf görüntülerde oyun değişir. PNG hâlâ güvenli varsayılandır; garantili kayıpsız kalite, evrensel destek ve şeffaflık. WebP kayıpsız yaklaşık %26 daha küçük dosya boyutunda aynı kaliteyi sunar. AVIF kayıpsız da çalışır ancak kayıplı AVIF'e göre daha az tasarruf sağlar.

Metin, logo veya kullanıcı arayüzü örnekleri içeren ekran görüntüleri için asla JPG kullanmayın. Kayıplı JPG sıkıştırması, keskin renk geçişleri çevresinde gözle görülür bozulmalar oluşturur; metin bulanık görünür, düz çizgiler dalgalı hale gelir. Bu bir kalite ayarı sorunu değil; JPG sıkıştırmasının nasıl çalıştığına ilişkin temel bir sınırlamadır.

iPhone kullanıcısıysanız HEIC'in nereye uyduğunu merak ediyor olabilirsiniz. HEIC, Apple'ın varsayılan fotoğraf formatıdır ve benzer kalitedeki JPG'den yaklaşık %50 daha küçüktür. Ancak sorun şu: Safari dışındaki web tarayıcıları bunu büyük ölçüde desteklemiyor. Windows'un görüntülemek için bir eklentiye ihtiyacı var. Çoğu çevrimiçi form bunu reddeder. HEIC, iPhone'unuzda fotoğraf depolamak için mükemmeldir, ancak paylaşmanız veya yüklemeniz gerektiğinde, JPG'ye dönüştürüyorum veya WebP.

Web siteleri için: AVIF'ye WebP yedeklemesi ve son güvenlik ağı olarak JPG ile hizmet verin. Çoğu modern içerik yönetim sistemi ve CDN bunu otomatik olarak gerçekleştirir. Belgeler ve formlar için: JPG'ye sadık kalın; her yükleme formunun beklediği şey budur. Tasarım çalışmaları için: Düzenleme işlemi sırasında PNG'yi kullanın, teslimat için WebP veya AVIF olarak dışa aktarın. Arşivleme için: Orijinal formatı koruyun (genellikle kameranızdaki JPG veya RAW). Kayıplı formatlar arasında tekrar tekrar dönüştürme yapmayın; her dönüştürme kaliteyi bir miktar düşürür.

Format savaşları devam edecek. JPEG XL hazırda bekliyor ve muhtemelen gelecek yıl yeni bir şeyler olacak. Ancak şu anda çoğu insan için pratik cevap şudur: Uyumluluk için JPG, modern web kullanımı için WebP, şeffaflığa veya kayıpsız kaliteye ihtiyaç duyduğunuzda PNG. Bunlardan herhangi biri arasında geçiş yapmanız gerekirse, görüntü dönüştürücü hiçbir şey yüklemeye gerek kalmadan saniyeler içinde yapılır.

Rakamlar hikayeyi kelimelerden daha iyi anlatır. Tipik bir 1920 × 1080 fotoğraf çekin ve bunu her formatta benzer görsel kalitede kaydedin. JPG, kalite 85: ~250 KB. PNG (kayıpsız): ~2,5 MB. Eşdeğer kalitede WebP: ~180 KB. Eşdeğer kalitede AVIF: ~130 KB. Bu, AVIF'in görsel olarak aynı sonuçlara sahip JPG'nin kabaca yarısı boyutunda ve WebP'den yaklaşık %30 daha küçük olduğu anlamına gelir.

Metin ve düz renkler içeren bir grafik veya ekran görüntüsü için sayılar değişir. PNG: ~150 KB. JPG, 90 kalitesinde: ~200 KB (ve metnin etrafında gözle görülür bozulmalar var). WebP kayıpsız: ~100 KB. AVIF kayıpsız: ~90 KB. PNG'nin grafikler için tercih edilmesinin nedeni budur. JPG aslında bu tür içerik için daha büyük dosyalar VE daha düşük kalite üretir.

JPG ve PNG her yerde çalışır; her tarayıcıda, her uygulamada, her cihazda, onlarca yıl öncesine kadar. WebP artık neredeyse evrensel tarayıcı desteğine sahip: Chrome, Firefox, Safari (2022'den beri), Edge ve tüm mobil tarayıcılar bunu destekliyor. Tek engel, bazı çok eski kurumsal sistemler ve e-posta istemcileridir.

AVIF desteği artıyor ancak henüz evrensel değil. Chrome, Firefox ve Opera bunu tamamen destekliyor. Safari, 2023'te AVIF desteğini ekledi ancak bazı eski iOS cihazları hâlâ bu desteği sağlayamıyor. Bir web sitesi oluşturuyorsanız güvenli yaklaşım, AVIF'ye WebP geri dönüşü ve JPG'yi HTML kullanarak son güvenlik ağı olarak sunmaktır. <picture> eleman.

Kayıpsızdan kayıplıya (PNG → JPG, PNG → WebP) dönüştürme tamamen güvenlidir; yalnızca bir sıkıştırma düzeyi seçiyorsunuz. Kayıplıyı kayıplıya (JPG → WebP) dönüştürmek, tek bir dönüşüm için iyi çalışır ancak hafif bir kalite kaybına neden olur. Asla kayıplı formatlar arasında tekrar tekrar geçiş yapmayın; her dönüşüm, fotokopi çekmek gibi kaliteyi daha da düşürür.

Görüntüleri formatlar arasında dönüştürmeniz gerekiyorsa, PNG'yi JPG'ye dönüştür, HEIC'yi JPG'ye dönüştür, veya diğerimizi kullanın dönüştürme araçları — hepsi ücretsiz ve tarayıcınızda anında.

Aşağıdaki durumlarda JPG kullanın: fotoğrafları e-posta yoluyla paylaşma, sosyal medyaya yükleme veya evrensel uyumluluğun dosya boyutundan daha önemli olduğu durumlarda. PNG'yi şu durumlarda kullanın: görüntünün şeffaf olması, metin veya keskin kenarlar içermesi veya düzenleme için kayıpsız kaliteye ihtiyacınız olması. WebP'yi şu durumlarda kullanın: Web siteniz için görselleri optimize etmek; kalite, dosya boyutu ve tarayıcı desteği arasında en iyi dengedir. AVIF'i şu durumlarda kullanın: maksimum sıkıştırmaya ihtiyacınız vardır ve eski tarayıcılar için geri dönüşler sağlayabilirsiniz.