Kayıplı ve Kayıpsız Sıkıştırma: Web İçin Doğru Görsel Formatı

Kayıplı sıkıştırma, dosyayı küçültmek için gözün kolay fark etmeyeceği bazı ayrıntıları kalıcı olarak atar; kayıpsız sıkıştırma ise dosyayı küçültür ama açıldığında orijinalin birebir aynısını verir. Web sitelerinde fotoğraflar için genelde kayıplı, logo, ekran görüntüsü ve çizimler için kayıpsız sıkıştırma ya da vektör format doğru tercihtir. Üstelik bu seçim, sitenizin ne kadar hızlı açıldığını doğrudan etkiler.

Kayıplı ve kayıpsız sıkıştırma nedir?

Dijital bir görsel, piksellerden ve her pikselin renk bilgisinden oluşur. Ancak bu bilgiyi olduğu gibi saklamak çok yer kaplar. Kısacası sıkıştırma, aynı görseli daha az veriyle saklamanın yoludur ve iki temel yaklaşımı vardır.

Kayıpsız sıkıştırma, veriyi daha verimli bir düzende paketler. Bavulu daha düzenli yerleştirmek gibidir: içinden hiçbir şey çıkarmazsınız, yalnızca daha az yer kaplar. Böylece dosyayı açtığınızda orijinalin bit bit aynısını elde edersiniz. ZIP arşivleri ve PNG görselleri bu yöntemi kullanır.

Kayıplı sıkıştırma ise bir adım daha ileri gider: İnsan gözünün zor fark ettiği ayrıntıları (ince renk geçişleri, çok küçük doku farkları) kalıcı olarak atar. Dolayısıyla dosya çok daha küçülür, ama atılan bilgi geri gelmez. JPEG bu yaklaşımın en bilinen örneğidir. Sıkıştırma oranını artırdıkça dosya küçülür, belli bir noktadan sonra da bozulmalar (bloklanma, kenarlarda kirlenme) görünür hale gelir.

Web'de kullanılan görsel formatları

MDN'in görsel formatları rehberine ve tarayıcı destek tablolarına göre web'de yaygın formatların özellikleri şöyle:

Birkaç önemli not:

• WebP: Google'ın geliştirdiği bu format için Google'ın kendi belgeleri, kayıpsız WebP'nin PNG'ye göre yaklaşık %26, kayıplı WebP'nin ise eşdeğer kalitedeki JPEG'e göre %25–34 daha küçük olduğunu belirtiyor. Ancak bunlar üreticinin kendi ölçümleridir; sizin görsellerinizdeki sonuç içeriğe göre değişir.
• AVIF: AV1 video kodlamasına dayanan daha yeni bir format. MDN, AVIF'in genelde JPEG ve PNG'ye göre belirgin biçimde küçük dosyalar ürettiğini, ama aşamalı (progressive) yüklemeyi desteklemediğini belirtiyor.
• SVG: Piksel değil, matematiksel şekillerle tanımlanır. Bu sayede ne kadar büyütürseniz büyütün bozulmaz. Bu farkı vektör ve raster görsel farkı yazımızda ayrıntılı anlattık.

Tarayıcı desteği: Ocak 2025 itibarıyla durum

Yeni bir formatı kullanmadan önce sorulacak ilk soru: Ziyaretçilerimin tarayıcısı bunu gösterebiliyor mu? Can I Use verilerine göre:

• WebP: Chrome 32, Firefox 65 ve Edge 18'den beri destekleniyor. Safari'de iOS 14'ten itibaren tam, macOS'ta Safari 14–15.6 arasında kısmi, Safari 16'dan itibaren tam destek var.
• AVIF: Chrome 85, Firefox 93, iOS Safari 16 ve masaüstü Safari 16.4'ten itibaren destekleniyor. Öte yandan Edge, AVIF'i Ocak 2024'te yayımlanan 121. sürümle varsayılan olarak desteklemeye başladı.

Sonuç olarak Ocak 2025 itibarıyla dört büyük tarayıcının güncel sürümleri hem WebP'yi hem AVIF'i gösterebiliyor. Güncellenmemiş eski cihazlar için ise HTML'in <picture> öğesiyle bir yedek format (JPEG ya da PNG) sunmak hâlâ iyi bir uygulama: Tarayıcı, desteklediği ilk formatı seçer.

“html <picture> <source srcset="ekip.avif" type="image/avif"> <source srcset="ekip.webp" type="image/webp"> <img src="ekip.jpg" alt="Saha ekibimiz çalışırken" width="1200" height="675"> </picture> “

Google Arama da bu formatları destekliyor: Google'ın görsel SEO rehberi BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF'i desteklenen formatlar arasında sayıyor. AVIF desteğini ise Ağustos 2024'te ekledi.

Web sitenize ve işinize etkisi

Genellikle görseller, çoğu sayfada en büyük yükü oluşturur. Google'ın görsel SEO rehberi de görsellerin sayfa boyutuna en çok katkı yapan öğeler arasında olduğunu ve sayfayı yavaşlatabileceğini belirtiyor. Doğru format ve boyut seçimi şunları etkiler:

• Açılış hızı: Özellikle mobil veriyle gelen ziyaretçi için. Hızın arama görünürlüğüne de etkisi olduğunu yerel işletmeler için SEO uyumlu web sitesi yazımızda anlatmıştık.
• Barındırma ve trafik: Daha küçük dosyalar daha az depolama ve daha az veri aktarımı demektir.
• Görünen kalite: Yanlış formatta kaydedilen bir logo bulanık, yanlış ayarla sıkıştırılan bir ürün fotoğrafı lekeli görünür. Sonuç olarak bu, doğrudan marka algısını etkiler.

WordPress'te durum

WordPress, 5.8 sürümünden (2021) beri WebP'yi, 6.5 sürümünden (Nisan 2024) beri AVIF'i destekliyor. Ancak her iki durumda da sunucunuzdaki görsel işleme kütüphanesinin (Imagick ya da GD) bu formatı desteklemesi gerekiyor. WordPress yönetim panelinde Araçlar → Site Sağlığı bölümünden bunu kontrol edebilirsiniz. Aksi durumda, yani barındırma tarafı desteklemiyorsa, yükleme hata verebilir.

Sık yapılan hatalar

• Fotoğraf boyutunda görsel yüklemek: Telefonla çekilmiş, birkaç megabaytlık bir fotoğrafı 600 piksel genişliğinde bir kutuda göstermek. Format ne olursa olsun önce boyutu küçültün.
• Logoyu JPEG olarak kaydetmek: Çünkü keskin kenarlar ve düz renkler kayıplı sıkıştırmada kirlenir. Logo için SVG, olmuyorsa PNG ya da kayıpsız WebP kullanın.
• Fotoğrafı PNG olarak kaydetmek: Bu durumda kayıpsız sıkıştırma, fotoğraflarda çok büyük dosyalar üretir.
• Aynı görseli defalarca kayıplı kaydetmek: Her kayıplı kayıtta biraz daha bilgi kaybolur. Orijinal dosyayı her zaman ayrıca saklayın.
• Önemli metni görselin içine gömmek: Hem sıkıştırmada bozulur hem de arama motoru tarafından metin olarak okunmaz; ayrıntısı HTML nedir yazımızda.
• Baskı dosyasıyla web dosyasını karıştırmak: Baskı için hazırlanan yüksek çözünürlüklü CMYK dosyalar web'e uygun değildir. Farkı baskıya hazır dosya yazımızda anlattık.

Bizim deneyimimiz

Bu sitede (artsution.com.tr) mobil hız iyileştirmesi yaparken görselleri tek başına ele almadık: görsellerin yanında yazı tiplerini de sunucumuzda barındırdık, Türkçe karakterler için yalnızca gereken karakterleri içeren küçük font alt kümeleri kullandık ve CSS dosyalarını birleştirdik. Bizim için çıkan ders şu oldu: Hız, tek bir ayarla değil, sayfaya yüklenen her dosyanın ayrı ayrı gözden geçirilmesiyle iyileşiyor. Görsel format seçimi bu listenin en görünür ama tek maddesi değil.

Projelerimizde görselleri de aynı mantıkla hazırlıyoruz: Logo ve ikonlar için vektör, fotoğraflar için gösterileceği boyuta getirilmiş ve sıkıştırılmış dosyalar. Ayrıca orijinal, yüksek çözünürlüklü dosyaları ayrı bir yerde arşivliyoruz.

Sık sorulan sorular

Sonuç

Kayıplı sıkıştırma fotoğraflar için, kayıpsız sıkıştırma ve vektör formatlar ise logo, çizim ve ekran görüntüleri için doğru araçtır. Ocak 2025 itibarıyla WebP ve AVIF güncel tarayıcıların tamamında desteklendiği için, eski usul büyük JPEG ve PNG dosyalarında ısrar etmek için çok az neden kaldı. Yine de format, işin yalnızca yarısı: Görseli doğru boyutta sunmak da en az onun kadar önemli.

Sitenizin görsellerini ve hızını birlikte ele almak isterseniz web tasarım ve WordPress geliştirme hizmetlerimize göz atabilir ya da bizimle iletişime geçebilirsiniz.