Resimlerinizi Önceden Tanımlanmış Resim Boyutları ile Optimize Edin [WordPress İpucu]

Bir web sitesinde görüntüleri optimize etmek göz korkutucu bir iştir. Daha az resim, sıkıştırılmış resim, sprite veya svg kullanmayı seçebilirsiniz; liste devam ediyor. Birçok WordPress sitesinin tetiklendiği yerlerden biri, görüntü boyutlarını tanımlamaktır; Yoğun içerikli siteleri optimize etmenin en önemli özelliği.

Görüntü boyutları çok önemlidir çünkü görüntüler yüklenirken verilen boyutlara göre görüntüler otomatik olarak oluşturulur. Bu, 3000 piksel genişliğinde bir orijinal görüntünüz olsa bile, 600 piksel'lik bir görüntünün yeterli olması durumunda asla kullanılmamasını sağlar. İdeal olarak, 600 piksel genişliğinde bir alan, daha küçük bir ölçek büyütmek yerine 600 piksel genişliğinde bir görüntü kullanmalıdır.

Bu yazıda size yol göstereceğim resim boyutları nedir ve onları nasıl tanımlanır.

WordPress Görüntüleri Nasıl Yönetir?

Daha önce bir WordPress makalesine bir resim eklediyseniz, resim boyutu seçicisine gelmelisiniz. Bu, görüntülerin küçük, orta ve büyük sürümlerini eklemenizi sağlar. Bunlar için gerçek boyutlar WordPress ayarlarında değiştirilebilir.

WordPress aracılığıyla bir resim yüklediğinizde, bu resimlerin sürümlerini oluşturur ve ayrı olarak saklar. Örneğin, 1200 × 800 görüntü yüklerseniz, WordPress 100 × 100, 600 × 400 ve 900 × 600 sürümleri oluşturabilir. Bir görüntü eklediğinizde ve "orta" yı seçtiğinizde asıl ortadaki sürümün tersine, asıl orta sürüm kullanılacaktır.

Bu oldukça yararlı çünkü o Sunucudaki bant genişliğini ve istemci bilgisayardaki işlem süresini korur. 600 × 400 görüntü indirmenin 1200 × 800 görüntü indirmekten daha hızlı olmadığını düşünüyorum..

Ölçeklendirilmesi gereken daha büyük bir görüntü kullanılıyorsa, tarayıcının hesaplamalara dikkat etmesi gerekiyor Bunu yapmak için. Bu saatler sürmezken, görüntü ağırlıklı web sitelerinde farkedilir olabilir.

Doğru Yerdeki Doğru Resim

Nihai hedef olmalı her zaman uygun resim boyutunu kullan. 440 × 380 görüntüye ihtiyacınız varsa, o zaman sunucudan tam olarak aynı boyutta bir görüntü alın. Yüklenen görüntüleri kullanacağınız iki ana yer var: öne çıkan görüntüler ve içeri aktarılan görüntüler - Önce öne çıkan resimlere odaklanmanızı öneririm.

En görsel olarak yönlendirilmiş makalelerin dışında hepsinde, bir yazı içi görüntünün 220 piksel veya 245 piksel genişliğinde olması farketmez. Hangi sürümü kullanıyorsanız kullanın aynı derecede kullanışlı olacaktır. Ancak öne çıkan görüntüler genellikle ortak boyutlarda gösterilir. Makale listeleri için 178 × 178 küçük resim kullanabilirsiniz, makale başlıkları için 1200 × 600 genişliğinde bir resim kullanabilirsiniz..

Bunlara ek olarak, ayarlarında tanımlandığı şekilde ayrı bir küçük resim / orta / büyük boyutta saklamak isteyebilirsiniz. belirli boyutlara kolayca erişmenizi sağlar yazılara resim eklerken.

Öyleyse her şeyin kaynadığı şey şudur: Öne çıkan görüntüler için kullanabileceğimiz iki ekstra görüntü boyutumuz olsa harika olmaz mıydı? Bir resim yüklendiğinde, bu resim boyutları diğerlerinin yanında oluşturulur. İyi haber şu ki, WordPress sizi oldukça basit bir fonksiyonla kapsıyor..

Görüntü Boyutları Oluşturma

Kullanarak add_image_size () işlevi web sitenizin ihtiyaç duyduğu tüm resim boyutlarını tanımlayabilirsiniz. Yukarıda belirtilen iki örneği oluşturalım. Aşağıdaki kodu temanızın functions.php dosyasına veya bir eklenti dosyasına yerleştirin.

 add_image_size ('featured_thumbnail', 178, 178, doğru); add_image_size ('özellikli_yayın', 1200, 600); 

Gördüğünüz gibi, bu fonksiyon dört parametre alır. İlk parametre boyut için bir ad belirlemenizi sağlar. İkinci parametre, maksimum genişlik, üçüncü, maksimum yüksekliktir. Dördüncü parametre sert kırpmayı ayarlar. True olarak ayarlanırsa, resim belirttiğiniz boyutta oluşturulacak.

Bu, temanıza veya eklentinize eklendikten sonra yüklediğiniz her dosyanın iki yeni sürümü WordPress tarafından oluşturulacaktır..

Görüntü Boyutlarını Kullanma

Bu görüntü boyutları, medya alımıyla ilgili birçok işlevde kullanılabilir. İlk önce öne çıkan resimlere bakalım. the_post_thumbnail () yayının özellikli görüntüsünü görüntülemek için yaygın olarak kullanılır. Aşağıdaki kod bir WordPress döngüsüne yerleştirilebilir:

 the_post_thumbnail ('featured_thumbnail'); 

Bu işlevin ilk parametresi kullanılacak görüntü boyutunu belirtmenize izin verir. "Featured_thumbnail" belirttiğimden beri, bu dosyanın 178 × 178 sürümü kullanılacak.

Gibi başka fonksiyonlar vardır wp_get_attachment_image ()ve wp_get_attachment_image_src () Ayrıca resim boyutu parametresini kullanın. Ne zaman böyle bir işlev kullanırsanız, daima uygun bir resim boyutu belirlemelisiniz..

Yenilenen Küçük Resimler

Zaten bir siteniz varsa, yalnızca bir resim boyutu tanımlayarak makalelerinizi geriye dönük olarak optimize edemezsiniz. Resim boyutları yalnızca yeni bir resim yüklendiğinde dikkate alındığından, sistemdeki resimlere uygulanmazlar..

Korkma, Yenileme Küçük resim eklentisi her şeyi daha iyi hale getirecek! Bu eklenti, tanımlanmış tüm resim boyutlarını göz önünde bulundurarak, tüm resimleriniz için küçük resimleri yeniden oluşturabilir. Ayrıca belirli bir resmi hedefle, birkaçınız varsa veya bazı testler yapıyorsanız,.

Küçük resimleriniz yeniden oluşturulduktan sonra, sitenize yüklenmiş optimize edilmiş sürümleri görmelisiniz. Bunu görüntünün kaynağını görüntüleyerek kontrol edebilirsiniz. 'Example.jpeg' yüklediyseniz ve öne çıkan görüntünüzün kaynağı olarak 'example.jpeg'i görüyorsanız, bir şey doğru değildir. Eğer görürsen “Örnek-178 x 178.jpeg” o zaman her şey yolunda; optimize edilmiş resim gösterilir.

Duyarlı Görüntüler

Optimize edilmiş bir sitenin korunmasındaki bir zorluk, duyarlılıktır. İPad'deki bir makaleyi görüntülediğimde, maksimum genişlik 786px veya daha fazla olacağından, büyük boyutlu bir yazı içi görüntü küçültülür..

En kolay çözüm Hammy gibi bir eklenti kullanmak. Hammy, temanızın içeriğinin genişliğini temel alarak çalışır (tarayıcının pencere genişliğinin aksine) ve buna göre optimize edilmiş görüntüler sunabilir. Bu, özellikle işlem gücü ve bant genişliğinin önemli olabileceği mobil kullanıcılar için kullanışlıdır..

Daha Fazla Görüntü Optimizasyonu

Giriş bölümünde belirttiğim gibi, görüntüleri optimize etmenin sayısız yolu var. Sprite'lardan görüntü sıkıştırmaya, görüntülerle el ele gelen yükleme zamanlarını azaltmak için birçok teknik kullanılabilir. Ashutosh KS, Görüntü Performansını Artırmak İçin 9 WordPress Eklentisini gösteren harika bir makale yazdı!

Ayrıca, resim öğelerine nasıl destek ekleyeceğinizi gösteren, kendi kodunuzu yazmak istiyorsanız kullanmak istediğiniz bir şey olan Sorunsuz Görüntülere de göz atmanızı öneririm.