WordPress’te Ölçekli Görüntüler Nasıl Sunulur (GTmetrix’teki Öğe)

WordPress’te ölçekli görüntüler sunmanız gerekiyor?


Bu, büyük resimleri daha küçük olacak şekilde yeniden boyutlandırmanız gerektiği anlamına gelir.

GTmetrix hangi görüntülerin ölçeklendirilmesi gerektiğini ve kırpılmaları veya yeniden boyutlandırılmaları gereken doğru boyutları belirtir. Ardından, görüntüyü yeniden boyutlandırın (ölçeklendirin) ve eski görüntüleri yenileriyle değiştirin.

Ölçekli Görüntüler Sunma

GTmetrix yalnızca test ettiğiniz tek bir sayfa için optimize edilmemiş resimler gösterdiğinden, ölçeklendirerek başlayın site çapında görüntüler birden çok sayfada görünen görüntüler (logonuz, kenar çubuğunuz ve altbilgi görüntüleriniz). Ardından, diğer sayfalarınızı GTmetrix aracılığıyla çalıştırın ve bu sayfalardaki resimleri tek tek ölçeklendirin.

Görüntüleri otomatik olarak ölçeklemek için bir eklenti kullanabilir miyim?
Muhtemelen değil. Çoğu görüntü optimizasyonu eklentisinde maksimum genişlik + yükseklik ayarlayabilirsiniz. Ancak sitenizin farklı alanları belirli boyutlar gerektirir (resimlerin buna göre ölçeklendirilmesi gerekir).

Resim boyutu hile sayfası oluşturma.
Ölçekli görüntü hataları sunmaktan kaçınmanın en iyi yolu, web sitenizin her alanının (kaydırıcılar, widget’lar, logo, tam genişlikte blog görüntüleri vb.) Boyutlarını öğrenmektir. Ardından, her bir alanın boyutlarını listeleyen bir resim boyutu hile sayfası oluşturun. Resim boyutlarınızı hile sayfasını takip edip yüklemeden önce resimleri yeniden boyutlandırırsanız, bir daha asla ölçekli resim hataları sunmamalısınız.

1. GTmetrix’te Büyük Boyutlu Resimler Bulun

GTmetrix aracılığıyla bir sayfa çalıştırın ve PageSpeed ​​sekmesinde sunum ölçekli görüntü hatalarını görüntüleyin. Önerilerini genişletin, her bir resmin yeniden boyutlandırılması gereken doğru boyutları göreceksiniz. Unutmayın GTmetrix yalnızca test ettiğiniz tek sayfa için hatalar gösterecektir.

Ölçekli Görüntüler Sunumu GTmetrix

Ayrıca görüntülerin ölçeklendirilip ölçeklendirilmediğini manuel olarak kontrol etme. İlk olarak, sağ tıklayın ve resim adresini kopyalayın.

Resim Adresini Kopyala

Ardından, resim URL’sini yeni bir tarayıcı sekmesine yapıştırın. Web sitenizde gösterilen resmi resim URL’nizle karşılaştırırsanız, fark edilir bir boyutta olduğunu görürsünüz. Bu, görüntünün ölçeklendirilmesi gerektiği anlamına gelir. Resminizin iki varyasyonunu yan yana karşılaştırarak, resmin gerçekte ne kadar büyük olduğunu (ve bulunduğu sayfanın neden çok yavaş yükleniyor olabileceğini) görebilirsiniz..

Ölçekli ve Ölçeklendirilmemiş Resim

2. Görüntüleri Doğru Boyutlara Göre Yeniden Boyutlandırın

Eski görüntüyü indirin ve seçtiğiniz görüntü düzenleme aracınızda açın (GIMP kullanıyorum). Görüntüyü, GTmetrix tarafından önerilen boyutlara göre yeniden boyutlandırın ve / veya kırpın. Birçok görüntü düzenleme aracı görüntüleri sıkıştırmanıza ve kaldırmanıza olanak tanır EXIF verileri bu da görüntünün daha hızlı yüklenmesini sağlar.

Görüntü GIMP'yi Ölçeklendirme

Ayrıca görüntüleri kırpabilir ve yeniden boyutlandırabilirsiniz doğrudan WordPress’te:

WordPress Media Editor'da Görüntüyü Ölçeklendirme

3. Eski Görüntüyü Yenisiyle Değiştirin

Yeni görüntünüzü WordPress’e yükleyin, ardından eski görüntüyü yenisiyle değiştirin.

Ölçeklendirilmemiş Widget Resmi

Ölçekli Widget Resmi

4. Sayfayı GTmetrix’te Yeniden Test Edin

Sayfayı GTmetrix’te yeniden test edin ve artık ölçekli görüntü hataları sunmamanız gerekir.

% 100 Ölçekli Görüntüler Sunar

5. Mobil Cihazlarda Ölçeklendirilmiş Görüntüler Sunun

Ölçekli görüntülerin sunulması mobil cihazlarda farklıdır.

Ücretsiz bir GTmetrix hesabına kaydolursanız, mobil web sitesi hızı Android’de. Siteniz kullanmıyorsa, daha fazla hizmet ölçekli görüntü hatası göreceksiniz uyarlamalı görüntüler, yani mobil cihazlar için görüntüleri otomatik olarak yeniden boyutlandırma (bu genellikle bir eklenti tarafından yapılır).

Aşama 1: Sitenizi GTmetrix’in Android Testi ile çalıştırın:

GTmetrix Mobil Testi

Ölçekli Görüntüleri Mobil Cihazda Sunun

Adım 2: GTmetrix tarafından sağlanan mobil arka plan boyutlarınızı bulun:

Maksimum Arkaplan Genişliği

Aşama 3: Bir Uyarlanabilir Görüntüler eklentisi yükleyin. ShortPixel veya Uyarlanabilir Görüntüler.

ShortPixel Uyarlamalı Görüntüler

4. Adım: GTmetrix tarafından sağlanan boyutları arka plan maksimum genişliği.

Arka Plan Maksimum Genişliği

Adım 5: Hata olmadığından emin olmak için sitenizi GTmetrix’in mobil testinden geçirin.

GTmetrix Mobil Testi

Adım 5: Uyarlanabilir görüntü eklentinizdeki diğer ayarları yapılandırın (ShortPixel, WebP desteği, tembel yükleme görüntüleri, akıllı kırpma ve EXIF ​​verilerini kaldırma içerir). Bunlar da yardımcı olabilir.

6. Birden Fazla Sayfadaki Görüntüleri Yeniden Boyutlandırın

Aynı görüntüyü birden çok sayfada kullanıyorsanız ve ölçeklenmesi gerekiyorsa, görüntüyü yeniden boyutlandırabilir, HTML’sini kopyalayabilir ve ardından birden çok sayfada düzeltmek için Daha İyi Arama Değiştirme eklentisini kullanabilirsiniz.

Aşama 1: Yükle Daha İyi Arama Değiştirme eklentisi.

Adım 2: Eski resmin HTML’sini kopyalayın ve Daha İyi Arama Değiştirme eklentisindeki “Ara” alanına yapıştırın. Kullanabilirsiniz WordPress Metin Editörü Görüntünün HTML kodunu görmek için Not: Better Search Replace, bir görüntüyü yalnızca eklentiye girdiğiniz tam HTML’yi içeriyorsa değiştirir.

Aşama 3: Yeni resmin HTML’sini kopyalayın ve “Şununla Değiştir” alanına yapıştırın.

Ölçekli Resim HTML'si sunma

4. Adım: Taranmasını istediğiniz tabloları (örn. Yayınlar) seçin ve kuru taramanın işaretini kaldırın.

Adım 5: “Ara / Değiştir” e tıkladığınızda eklenti eski görüntüyü yenisiyle değiştirir.

7. Bir Görüntü Boyutları Hile Sayfası Oluşturun

Daha önce de belirttiğim gibi, yüklemeden önce görüntüleri yeniden boyutlandırabilmeniz için web sitenizin tüm alanlarının boyutlarını ölçmelisiniz. Bu boyutları GTmetrix’te bulabilirsiniz (yalnızca ölçekli resim hataları sunuyorsanız) veya bunları temanızın CSS stil sayfasında da bulabilirsiniz.

Misal:

  • Kaydırıcı resimleri: 1900 (w) x 400 (h)
  • Atlıkarınca resimleri: 115 (w)
  • Widget görüntüleri: 414 (w)
  • Fullwidth blog gönderisi resimleri: 680 (w)
  • Öne çıkan resimler: 250 (w) x 250 (h)
  • Yoast Facebook OG resmi: 1200 (w) x 628 (h) – adım 11
  • Yoast Twitter OG resmi 1024 (g) x 512 (s) – adım 11

680 Piksel Genişliği Dikdörtgen

Blogumun genişliği 680 piksel olduğundan, bu yayındaki her bir resim 680 piksel olarak yeniden boyutlandırıldı.

Ölçekli Görüntüler Sunmak için WordPress Eklentileri

Çoğu görüntü optimizasyonu eklentisi görüntüleri yeniden boyutlandırma seçeneğine sahiptir, ancak web sitenizin farklı alanları farklı boyutlar gerektirdiğinden, GTmetrix’deki hataları düzeltmeye çalışırken bu çok etkili değildir. Resimlerinizin kesinlikle muazzam olmadığından emin olmak için. Imagify eklentisinin dediği gibi, maksimum genişlik en büyük küçük resminizden daha az olmamalıdır.

Smush

Görüntüleri Yeniden Boyutlandır

Imagify

Görüntüleri Yeniden Boyutlandır

EWW Image Optimizer

Görüntüleri Yeniden Boyutlandırma EWWW

Diğer Görüntü Optimizasyonları

Üzerine tam bir eğitim yazdım WordPress’te görüntüleri en iyileştirme içerir:

  • Görüntüleri sıkıştırma
  • CDN aracılığıyla görüntü sunma
  • GIF’leri yeniden boyutlandırma
  • EXIF verilerini kaldırma
  • Tembel yükleme görüntüleri + videolar
  • Cloudflare Mirage, Polish, Hotlink Koruması

GTmetrix'te Görüntü Optimizasyonları

Daha Fazla WordPress Hız Eğiticisi Aranıyor?
İşte yazdığım diğer öğreticiler:

  • WP Roket Nasıl Kurulur (öneriyorum önbellek eklentisi)
  • Cloudways vs. SiteGround (Önerdiğim en iyi iki ana bilgisayar)
  • % 100 GTmetrix Puanlarını Nasıl Aldım (WordPress Hız Kılavuzu)

Ayrıca WordPress hız optimizasyonu ile ilgili harika bir videom var:

Sıkça Sorulan Sorular

&# X2705; Ölçekli görüntüler sunmak için bir eklenti kullanabilir miyim?

Hayır, web sitenizin farklı bölümleri farklı resim boyutları gerektirir. Görüntüleri bu benzersiz boyutlara uyacak şekilde ölçeklendirmeniz gerekir.

&# X2705; Görüntüyü ölçeklemenin en kolay yolu nedir?

Görüntüyü indirin, Photoshop veya Gimp gibi bir programda kırpın / yeniden boyutlandırın, ardından eski görüntüyü yenisiyle değiştirin.

&# X2705; Önce hangi görüntüleri ölçeklemeye başlamalıyım??

Logonuz, kenar çubuğunuz, resimleriniz, altbilgi resimleriniz ve diğerleri gibi birden çok sayfada görünen resimleri ölçeklendirerek başlayın.

&# X2705; Bir resmin doğru boyutlarını nerede bulabilirim?

GTmetrix, Sayfa Hızı sekmesindeki öğeyi genişlettiğinizde her görüntünün doğru boyutlarını söyler.

&# X2705; Bir görüntüyü nasıl tamamen optimize edebilirim??

Doğru boyutlara ölçekleyin, sıkıştırın ve bir görüntü programı veya eklenti kullanarak EXIF ​​verilerini kaldırın, ardından HTML’de görüntü boyutlarını belirttiğinizden (görüntünün genişliğini ve yüksekliğini ayarlayın) emin olun.

Umarım bu eğitimi faydalı bulmuşsunuzdur! WordPress sitenizde hâlâ ölçekli resim hataları sunuyorsanız, sorunuzla ilgili bir yorum bırakın, yine de size yardımcı olacağım.

Şerefe,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map