Görüntü optimizasyonu için $ content_width kullanmanın iyi bir alternatifi nedir?

$content_widthKÜRESEL WordPress etkileri birçok temalar ve yayınlarında görüntü ve yerleştirmeler boyutunu sınırlayarak hatta bazı eklentileri, bu wordpress.org sunulan temalar için bir gerekliliktir.

Aşağıdakiler kullanılarak ayarlanır:

$content_width = 584; // Twenty Twelve example

Bir gönderiye büyük bir resim (varsayılan 1024x1024) eklerseniz şu sonuç elde edilir:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

Bunun yerine, bu genel ayarı kaldırır ve gerçek görüntü boyutunu eklerseniz, add_image_sizebununla birlikte ayarlanır :

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

Global olanı kaldırmak ve çok yaygın olan büyük görüntüleri eklemek , genellikle 2 katın üzerinde bir tasarrufla sonuçlanır, birden fazla görüntüye sahip sayfalarda sayfa yüklendiğinde yüzlerce KB kaydedildiğini görüyorum .

add_image_sizeTam boyutlu görüntüler ekleme yeteneğini kullanmak ve kaldırmak daha iyi bir seçenek değil mi?

ps. Burada daha doğru verilerle yazdım

Globalin $content_widthyalnızca görüntüler için değil, video gibi gömülü nesneler için de kullanıldığını unutmayın . Bu nedenle, herhangi bir çözüm yalnızca kullanımın / desteğin düşürülmesi anlamına gelmez $content_width.

Genellikle bir Tema içerik alanı görüntülerini birkaç şekilde kısıtlar:

1. Büyük Resim boyutu: $content_widthTema tasarımı için uygun bir şey tanımlama
2. Orijinal / Tam Görüntü boyutu: #content img { max-width: XXX; height: auto; }Eklenen tam boyutlu görüntülerin düzeni bozmamasını sağlamak için bir CSS kuralı tanımlama
3. Minik Resim boyutu: set_post_thumbnail_size()Öne Çıkan Resim / Post Minik Resmi varsayılan thumbnailboyutunu tanımlamak için arama . (Not: Kişisel olarak bu yöntemi kullanmanızı önermiyorum. Öne çıkan bir görüntü için belirli bir konuma özgü özel görüntü boyutları tanımlayın ve ardından bu özel boyutu belirli bir şablon konumunda, yoluyla arayın the_post_thumbnail( $size ).)

Bildiğiniz gibi, WordPress'in herhangi bir görüntü isteği için kullanılacak ara görüntü boyutunu seçmesi nedeniyle, bu istek tarayıcı ölçekli bir görüntüye neden olabilir.

Büyük Resim için Tema Tanımlı Değerler

Bir seçenek büyük görüntü boyutları için ayarları yeniden tanımlamak olacaktır . (Dikkatle ilerleyin. Bu, kendi siteniz için uygundur, ancak kullanıcı yapılandırma ayarlarıyla uğraşan genel olarak dağıtılmış bir Tema ... en iyi ihtimalle gri alandır.)

Büyük görüntü boyutu ayarları şu şekilde saklanır:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

Böylece, bu değerleri değerinize göre ayarlayabilirsiniz$content_width :

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(Tabii ki, uygun şekilde bunun etrafına bir miktar güvenli / hata kontrolü koymak istersiniz.)

Tam Boyutlu Resimler Ekleme Seçeneğini Kaldır

Kullanıcıların tam boyutlu resimler eklemesini önlemek istiyorsanız (tekrar: dikkatli olun; bu Eklenti bölgesi olabilir), filtreleyebilirsiniz 'image_size_names_choose':

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Yine: Bu filtre birden fazla yerde kullanıldığından, buraya bazı aklı başında arızalar eklemek isteyebilirsiniz.

Tam genişlik sonrası görüntüler için özel bir görüntü boyutu tanımlama

Önceki seçenekle ilgili olarak, bir 'full-post-width'görüntü boyutu tanımlayabilirsiniz :

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

Ardından, kullanılabilir seçenekler listesine ekleyin:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Evet bencede. $content_widthRepoya sunulan temalarla ilgili sorunu çözmek için tasarım için seçtiğim boyutları zorlamak üzere seçenek filtrelerini kullanıyorum.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...