Net Kişayol
Teknoloji ipuçları, pratik çözümler
Menü
Diğer yazılar
Hakkında
Günlük teknoloji sorunlarına hızlı ve anlaşılır cevaplar bulduğunuz bağımsız bir kaynak. Orta düzey kullanıcılar için pratik ipuçları ve rehberler.

Resim Kalitesini Koruyarak Sıkıştır

netkisayol.club

Bir web sayfasının yavaş açılmasının en yaygın nedeni, gereğinden büyük görsellerdir. Telefon kamerasından çıkan 6 MB'lık bir fotoğraf, ekranda 800 piksel genişliğinde görünecekse taşıdığı verinin büyük bölümünü boşa harcar. Doğru yaklaşımla aynı fotoğrafı 150–250 KB'a indirip gözle ayırt edilemeyecek bir sonuç almak mümkündür. Aşağıda resim optimizasyon sıkıştırma sürecini, hangi kararın hangi aşamada verileceğini gösterecek şekilde adım adım anlatıyorum.

Önce Şu İki Kavramı Ayırın

Kayıplı (lossy) sıkıştırma, insan gözünün fark etmediği detayları atarak dosyayı küçültür; JPEG, WebP ve AVIF bu sınıfa girer. Kayıpsız (lossless) sıkıştırma ise hiçbir piksel bilgisini yok etmez, yalnızca veriyi daha verimli paketler; PNG ve GIF bu davranışı gösterir. Kayıplı sıkıştırmada her yeni kayıt bir öncekinin üzerine hasar bindirir, kayıpsızda ise böyle bir birikim olmaz. Bu ayrımı akılda tutmak, ilerideki hataların çoğunu baştan engeller.

Adım Adım Süreç

  1. Görselin gerçek kullanım boyutunu belirleyin. Sıkıştırmadan önce yapılacak ilk iş yeniden boyutlandırmadır. Bir blog yazısının içerik alanı 720 piksel genişse, 4000 piksellik bir fotoğrafı orada yayınlamanın anlamı yok. Retina ekranlar için ölçünün en fazla iki katını hedefleyin: 720 piksel alan için 1440 piksel yeterlidir. Tek başına bu adım, dosya boyutunu sıkıştırmaya bile gerek kalmadan yüzde 80'in üzerinde düşürebilir.

  2. İçeriğe uygun formatı seçin. Format seçimi, kalite/boyut dengesini kalite ayarından daha çok etkiler.

    İçerik türüÖnerilen formatNeden
    Fotoğraf, yumuşak geçişli görüntüAVIF veya WebP, yedek olarak JPEGSürekli ton geçişlerinde çok verimli
    Ekran görüntüsü, arayüz, keskin metinPNG veya kayıpsız WebPKenarlar bulanıklaşmaz
    Logo, ikon, çizimSVGVektör olduğu için her ölçekte net
    Şeffaflık gereken fotoğrafWebP veya AVIFAlfa kanalı ile kayıplı sıkıştırma bir arada

  3. Kalite değerini gözle test ederek belirleyin. JPEG ve WebP için 75–85 aralığı çoğu fotoğrafta güvenli bölgedir. 90'ın üzerine çıkmak dosyayı ciddi biçimde büyütürken gözle görülür bir kazanç sağlamaz. Sabit bir sayıya bağlanmak yerine, aracın karşılaştırma görünümünde orijinal ile sıkıştırılmışı yan yana açıp gökyüzü, ten tonu ve düz renkli geniş alanlara bakın: bozulma önce oralarda belirir.

  4. Doğru araçları kullanın. Tarayıcı üzerinden çalışan Squoosh, dosyayı sunucuya yüklemeden yerel olarak sıkıştırır ve iki paneli karşılaştırmalı gösterir. Toplu iş için komut satırı araçları daha uygundur: JPEG'de MozJPEG, PNG'de pngquant ve oxipng, WebP dönüşümünde cwebp, genel işlemler için ImageMagick. Yüzlerce dosyayı elle tek tek geçirmek yerine bir klasörü baştan sona işleyen tek komut yazmak, hem zamanı hem tutarlılığı korur. Dosya biçimleri arasında geçiş yapmayı ayrıntılı anlatan format dönüştürme rehberi bu noktada işinizi kolaylaştırır.

  5. Gereksiz meta veriyi temizleyin. Fotoğraflar EXIF etiketleri, renk profilleri ve bazen gömülü küçük ön izleme görüntüleri taşır. Bunlar onlarca kilobayt yer kaplayabilir ve konum bilgisi gibi paylaşmak istemeyeceğiniz detayları içerebilir. Sıkıştırma araçlarının çoğunda meta veriyi kaldıran bir seçenek vardır; yalnızca sRGB renk profilini korumak genellikle yeterlidir.

  6. Farklı ekranlar için birden fazla ölçü üretin. Aynı görselin 480, 960 ve 1440 piksellik sürümlerini hazırlayıp tarayıcıya seçim şansı verdiğinizde, telefonla giren okuyucu masaüstü boyutundaki dosyayı indirmek zorunda kalmaz. Bu, mobil kullanıcıların hem hızını hem veri tüketimini doğrudan etkiler.

  7. Sonucu gerçek koşullarda ölçün. Sayfayı yayına aldıktan sonra tarayıcının geliştirici araçlarındaki ağ sekmesinde görsellerin gerçek transfer boyutunu kontrol edin. Beklediğinizden büyük bir değer görüyorsanız, arada görseli yeniden işleyen bir eklenti veya tema ayarı olabilir. Tarayıcı performansını konu alan yazıda anlatılan ölçüm alışkanlıkları burada da geçerlidir.

Sık Yapılan Hatalar