Specifying Image Dimensions

Specifying Image Dimensions Görüntüler, bir web sayfasında kullanılan çoğu elemanın belirli nitelikleri vardır. Görüntü boyutları niteliklerdir ve istekte bulunan web tarayıcısı için HTML veya CSS’de belirtilmeleri çok önemlidir.

Specifying Image Dimensions Nasıl Çalışır

Web tarayıcısı web sayfasını oluştururken yapacağı ilk şey, metnin nerede olduğunu ve resimlerin nerede olduğunu kontrol etmektir. Tarayıcının sayfayı gösterebilmesi için, metni metin uzunluğu, yazı tipi boyutu ve tabii ki resim boyutları gibi bilgilere dayanarak oluşturması gerekir. Görüntü boyutları belirtilmezse, web tarayıcısı önce tüm metni, aldığı metne göre oluşturur ve ardından görüntüleri oluşturarak ve etrafındaki metni yeniden konumlandırarak sayfayı yeniden oluşturur. Bu, özellikle belirtilen boyutlar olmadan birden fazla görüntü olduğunda sayfanın yükleme hızını önemli ölçüde artırır. Görüntü boyutları belirtildiğinde, tarayıcı, görüntülerin nerede olacağını bilerek sayfayı oluşturmaya başlar ve metni buna göre oluşturur. Boyutların doğru bir şekilde belirlenmesi, yanlış verilerin yeniden akmaya ve ek bir gecikmeye neden olacağı için de çok önemlidir.

CSS’deki Boyutlar

Görüntü boyutlarını yalnızca CSS’de belirlediyseniz, bunun için GTmetrix’te %0 alacağınızı, ancak yine de en iyi duruma getirileceklerini unutmayın.

Specifying image dimensions aşağıdaki Avantajları sağlar:

  • Artan sayfa yükleme hızı

Specifying Image Dimensions

Specify image dimensions nasıl kullanılır

Web sitenizin sayfa yüklenmesini hızlandırmak için görüntü boyutlarını belirlemek önemli olduğundan, görüntüleri <img> etiket satırlarınıza ekleyerek belirleyebilirsiniz.

Belirtilen boyutları olmayan bir görüntünün HTML’de göründüğü gibi:

<img src="resim.jpg" />

Görüntü 300×200 genişlik ve yükseklik boyutlarına sahipse, şunu ekleyeceğiz:

<img src="resim.jpg" width="300" height="200" />

Görüntü boyutlarını bir Satır İçi CSS’de belirtmek için aşağıdaki satırı eklemeniz gerekir:

<img src=" resim.jpg" style="width: 300px; height: 200px">

Görüntü boyutlarını harici bir CSS’de belirtmek istiyorsanız, ihtiyacınız olan kod:

#resim.jpg { width: 300px; height: 200px; }

Gelişmiş kullanıcılar, içeriğe bağlı olarak CSS için duyarlı tasarım kullanabilir. İçinde width/height için min/max, resim kapları için dolgu ve bu kapları dolduracak görüntüler için mutlak konumlar ayarlayabilirsiniz.

İlginizi çekebilir: Avoid CSS @import Kullanımı

Specifying Image Dimensions WordPress

WordPress’te öne çıkan görüntüleri ve görüntü boyutlarını işlemek için kod kullacağız. Aktif temanızın functions.php dosyasına aşağıdaki kodu ekleyin.

// Öne çıkan görüntülerin etkin olduğundan emin olun
add_theme_support( 'post-thumbnails' );
// Öne çıkan görüntü boyutları ekleyin
add_image_size( 'featured-large', 640, 294, true ); // width, height, crop
add_image_size( 'featured-small', 320, 147, true );
// Medya Ekle modunu kullanmak için başka kullanışlı resim boyutları ekleyin
add_image_size( 'medium-width', 480 );
add_image_size( 'medium-height', 9999, 480 );
add_image_size( 'medium-something', 480, 480 );
// Medya Ekleme modunda kullanmak için üç kullanışlı resim boyutunu kaydedin
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'medium-width' => __( 'Medium Width' ),
'medium-height' => __( 'Medium Height' ),
'medium-something' => __( 'Medium Something' ),
) );
}

Kodun içindeki yorumlar, bu yazının geri kalanında olduğu gibi neler olduğunu hemen hemen açıklıyor.

Eklenti kullanımı

Tüm zamanların en iyi WordPress eklentisinden biri Regenerate Thumbnails. Yüklediğiniz her görüntünün, belirttiğiniz tüm görüntü boyutları için çalışma yapar. Sitenizdeki görüntü boyutlarını her değiştirişinizde onu çalıştırın, yoksa eski görüntüler gerçekten kötü görünmeye başlar.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir