Apa alternatif yang baik untuk menggunakan $ content_width untuk optimasi gambar?

The $content_widthGLOBAL di WordPress efek banyak tema dan bahkan beberapa plugin dengan membatasi ukuran gambar dan embeds dalam posting, merupakan persyaratan untuk tema diserahkan ke wordpress.org.

Ini diatur dengan menggunakan:

$content_width = 584; // Twenty Twelve example

Jika Anda memasukkan gambar besar (default 1024x1024) ke dalam posting, hasilnya adalah:

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

Jika Anda menghapus pengaturan global ini dan memasukkan ukuran gambar yang sebenarnya, set dengan add_image_sizeitu menghasilkan:

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

Menghapus global dan menyisipkan gambar besar, yang sangat umum , sering menghasilkan penghematan lebih dari 2x, di halaman dengan banyak gambar, saya melihat ratusan KB disimpan pada pemuatan halaman.

Apakah menggunakan add_image_sizedan menghapus kemampuan untuk memasukkan gambar ukuran penuh bukan pilihan yang lebih baik?

ps. Saya menulis di sini dengan data yang lebih akurat

Perlu diingat bahwa $content_widthglobal tidak hanya digunakan untuk gambar, tetapi juga untuk objek yang disematkan, seperti video. Jadi, solusi apa pun tidak akan hanya berupa menjatuhkan penggunaan / dukungan $content_widthitu sendiri.

Biasanya Tema akan membatasi gambar area konten dalam beberapa cara:

1. Ukuran Gambar Besar : Menentukan $content_widthsesuatu yang sesuai untuk desain Tema
2. Ukuran Gambar Asli / Penuh : Menentukan aturan CSS untuk #content img { max-width: XXX; height: auto; }memastikan bahwa gambar ukuran penuh yang dimasukkan tidak merusak tata letak
3. Thumbnail Ukuran gambar: Memanggil set_post_thumbnail_size()untuk menentukan Ukuran Gambar Utama / Post Thumbnail default thumbnail. (Catatan: Saya pribadi tidak merekomendasikan menggunakan metode ini. Tetapkan ukuran gambar khusus untuk lokasi tertentu untuk gambar yang ditampilkan, dan kemudian panggil ukuran khusus itu di lokasi templat tertentu, melalui the_post_thumbnail( $size ).)

Seperti yang telah Anda temukan, karena cara WordPress memilih dengan ukuran gambar menengah untuk digunakan untuk permintaan gambar apa pun yang diberikan, permintaan itu dapat menghasilkan gambar skala browser.

Nilai yang Ditentukan Tema untuk Gambar Besar

Salah satu opsi adalah mendefinisikan kembali pengaturan untuk dimensi gambar besar . (Lanjutkan dengan hati-hati. Ini bagus untuk situs Anda sendiri, tetapi Tema yang didistribusikan secara publik yang mengacaukan pengaturan konfigurasi pengguna adalah ... area abu-abu yang terbaik.)

Pengaturan dimensi gambar besar disimpan sebagai:

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

Jadi, Anda bisa mengatur nilai-nilai itu sesuai dengan $content_widthnilai Anda :

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

(Tentu saja, Anda ingin menaruh beberapa failafe / pengecekan kesalahan di sekitar ini, yang sesuai.)

Hapus Opsi untuk Menyisipkan Gambar Berukuran Penuh

Jika Anda hanya ingin mencegah pengguna memasukkan gambar ukuran penuh (sekali lagi: lanjutkan dengan hati-hati; ini mungkin wilayah Plugin), Anda dapat memfilter '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' );

Sekali lagi: Anda mungkin ingin menambahkan beberapa kegagalan yang waras di sini, karena filter ini digunakan di lebih dari satu tempat.

Tetapkan ukuran gambar khusus untuk gambar dengan post-lebar penuh

Terkait dengan opsi sebelumnya, Anda dapat menentukan 'full-post-width'ukuran gambar:

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

Kemudian, tambahkan ke daftar opsi yang tersedia:

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' );

Ya saya pikir begitu. Untuk menyiasati $content_widthmasalah tema yang dikirimkan ke repo saya menggunakan filter opsi untuk memaksa ukuran yang saya pilih untuk desain.

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