SİTE PERFORMANSI WEB SİTESİ

“Serve scaled images” Sorunu Çözümü – Site Performansını Geliştirme

Serve Scaled Images Sorunu Çözümü

Giriş

Ölçeklendirilmiş resim nedir?

Ölçeklendirilmiş bir görüntü, boyutu CSS veya HTML’de tanımlanan boyutla tam olarak eşleşen bir resimdir. Diyelim ki bir web sitesinin kullanıcısı 400 x 400 boyutlu resim yükledi. Ancak, HTML / CSS kodlarında resim boyutu 40 x 40 olarak gösteriliyor. Bu, tarayıcının önce büyük dosyayı indirmesi ve görüntülemeden önce ölçeklendirmesi gerektiği anlamına gelir. Bu da “Serve scaled images” sorununa sebep olur. Daha verimli bir yöntem, görüntüyü 40 x 40’a yeniden boyutlandırmaktır. Böylece tarayıcının görüntüyü verimsiz bir şekilde indirip ölçeklendirmesi gerekmez.

Ölçeklendirilmiş resim kullanmanın avantajları

Düzgün boyuttaki resimleri kullanmak, bir çok byte veri tasarrufu sağlayabilir. Özellikle mobil cihazlar veya tabletlerde sitenizin performansını artırabilir. Ölçeklendirilmiş bir resim, daha az yer kaplar, daha hızlı yüklenir ve kaynak kullanımını azaltır. Ölçeklendirilmiş görüntüler sunmak da web sitesi optimizasyon araçları tarafından sağlanan tavsiyelerden biridir. Daha iyi bir puan almak sitenizin Google’daki sıralamasını yükseltecek ve SEO’yu iyi etkileyecektir.

Nelere ihtiyacınız olacak?

Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız var:

  • FTP erişimi (özellikle resim dizinlerine)
  • Resim düzenleyici (Paint veya picresize gibi herhangi bir çevrimiçi düzenleyici)

Adım 1 — Web sitenizi analiz etmek

Kullanılması gereken kesin görüntü boyutlarını da belirttiğinden, bu adım için GTMetrix‘i kullanmanızı tavsiye ederim.

Örnek olması için, hızlca bir WordPress sitesi oluşturup GTMetrix ile analiz ettim. Analiz sonucu resimlerin tam adreslerini ve önerilen boyutlarını içeren bir liste elde ettim.

Serve Scaled Images Site Analizi

Analiz sonuçlarına göre, ölçekli resim kullanmak, her resmin boyutunu %50’den fazla düşürür. Sahip olduğunuz resim sayısı arttıkça, resimlerinizi ölçeklendirdikten sonra siteniz o kadar hızlı yüklenecektir.

Adım 2 — Resimleri ölçeklendirip değiştirmek

Resimlerinizi küçültmek için öncelikle bunları indirmeniz gerekir. Adım 1’de belirtilen resimler herhangi bir FTP istemcisi kullanılarak indirilebilir. Bundan sonra, resimleri ölçeklemek için bir görüntü düzenleyici (Paint) veya çevrimiçi araçlar kullanmak mümkündür. Picresize kullanarak tüm resimleri önerilen değerlere ölçekledim.

Resim Tekrar Boyutlandırma

Ek olarak, dosya adlarını resimlerde aynı tutmanızı tavsiye ederim. Bu şekilde, yalnızca eski resimleri değiştirmek için kodunuzda herhangi bir değişiklik yapmak zorunda kalmazsınız. Eski resimler yeni ölçeklendirilmiş resimlerle değiştirildikten sonra geriye kalan tek şey yeniden test etmektir.

Adım 3 — Değişiklikleri test etmek

Karşılaştırma için, düzgün ölçekli resimleri yükledikten sonra elde edilen sonuçlar:

Serve Scaled Images Site Analizi

En önemlisi, yeniden yüklenen resimlerde 404 hatalarını önlemek için aynı dosya adına sahip olduğundan emin olmaktır.

Sonuç

Bu kısa rehberde, resimleri ölçeklendirerek “serve scaled images” hatasının nasıl giderileceğini öğrendik. Ölçeklendirilmiş resimler kullanmak, web sitenizin hızını ve performansını iyileştirmenin yanı sıra kaynak kullanımınızı da azaltacaktır. En iyi kısımsa, ölçekli resimler kullanmak için hiçbir kodlama bilgisi gerekmemesidir.

Yorum Ekle

Yorum göndermek için buraya tıklayın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Dünya çapında binlerce aboneye katılın

ve mükemmel fırsatlarla en yeni rehberler e-posta adresinize gelsin

Please wait...

Abone olduğunuz için teşekkürler!

Şimdi kazanmaya başlayın!

Hepsi bir arada web hosting & alan adı yalnızca

6
25 TL
/ay