Görsel dosya boyutu nasıl küçültülür? Format ve kalite

Önce kullanım alanını belirleyin

Görsel 300 piksel genişlikte gösterilecekse binlerce piksel kaynak gereksiz olabilir. Responsive görünümü hesaba katın ama gösterim alanının çok üstünde çözünürlük göndermeyin.

Fotoğraf, ikon ve şeffaf görsel için JPEG, WebP, AVIF veya PNG’yi gerçek dosyada boyut ve görünüm açısından karşılaştırın.

Ölçü ve kalite

Önce hedef genişlik/yüksekliği belirleyin. Kayıplı formatlarda kaliteyi kademeli düşürüp yüz, yazı ve kenarları inceleyin.

Şeffaflık gerekiyorsa alfa kanalının korunduğunu kontrol edin. Uzantıyı değiştirmek dosya biçimini dönüştürmez; yeniden dışa aktarın.

Toplu işlem ve kaynak koruma

Klasörün tamamını dönüştürmeden önce farklı içerik türlerinden örnek seçin. Fotoğraf, logo ve ekran görüntüsü aynı kalite ayarıyla aynı sonucu vermez.

Orijinal kopyaları saklayın; web için küçültme baskı çözünürlüğünü azaltabilir.

Sayfa performansı

HTML’de width ve height vermek görsele alan ayırır. İlk ekranda gereken ana görseli gereksiz yere geciktirmeyin; diğer görseller gecikmeli yüklenebilir.

Lighthouse ölçümünü canlı sayfada alın. CDN ve cihaz farkları yerel dosya boyutuyla aynı sonuç vermeyebilir.

Raster boyutu, piksel ve dosya boyutu

Görselin piksel ölçüsü ile dosyanın megabayt değeri ilişkili olsa da aynı şey değildir. Piksel boyutunu azaltmak kodlanacak veri miktarını ve çoğu zaman dosya boyutunu düşürür; renk ayrıntısı, alfa kanalı, metadata ve sıkıştırma yöntemi de sonucu etkiler. Bir fotoğrafı web kartında gösterecekseniz önce gerçek görüntü alanını ve cihaz yoğunluğunu belirleyin. Yalnızca kalite ayarını düşürerek binlerce pikseli korumak gereksiz yük bırakabilir; yalnız pikseli azaltıp kaliteyi aşırı düşürmek de ince yazı ve dokularda bozulma yaratabilir. Farklı dışa aktarımları aynı boyutta yan yana inceleyin ve hem kaliteyi hem de dosya boyutunu birlikte değerlendirin.

JPEG, PNG, WebP ve AVIF seçerken

JPEG genellikle fotoğraf türü içeriklerde küçük dosya için kullanılır ancak kayıplı sıkıştırır ve saydamlığı taşımaz. PNG kayıpsız olabilir ve alfa saydamlığını korur; ekran görüntüsü, düz renkli grafik veya keskin kenarlı öğelerde uygun bir başlangıçtır fakat fotoğrafta daha büyük kalabilir. WebP kayıplı ve kayıpsız seçenekler ile saydamlık desteği sunar. AVIF küçük boyuta ulaşabilir fakat kodlama süresi ve hedef yazılım uyumluluğu kararınızı etkiler. Bunlar kesin kurallar değil başlangıç noktalarıdır: gerçek varlığınızı hedef tarayıcı ve cihazlarda deneyin. Uzantıyı yeniden adlandırmak biçimi dönüştürmez; dosyayı uygun encoder ile yeniden kodlayın ve çıktı gerçekten açılıyor mu kontrol edin.

Kalite kaybını gözle değerlendirme

Sıkıştırma karşılaştırmasında görüntüyü gerçek sunum boyutunda ve yakınlaştırılmış görünümde inceleyin. Yüz, yazı, ince çizgi, degrade, keskin kenar ve koyu alanlar bozulmayı farklı biçimde gösterir. JPEG’de bloklaşma veya halka izleri, düşük palette bantlaşma, şeffaf görselde mat renk kenarları görülebilir. Bir kalite yüzdesi bütün encoder ve içeriklerde aynı sonucu vermez; tek bir sayıyı her görsele uygulamayın. Kaynağı her yeni denemede yeniden kullanın, önceki sıkıştırılmış kopyadan tekrar tekrar kaydetmek kalite kaybını biriktirebilir. Fotoğraf ve ekran görüntüsünü ayrı sınıflar olarak test edip dosya boyutu, algılanan kalite ve açılma hızını birlikte kaydedin.

Web performansı ve metadata kontrolü

Görseller sayfada yer kaplayan büyük kaynaklar olabilir; yalnız sıkıştırma değil doğru ölçüde sunma ve doğru yükleme zamanı da önem taşır. HTML width ve height değerleri alanın önceden ayrılmasına yardım eder. Ekranın altında kalan görseller gecikmeli yüklenebilir, fakat ilk ekrandaki ana görseli gereksiz yere geciktirmek algılanan yüklemeyi kötüleştirebilir. Responsive srcset benzeri varyantlar farklı ekranlara uygun kaynak seçebilir. Fotoğraf dosyalarında EXIF konum ve cihaz bilgisi bulunabileceğinden paylaşmadan önce metadata ihtiyacını gözden geçirin. Orijinal dosyayı ayrı saklayın; web için hazırlanmış küçük kopyayı arşiv veya baskı dosyası yerine kullanmayın. Son kontrolü gerçek sayfa ve ağ koşullarında yapın.

Örnek iş akışı: ürün görselini web’e hazırlama

Bir ürün fotoğrafı mağaza kartında 480 piksel genişlikte görünecekse kaynağın binlerce pikselini her ziyaretçiye indirmek gerekmeyebilir. Önce kart ve retina ekranlar için gerekli varyant genişliklerini belirleyin, ardından orijinalin kopyasını hedef ölçülere indirin. Fotoğraf için JPEG ve WebP gibi seçenekleri aynı ölçü ve benzer algılanan kalitede karşılaştırın; ürün üzerindeki küçük yazıyı, kenarları ve renkleri büyüterek kontrol edin. Saydam olmayan fotoğraf için PNG’nin gereksiz büyük olup olmadığını ölçün. Dosya boyutunu ve kaliteyi not edip sayfaya doğru ölçü bilgisiyle ekleyin. Kaynağı arşivde tutun ve paylaşımdan önce EXIF konum bilgisi gerekip gerekmediğini kontrol edin. Sonuçları gerçek sayfada, mobil ağ benzetiminde gözden geçirin.