Web Sitesi Görselleriniz Neden Sıkıştırılmalı | Bulk Image Compressor
Web sitenizin yüklenmesi birkaç saniyeden uzun sürüyorsa, insanlar gider. Bu bir fikir değil. Google’ın kendi araştırması, sayfa yüklemesi bir saniyeden üç saniyeye çıktığında hemen çıkma oranlarının %32 arttığını gösteriyor. Ve görseller, sayfaların yavaş yüklenmesinin neredeyse her zaman en büyük nedenidir.
Çoğu web sitesi, olması gerekenden çok daha büyük görseller sunar. Bir kameradan veya stok fotoğraf sitesinden doğrudan alınan tek bir kahraman görsel, kolayca 5MB veya daha fazla olabilir. İyi bir geniş bant bağlantısında, bu dosyanın yüklenmesi birkaç saniye sürer. Mobil 3G bağlantısında, tek bir görsel için yaklaşık 15 saniyeye bakıyorsunuz. Şimdi bunun gibi beş veya altı görseli olan bir sayfa hayal edin.
Görselleriniz gerçekte ne kadar büyük?
İşte hızlı bir gerçeklik kontrolü. Tarayıcınızın geliştirici araçlarını açın (F12), Ağ sekmesine gidin, sayfanızı yeniden yükleyin ve “Img” ile filtreleyin. Boyutlara bakın. Muhtemelen en az 1MB’ın üzerinde birkaç görsel bulacaksınız.
Referans olarak, tipik sıkıştırılmamış görseller şöyle görünür:
- Kahraman banner olarak kullanılan bir DSLR fotoğrafı: 4 ila 8MB
- Bir akıllı telefondan ürün fotoğrafı: 2 ila 5MB
- Tam çözünürlükte indirilen bir stok fotoğraf: 3 ila 10MB
- PNG olarak kaydedilmiş bir infografik veya illüstrasyon: 1 ila 4MB
Doğru sıkıştırmadan sonra, aynı görseller kalitede görünür kayıp olmadan 100KB ila 300KB olabilir. Bu, dosya boyutunda %90 veya daha fazla bir azalmadır.
Sayfa hızı ve Temel Web Verileri
Google, Temel Web Verileri’ni bir sıralama sinyali olarak kullanır ve görseller üç metriğin ikisini doğrudan etkiler.
En Büyük İçerikli Boya (LCP), en büyük görünür öğenin yüklenmesinin ne kadar sürdüğünü ölçer. Çoğu sayfada, bu en büyük öğe bir görseldir. Kahraman görseliniz 5MB ise, LCP’niz korkunç olacaktır. Google, 2,5 saniyenin üzerindeki herhangi bir şeyi zayıf bir LCP puanı olarak kabul eder. Sıkıştırılmış görseller düzenli olarak LCP’yi bu eşiğin altına getirir.
Kümülatif Düzen Kayması (CLS), görsel stabiliteyi ölçer. Tanımlanmış boyutları olmayan görseller, yüklenirken düzen kaymalarına neden olur. Bu, HTML nitelikleriyle sıkıştırmadan daha fazla ilgilidir, ancak yavaş yüklenen büyük boyutlu görseller, sayfanın nihai görsel boyutuyla eşleşmeyebilecek yer tutucu alanının etrafında içerik oluşturması nedeniyle sorunu daha da kötüleştirir.
Mevcut puanlarınızı Google PageSpeed Insights ile kontrol edebilirsiniz. Ana sayfanızı ve birkaç dahili sayfayı çalıştırın. Performans puanınız 90’ın altındaysa, görseller sorunun büyük bir parçası olabilir.
SEO bağlantısı
Sayfa hızı, onaylanmış bir Google sıralama faktörüdür. 2010’dan beri masaüstü ve 2018’den beri mobil için böyledir. 2021’de Temel Web Verileri’nin tanıtılması onu daha da doğrudan hale getirdi.
Ancak etki, yalnızca hız sinyalinin ötesine geçer. Yavaş sayfalar, Googlebot tarafından daha az sıklıkta taranır. Google, her siteye bir “tarama bütçesi” tahsis eder ve sayfalarınız yavaşsa, bot bütçesini içeriğinizin daha fazlasını indekslemek yerine yanıtları bekleyerek harcar. Yüzlerce veya binlerce sayfası olan daha büyük siteler için bu çok önemlidir.
Ayrıca kullanıcı davranışı yoluyla dolaylı bir etki de vardır. İnsanlar yavaş sayfalardan ayrıldığında, Google bunu fark eder. Yüksek hemen çıkma oranları ve düşük sayfada kalma süresi, zamanla sıralamalarınızı etkileyebilecek olumsuz etkileşim sinyalleri gönderir.
Kullanıcı deneyimi ve hemen çıkma oranları
İnsanlar çevrimiçiyken sabırsızdır. Portent tarafından yapılan bir araştırma, dönüşüm oranlarının her ek saniyelik yükleme süresi için ortalama %4,42 düştüğünü buldu. E-ticaret sitenizin yüklenmesi iki yerine beş saniye sürüyorsa, satışlarınızın anlamlı bir yüzdesini kaybediyor olabilirsiniz.
Mobil kullanıcılar daha da az sabırlıdır. Tüm web trafiğinin yarısından fazlası mobil cihazlardan gelir ve mobil bağlantılar genellikle masaüstü olanlardan daha yavaştır. Görsellerinizin, bir hücresel ağ kullanan bir telefonda hızlı yüklenecek kadar küçük olması gerekir.
Ayrıca algı faktörü de vardır. Hızlı bir site daha profesyonel ve güvenilir hissettirir. Yavaş bir site, her şey eninde sonunda yüklenmiş olsa bile, bozuk hissettirir. İlk izlenimler milisaniyeler içinde oluşur.
Bant genişliği maliyetleri birikir
Paylaşımlı barındırma veya temel bir plandaysanız, bant genişliği aklınıza gelmeyebilir. Ancak gerçek trafiği olan siteler için bant genişliği paraya mal olur.
Biraz matematik yapalım. Ortalama sayfanızda 3MB görsel olduğunu ve ayda 100.000 sayfa görüntülemeniz olduğunu varsayalım. Bu, aylık 300GB görsel verisi aktarımı demektir. Sıkıştırmadan sonra, aynı sayfalarda 400KB görsel olabilir ve bu da aktarımı 40GB’a düşürür. Bu, barındırma maliyetlerinde ve CDN faturalarında önemli bir azalmadır.
Yüksek trafikli siteler, medya şirketleri veya büyük ürün katalogları olan e-ticaret mağazaları için bu fark ayda yüzlerce veya binlerce dolar tasarruf sağlayabilir.
Web sitesi görsellerinizi toplu olarak sıkıştırma
Görselleri Photoshop veya GIMP’de tek tek sıkıştırabilirsiniz, ancak düzinelerce veya yüzlerce görseliniz varsa, bu pratik değildir. Toplu sıkıştırma olmanız gereken yoldur.
Toplu Görsel Sıkıştırıcı ile tüm web sitesi görsellerinizi aynı anda sürükleyip birlikte sıkıştırabilirsiniz. İşte pratik bir iş akışı:
-
Mevcut görsellerinizi dışa aktarın. Zaten sitenizdeyseler, indirin. Yeni bir site oluşturuyorsanız, kullanmayı planladığınız tüm görselleri toplayın.
-
Biçiminizi seçin. Fotoğraflar için JPEG veya WebP en iyi sonucu verir. Şeffaflığı olan grafikler için PNG veya WebP kullanın. Hangi biçimi seçeceğinizden emin değilseniz, web performansı için görsel biçimleri rehberimize göz atın.
-
Kalite seviyenizi ayarlayın. Çoğu web sitesi görseli için %75 ila %85 kalite ayarı, dosya boyutu ve görsel kalite arasında iyi bir denge sağlar. Küçük resimler veya arka plan görselleri için daha düşüğe inebilirsiniz. Bu ödünleşim hakkında daha fazla ayrıntı için kalite kaybı olmadan dosya boyutunu küçültme makalemize bakın.
-
Sıkıştırın ve indirin. Araç her şeyi tarayıcınızda işler, böylece görselleriniz bilgisayarınızdan asla ayrılmaz. Orijinalleri sunucunuzda sıkıştırılmış sürümlerle değiştirin.
-
Boyutları da ayarlayın. Yalnızca 800px genişliğindeki bir kapsayıcıda 4000px genişliğinde bir görsel sunmayın. Sıkıştırmadan önce veya sıkıştırma sırasında görsellerinizi görüntüleme boyutlarına uyacak şekilde yeniden boyutlandırın. Bu tek başına dosya boyutlarını önemli ölçüde azaltabilir.
Hızlı bir öncesi-sonrası örneği
Tipik bir web sitesi için sıkıştırmanın pratikte nasıl göründüğü:
| Görsel | Önce | Sonra | Tasarruf |
|---|---|---|---|
| Kahraman banner (JPEG) | 4,2MB | 210KB | %95 |
| Ekip fotoğrafı (JPEG) | 3,1MB | 185KB | %94 |
| Logo (PNG) | 890KB | 95KB | %89 |
| Blog küçük resmi (JPEG) | 1,8MB | 120KB | %93 |
| Toplam | 10MB | 610KB | %94 |
Bu, bir sayfanın bir saniyede yüklenmesi ile sekiz saniyede yüklenmesi arasındaki farktır.
Yeni içeriği unutmayın
Mevcut görsellerinizi sıkıştırmak tek seferlik bir düzeltmedir, ancak devam eden içerik için de bir sürece ihtiyacınız vardır. Siz veya ekibiniz her yeni blog yazısı, ürün sayfası veya açılış sayfası eklediğinizde, bu görseller yayına girmeden önce sıkıştırılmalıdır.
Görsel sıkıştırmayı içerik yayınlama iş akışınızın bir parçası haline getirin. Birkaç dakika sürer ve sitenizin hızı ve SEO’su üzerindeki etkisi gerçek ve ölçülebilirdir.
Web sitenizin görselleri muhtemelen yapabileceğiniz en büyük tek performans iyileştirmesidir. Araçlar ücretsizdir, süreç hızlıdır ve sonuçlar sayfa hızı puanlarınızda hemen görülür.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor