Qual è una buona alternativa all'utilizzo di $ content_width per l'ottimizzazione delle immagini?

Il $content_widthGLOBAL in WordPress applica molti temi e persino alcuni plugin limitando la dimensione delle immagini e incorporandoli nei post, è un requisito per i temi inviati a wordpress.org.

Si imposta usando:

$content_width = 584; // Twenty Twelve example

Se inserisci un'immagine grande (predefinito 1024x1024) in un post, si ottiene:

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

Se invece rimuovi questa impostazione globale e inserisci la dimensione effettiva dell'immagine, imposta con add_image_size essa comporta:

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

Rimuovere il globale e inserire immagini di grandi dimensioni, il che è molto comune , spesso si traduce in un risparmio di oltre 2x, in pagine con più immagini che vedo centinaia di KB salvati sul caricamento della pagina.

Utilizzare add_image_sizee rimuovere la possibilità di inserire immagini a dimensione intera non è un'opzione migliore?

ps. Ne ho scritto qui con dati più precisi

Tieni presente che il $content_widthglobale non viene utilizzato solo per le immagini, ma anche per gli oggetti incorporati, come i video. Quindi, qualsiasi soluzione non sarà semplicemente un caso di abbandono dell'uso / supporto di $content_widthse stesso.

Di solito un tema vincolerà le immagini dell'area di contenuto in alcuni modi:

1. Grande Dimensione immagine: Definizione$content_width qualcosa di appropriato per la progettazione Tema
2. Dimensione originale / immagine intera : definizione di una regola CSS per #content img { max-width: XXX; height: auto; }garantire che le immagini a dimensione intera che vengono inserite non rompano il layout
3. Dimensione dell'immagine in miniatura : chiamata set_post_thumbnail_size()per definire la thumbnaildimensione predefinita dell'anteprima dell'immagine / post in primo piano . (Nota: non raccomando personalmente l'uso di questo metodo. Definisci dimensioni personalizzate dell'immagine specifiche per una determinata posizione per un'immagine in evidenza, quindi chiama quella dimensione personalizzata nella specifica posizione del modello, tramite the_post_thumbnail( $size ).)

Come hai scoperto, a causa del modo in cui WordPress seleziona con dimensioni dell'immagine intermedie da utilizzare per una determinata richiesta di immagine, tale richiesta potrebbe risultare in un'immagine ridimensionata del browser.

Valori definiti dal tema per immagini di grandi dimensioni

Un'opzione sarebbe quella di ridefinire le impostazioni per grandi dimensioni dell'immagine . (Procedi con cautela. Questo va bene per il tuo sito, ma un tema distribuito pubblicamente che pasticcia con le impostazioni di configurazione dell'utente è ... al massimo un'area grigia.)

Le impostazioni di dimensioni dell'immagine grandi sono memorizzate come:

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

Quindi, è possibile impostare tali valori in base al proprio $content_widthvalore:

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

(Naturalmente, dovresti mettere un po 'di sicurezza / controllo degli errori intorno a questo, come appropriato.)

Rimuovi opzione per inserire immagini a dimensione intera

Se desideri semplicemente impedire agli utenti di inserire immagini a dimensione intera (di nuovo: procedi con cautela; potrebbe trattarsi del territorio del plug-in), puoi filtrare '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' );

Ancora una volta: potresti voler aggiungere alcuni failaf sani qui, poiché questo filtro viene utilizzato in più di un posto.

Definire una dimensione dell'immagine personalizzata per le immagini a larghezza intera post

In relazione all'opzione precedente, è possibile definire una 'full-post-width'dimensione dell'immagine:

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

Quindi, aggiungilo all'elenco delle opzioni disponibili:

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

Penso di sì. Per aggirare il $content_widthproblema relativo ai temi inviati al repository, utilizzo i filtri delle opzioni per forzare le dimensioni che ho scelto per il design.

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