Görsel Sıkıştırma

Görsel Sıkıştırma nedir, ne işe yarar?

Büyük görseller, web sitelerinin yavaşlamasının en yaygın nedenlerinden biridir. Sayfa hızı hem kullanıcı deneyimini hem de arama sıralamasını etkiler; bu yüzden görselleri yüklemeden önce uygun boyuta ve formata getirmek önemli bir optimizasyondur.

Bu araç, görsellerinizi tarayıcınızda sıkıştırır ve isterseniz genişliğini de küçültür. Dosyalarınız sunucuya yüklenmez; işlem cihazınızda yapılır. Çıktı olarak boyutu genellikle en çok düşüren WebP formatını önerir.

Nasıl kullanılır?

1. Görselleri sürükleyip bırakın veya "Dosya seç" ile ekleyin.
2. Çıktı formatını ve kalite düzeyini seçin; gerekirse en fazla genişlik girin.
3. Her dosyanın yeni boyutunu ve tasarruf oranını görün.
4. İndir butonuyla sıkıştırılmış görseli kaydedin.

Kullanım ipuçları

• Önce görseli sayfada gösterileceği boyuta küçültün; kaliteyi düşürmeden önce boyutu düşürmek daha etkilidir.
• Fotoğraflar için WebP veya JPEG, şeffaf logolar için PNG veya WebP kullanın.
• Kalite 75-85 aralığı çoğu fotoğrafta gözle fark edilmeyen bir kayıp sağlar.
• Görsele anlamlı bir dosya adı ve alt metin eklemeyi unutmayın.

Görsel boyutu neden önemlidir?

Görseller, bir web sayfasının toplam boyutunun çoğunu oluşturabilir. Büyük görseller sayfanın geç yüklenmesine, mobil veri kullanımının artmasına ve ziyaretçinin sayfadan ayrılmasına neden olur. Sayfa hızı, Core Web Vitals metriklerinden biri olan en büyük içerikli öğenin (LCP) yüklenme süresini de doğrudan etkiler; çoğu sayfada bu öğe bir görseldir. Görselleri küçültmek, genellikle en az emekle elde edilen hız kazanımıdır.

Doğru format ve kalite seçimi

Web için görsel hazırlama adımları

1. Görseli sayfada gösterileceği boyuta küçültün; 4.000 piksel genişliğindeki bir telefon fotoğrafını 800 piksellik alanda kullanmanın anlamı yoktur.
2. Yüksek çözünürlüklü ekranlar için gerekirse görselin 2 katı boyutunu hazırlayın, ama bundan fazlasını yüklemeyin.
3. Araçla sıkıştırın ve önizlemede kalite kaybının gözle görülmediğinden emin olun.
4. Anlamlı bir dosya adı verin (ör. ankara-web-tasarim-ofis.webp) ve alt metin yazın.
5. Genişlik ve yükseklik değerlerini HTML'de belirtin; sayfa yüklenirken kayma olmaz.
6. Sayfa ilk ekranda görünmeyen görseller için gecikmeli yüklemeyi (lazy loading) kullanın.

Sıkıştırmada sık yapılan hatalar

• Orijinal dosyayı silmek; her zaman kaynak dosyayı saklayın.
• Aynı görseli defalarca sıkıştırmak; her seferinde kalite biraz daha düşer.
• Şeffaf logoyu JPEG'e çevirip arka planı beyaza dönüştürmek.
• Kaliteyi gereğinden fazla düşürmek; keskin kenarlarda bozulma görülür.
• Görseli yalnızca CSS ile küçültüp dosyanın kendisini büyük bırakmak; tarayıcı yine de büyük dosyayı indirir.

Dosyalarınız tarayıcınızda işlenir

Bu araç görselleri sunucuya yüklemez; sıkıştırma işlemi cihazınızda, tarayıcıda yapılır. Müşteri fotoğrafları ya da yayınlanmamış tasarımlar gibi gizli dosyalarla çalışırken bu önemlidir. Tarayıcı tabanlı sıkıştırmada görsel yeniden kodlandığı için konum gibi bazı üst bilgilerin çıktıda bulunmaması olağandır; kesin davranış için çıktıyı kontrol edin.

Sıkıştırdım ama sayfa hâlâ yavaş: ne kontrol edilmeli?

Görsel sıkıştırma çoğu sayfada belirgin bir kazanç sağlar, ancak yavaşlığın tek nedeni görseller olmayabilir. Önce sayfada gerçekten yüklenen görsel boyutuna bakın: görsel 800 piksellik alanda gösteriliyorsa ama dosyanın kendisi 3.000 piksel genişliğindeyse, dosyayı küçültmeden yalnızca kaliteyi düşürmek sınırlı fayda sağlar.

Sayfanın ilk ekranında görünen en büyük görsel (genellikle kapak görseli) hızı en çok etkileyendir; bunu gecikmeli yüklemeye almayın, aksine öncelikli yüklenmesini sağlayın. Ekranın altındaki görseller için ise gecikmeli yükleme uygundur. Ayrıca sayfadaki JavaScript ve CSS dosyalarının boyutu, üçüncü taraf betikler ve sunucunun yanıt süresi de hızı etkiler. Sorunu bulmak için sayfa hızı raporundaki önerileri öncelik sırasına göre takip edin ve her değişiklikten sonra yeniden ölçün.

Kullanım alanına göre önerilen boyut ve kalite

Aşağıdaki değerler genel başlangıç noktalarıdır; kendi tasarımınıza göre ayarlayın.