Web sitesi için görseller nasıl sıkıştırılır

HTTP Archive’ın 2025 Web Almanac raporuna göre mobilde medyan ana sayfa 2,56 MB ağırlığındaydı ve bunun 911 KB’ı görsellerden oluşuyordu. Masaüstünde medyan sayfa 1.058 KB görsel taşıyordu. Ziyaretçilerin beklediği de görsellerdir: sayfa yüklenirken ekrandaki en büyük öğe, yani Largest Contentful Paint (LCP), mobil sayfaların %76’sında bir görseldi.

Daha hafif görseller yavaş bağlantılarda daha erken yüklenir, ziyaretçilerinizin mobil verisinden daha az harcar ve size daha az bant genişliği maliyeti çıkarır. LCP, Google’ın sayfa deneyimini değerlendirmek için kullandığı ölçümler olan Core Web Vitals’ın (Önemli Web Verileri) bir parçasıdır; bu yüzden ağır görsellerin bedeli birkaç saniyelik sabırdan fazlası olabilir.

Sıkıştırma, kapladığı alandan çok daha büyük bir görseli kurtaramaz. 800 piksellik bir sütunda gösterilen, 4000 piksel genişliğindeki bir fotoğraf makinesi fotoğrafı, sayfanın kullanabileceğinden 25 kat fazla piksel taşır. web.dev, masaüstü boyutundaki görselleri telefonlara göndermenin gerekenden 2–4 kat fazla veri tüketebileceğini belirtiyor.

• Tam genişlikteki bannerlar: çoğu sayfa düzeni için yaklaşık 1600–2000 piksel genişlik yeterlidir.
• Makale sütunundaki görseller: yüksek çözünürlüklü ekranlarda net kalmaları için sütun genişliğinin yaklaşık iki katı (örneğin 700 piksellik bir sütun için 1400 piksel).
• Küçük resimler ve profil fotoğrafları: gösterildikleri boyutun iki katı, genellikle 200–400 piksel.

Biçim, bir görselin ne kadar verimli saklanabileceğini belirler. Kısacası: fotoğraflar için JPG veya WebP; logolar, ekran görüntüleri ve saydamlık içeren her şey için PNG veya WebP uygundur. JPG, PNG ve WebP karşılaştırmamız hangisinin ne zaman öne çıktığını açıklıyor.

Kullanımdaki tarayıcıların yaklaşık %97’si WebP’yi gösterebiliyor ve WebP çoğu zaman belirgin şekilde daha küçük oluyor. Denemek için JPG’den WebP’ye veya PNG’den WebP’ye dönüştürün ve sonucu orijinalle karşılaştırın: dönüştürülen dosya, özellikle basit grafiklerde, her zaman daha küçük olmaz.

Sıkıştırma, gözün fark etmesi pek olası olmayan verileri kaldırır. Bitinz resim sıkıştırma aracına bir grup JPG, PNG veya WebP dosyasını bırakıp üç seviyeden birini seçebilirsiniz:

• Hızlı: önce hız; büyük gruplar için.
• Dengeli: varsayılan seviye; çoğu web sitesi görseli için iyi bir seçim.
• Maksimum: daha küçük dosyalar için biraz daha uzun sürer; banner ve arka planlar gibi her sayfada görünen görseller için buna değer.

Biçimi koruduğunuzda Bitinz size asla yüklediğiniz dosyadan daha büyük bir dosya vermez. Sonucu tam boyutta orijinalle karşılaştırın (özellikle ince yazı veya yumuşak renk geçişleri içeren görsellerde), ardından memnun kaldıklarınızı indirin.

İyi sıkıştırılmış bir görsel bile yanlış zamanda veya yanlış boyutta yüklenirse sayfayı yavaşlatabilir. İşin çoğunu birkaç HTML özniteliği halleder:

• Her görselde width ve height belirtin; böylece tarayıcı yer ayırabilir ve görsel yüklenirken sayfa düzeni kaymaz.
• Sayfanın aşağısındaki görsellere loading="lazy" ekleyin; böylece yalnızca ziyaretçi sayfayı onlara yakın bir yere kaydırdığında yüklenirler.
• Sayfanın en üstündeki ana görseli asla gecikmeli yüklemeyin. web.dev bunun yerine o görsel için fetchpriority="high" kullanmayı öneriyor; bunu da en fazla bir veya iki görselde yapın.
• Aynı görselin birkaç farklı genişliğini sunmak için srcset ve sizes kullanın; böylece telefonlar büyük ekranlardan daha küçük bir dosya indirir.
• Görselleri uzun bir önbellek süresiyle, varsa bir CDN üzerinden sunun; böylece siteye geri dönen ziyaretçiler onları yeniden indirmez.

Sayfayı PageSpeed Insights’ta veya Chrome’daki Lighthouse panelinde test edin. Lighthouse 13’ten bu yana görsel kontrolleri, daha fazla sıkıştırılabilecek, modern bir biçimde sunulabilecek veya küçültülebilecek görselleri listeleyen “Improve image delivery” adlı tek bir başlık altında toplanıyor. Tasarrufu 4 KiB’ın altında kalacak görseller listelenmez; bu yüzden kısa bir liste iyiye işarettir.

Ardından sayfaya bir telefonda kendiniz de bakın. Sıkıştırma sorunları ilk olarak keskin kenarlarda, görsellerin içindeki yazılarda ve ten renklerinde ortaya çıkar.

Siteniz her gün yeni görseller ekliyorsa (örneğin bir içerik yönetim sistemi veya online mağaza üzerinden), görselleri elle değil, yükleme ya da yayınlama sırasında sıkıştırın. Bitinz geliştirici API’si bir görseli HTTP üzerinden alır ve sıkıştırılmış dosyanın bağlantısını döndürür; böylece bir script veya derleme süreci içinden çalıştırılabilir. Her hesabın ücretsiz aylık kotası vardır.

1. 01Her görseli, gösterildiği boyutun yaklaşık iki katına getirin.
2. 02Fotoğraflar için JPG veya WebP, grafikler ve saydamlık için PNG veya WebP kullanın.
3. 03Dengeli seviyede sıkıştırın, en büyük görsellerde Maksimum’u deneyin.
4. 04Orijinalin yerine koymadan önce sonucu onunla karşılaştırın.
5. 05width ve height değerlerini belirtin, ilk ekranın altında kalan görselleri gecikmeli yükleyin ve ana görseli asla gecikmeli yüklemeyin.
6. 06Sayfayı PageSpeed Insights’ta yeniden kontrol edin.

Görselleri kendi web siteniz dışında bir yere mi yüklüyorsunuz? Her platformun kendi kuralları vardır: e-posta ve online mağazalar için görsel boyutu gereksinimleri rehberine göz atın.