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

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

Büyük boyutlu görseller kullanmak web sitenizin hızını ve performansını olumsuz etkileyebilir ama serve scaled images, yani ölçeklendirilmiş görüntüler sunarak bunları değiştirmek mümkündür. Nasıl olduğunu öğrenmek için kaydırmaya devam edin!

Ölçeklendirilmiş resim nedir? (Scaled Images)

Ö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)

Serve Scaled Images Doğru Biçimde nasıl yapılır?

Şimdi, web sitenizde ölçeklendirilmiş görselleri nasıl sunacağınızı öğrenmeye geçiyoruz.

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 önerilir.

  • GTMetrix’e erişin, sitenizin URL’sini girin ve Sitenizi Test Edin’e tıklayın.
  • Tamamlandığında, Page Speed sekmesine gidin ve Serve scaled images bölümüne tıklayın.
  • Görsellerin URL’lerini kopyalayın ve önerilen boyutları not edin.

Örnek olması için, hızlıca bir WordPress sitesi oluşturup GTMetrix ile analiz ettik.

Serve scale image testi sonucu

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: Görüntüleri Yeniden Ölçeklendirme

Ölçeklendirilmiş görüntüleri sunmanın bir sonraki adımı, büyük boyutlu resimleri yeniden ölçeklendirmektir. Kullanabileceğiniz tonlarca resim düzenleme aracı vardır ancak bu eğiticide PicResize‘ı kullanacağız.

  1. PicResize‘ı açın ve From URL düğmesini tıklayın.
  2. Düzenlemek istediğiniz resmin URL’sini yapıştırın ve Continue to Edit Picture‘ı seçin.
  3. Açılır menüden Custom Size seçeneğini seçin ve önerilen boyutu girin
  4. I’m Done, Resize My Picture‘a tıklayın ve Save to Disk düğmesini tıklayarak görselinizi kaydedin.
  5. Dosya adından rsz_ kaldırarak resimleri orijinal adlarıyla yeniden adlandırın.

Step 3: Replacing the Images

Tahmin edebileceğiniz gibi, ölçeklendirilmiş görseller sunarken yapmamız gereken son şey, o eski görsellerle yenilerini değiştirmek. Bunu yapmak için Enable Media Replace‘i kullanacağız.

  1. Eklentiler bölümünden Enable Media Replace‘i bulup yükleyin ve etkinleştirin..
  2. NMedia -> Library yolunu izleyin ve düzeni List‘ten Grid‘e çevirin.
  3. Click the Replace Media option, next to the oversized images.
  4. Büyük boyutlu resimlerin yanındaki  Replace Media seçeneğini tıklayın.
  5.  Replacement (Değiştir) ve Date (Tarih) seçeneklerini beğeninize göre ayarlayın, ardından Update‘e (Güncelle) tıklayın.

İşte bu kadar! Güncellemeden sonra sitenizin sonuçları şöyle görünecektir:

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.

Author
Yazar

Egehan D.

Egehan Hostinger'da ML ve NN ile denetimsiz öğrenme üzerinde çalışıyor. Veri analizi hakkında büyük bir tutkuya sahiptir. İşi her ne kadar hobi gibi olsa da, çeşitli aktivitelerde gönüllü olmaktan ve ormanda kamp yapmaktan da büyük oranda zevk alıyor.