Çoğu web sitesinde görseller sayfadaki tek başına en ağır şeydir, çoğu zaman HTML, CSS ve JavaScript'in toplamından daha büyüktür. Bir sayfa yavaş hissettiriyorsa, bakılacak ilk yer görsellerdir ve düzeltmeler genellikle hızlıdır.
Üç teknik neredeyse tüm işi görür: görseli gerçekten gösterildiği boyuta getirin, sıkıştırın ve modern bir formatta sunun. Birlikte uygulandığında görsel ağırlığını rutin olarak %70 veya daha fazla azaltırlar.
Gerçekten gösterdiğiniz boyuta getirin
Bu, en yaygın ve en savurgan hatadır. Kameradan çıkan bir fotoğraf 6000 piksel genişliğinde olabilir, ama makaleniz onu 800 piksel genişliğinde bir sütunda gösterir. Tarayıcı altı bin pikselin tamamını indirir ve sonra görseli sığdırmak için küçültürken çoğunu atar.
800 piksellik bir alanda 6000 piksellik bir görsel sunmak, gerekenden beş ila on kat daha fazla veri indirmek anlamına gelebilir. Çözüm basit: dosyayı yaklaşık olarak kaplayacağı genişliğe, artı yüksek yoğunluklu ekranlar için biraz pay bırakarak yeniden boyutlandırın.
Pratik bir kural:
- Tam genişlikte kahraman görseli: 1600–2000 px genişlik fazlasıyla yeter.
- Makale içi görsel: 1000–1400 px.
- Küçük resim: 300–500 px.
Her görseli sayfanıza ulaşmadan önce küçültmek için Görsel Yeniden Boyutlandırıcı aracını kullanın. En-boy oranını kilitli tutar, böylece hiçbir şey esnemez.
İsrafı temizlemek için sıkıştırın
Boyutlar doğru olduğunda, sıkıştırma gözün göremediği detayları kaldırır. Fotoğraflar için %75–85 civarındaki kalite ideal noktadır: dosya çarpıcı biçimde küçülürken resim aynı görünür. PNG olarak kaydedilmiş düz grafikler ve ekran görüntüleri için, renk sayısını azaltma (256 renge indirgeme) dosyayı orijinal boyutunun bir kesrine küçültebilir.
Görsel Sıkıştırıcı her ikisini de halleder. JPEG ve WebP'yi kaliteye göre yeniden kodlar, PNG'leri indirger ve başladığınızdan daha büyük bir dosya asla üretmeyeceğini garanti eder. Bütün bir galeriniz varsa, toplu olarak çalıştırın ve bir ZIP indirin.
Modern bir formata geçin
Format seçimi tek başına bir dosyayı yarıya indirebilir. İşte yaygın seçeneklerin fotoğraflar için karşılaştırması.
| Format | JPEG'e göre tipik boyut | En uygun |
|---|---|---|
| JPEG | Referans | Evrensel yedek; fotoğraflar |
| WebP | ~%25–35 daha küçük | Fotoğraflar ve grafikler; geniş tarayıcı desteği |
| AVIF | ~%50 daha küçük | En küçük boyutun önemli olduğu fotoğraflar |
| PNG | Fotoğraflar için çok daha büyük | Logolar, ikonlar, düz grafikler, şeffaflık |
WebP, 2026'da güvenli varsayılandır — güncel her tarayıcı onu okur ve JPEG'i rahatça geçer. AVIF daha da küçüğe gider ama kodlaması daha uzun sürer ve desteği biraz daha dardır. Görsel Dönüştürücü AVIF'i hedeflemenizi sağlar ve AVIF uygun olmadığında sessizce WebP'ye geri döner, böylece tahmin yürütmeden mevcut en iyi sonucu alırsınız.
Bir uyarı: fotoğraflar için PNG kullanmayın. PNG logolarda, ikonlarda ve şeffaflık gerektiren her şeyde parlar, ama bir fotoğraf için aynı kalitede bir WebP'nin birkaç katı büyük olabilir.
Hepsini bir araya getirin
Web için hazırlanan herhangi bir görsel için güvenilir bir akış:
- Görüntülenme genişliğine (artı retina ekranlar için pay bırakarak) yeniden boyutlandırın.
- WebP'ye, ya da mümkün olan en küçük dosyayı istiyorsanız AVIF'e dönüştürün.
- İsrafın son kalıntısını sıyırmak için %75–85 kalitede sıkıştırın.
Bunu yapın ve 5 MB'lık bir kamera fotoğrafı, bir makale sütununda birebir aynı görünen 120 KB'lık bir WebP olabilir. Bir sayfada çarpın ve yükleme süresindeki fark çarpıcıdır.
Her şey Canvas ve WebAssembly kullanılarak tarayıcınızda çalışır, yani hiçbir şey yüklenmez ve araçlar ilk ziyaretinizden sonra çevrimdışı çalışmaya devam eder. Bu, siteniz için bir klasör dolusu görseli herhangi bir sunucuya teslim etmeden hazırlayabileceğiniz anlamına gelir.
Dosyaların ötesinde
İki alışkanlık daha yardımcı olur ve hiçbir maliyeti yoktur:
- Sayfa katının altındaki görselleri tembel yükleyin;
loading="lazy"ile tarayıcı onları yalnızca okuyucu yakınına kaydırdıkça çeker. - Görseller yüklenirken düzenin sıçramaması için genişlik ve yükseklik özniteliklerini ayarlayın; bu aynı zamanda Core Web Vitals puanınıza da yardımcı olur.
Bir sayfayı tam olarak hangi görsellerin yavaşlattığını bilmek ister misiniz? Görsel SEO rehberimiz denetimi ele alır ve bir sayfa hızı kontrolü en ağır varlıkları listeler, böylece önce nereyi hedefleyeceğinizi bilirsiniz.