Quelle est une bonne alternative à l'utilisation de $ content_width pour l'optimisation d'image?

Le $content_widthGLOBAL dans WordPress affecte de nombreux thèmes et même certains plugins en limitant la taille des images et des intégrations dans les publications, c'est une exigence pour les thèmes soumis à wordpress.org.

Il est défini en utilisant:

$content_width = 584; // Twenty Twelve example

Si vous insérez une grande image (par défaut 1024x1024) dans une publication, cela se traduit par:

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

Si, à la place, vous supprimez ce paramètre global et insérez la taille réelle de l'image, définissez-le avec les add_image_sizerésultats suivants:

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

La suppression des images globales et l'insertion de grandes images, ce qui est très courant , entraîne souvent une économie de plus de 2x, dans les pages avec plusieurs images, je vois des centaines de Ko enregistrés lors du chargement de la page.

L'utilisation add_image_sizeet la suppression de la possibilité d'insérer des images en taille réelle ne sont-elles pas une meilleure option?

ps. J'ai écrit à ce sujet ici avec des données plus précises

Gardez à l'esprit que le $content_widthglobal n'est pas seulement utilisé pour les images, mais aussi pour les objets intégrés, tels que la vidéo. Ainsi, toute solution ne sera pas simplement un cas d'abandon de l'utilisation / du support d' $content_widthelle - même.

Habituellement, un thème contraindra les images de la zone de contenu de plusieurs manières:

1. Grande taille d'image: définir $content_widthquelque chose de approprié pour la conception du thème
2. Taille originale / pleine image: définition d'une règle CSS pour #content img { max-width: XXX; height: auto; }garantir que les images en taille réelle qui sont insérées ne cassent pas la mise en page
3. Taille de l'image miniature : Appel set_post_thumbnail_size()pour définir la thumbnailtaille par défaut de l'image sélectionnée / publier la miniature . (Remarque: je ne recommande pas personnellement d'utiliser cette méthode. Définissez des tailles d'image personnalisées spécifiques à un emplacement donné pour une image sélectionnée, puis appelez cette taille personnalisée dans l'emplacement de modèle spécifique, via the_post_thumbnail( $size ).)

Comme vous l'avez découvert, en raison de la façon dont WordPress sélectionne avec une taille d'image intermédiaire à utiliser pour une demande d'image donnée, cette demande peut entraîner une image à l'échelle du navigateur.

Valeurs définies par thème pour une grande image

Une option serait de redéfinir les paramètres pour les grandes dimensions de l'image . (Continuez avec prudence. C'est bien pour votre propre site, mais un thème distribué publiquement qui dérange les paramètres de configuration utilisateur est ... au mieux une zone grise.)

Les paramètres de grande dimension d'image sont stockés comme:

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

Ainsi, vous pouvez définir ces valeurs en fonction de votre $content_widthvaleur:

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

(Bien sûr, vous voudriez mettre un peu de sécurité / vérification d'erreur autour de cela, le cas échéant.)

Supprimer l'option pour insérer des images en taille réelle

Si vous voulez simplement empêcher les utilisateurs d'insérer des images en taille réelle (encore une fois: procédez avec prudence; cela peut être le territoire du plugin), vous pouvez filtrer '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' );

Encore une fois: vous voudrez peut-être ajouter des échecs sains ici, car ce filtre est utilisé à plusieurs endroits.

Définir une taille d'image personnalisée pour les images pleine largeur post-largeur

Associé à l'option précédente, vous pouvez définir une 'full-post-width'taille d'image:

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

Ajoutez-le ensuite à la liste des options disponibles:

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

Oui je le pense. Pour contourner le $content_widthproblème des thèmes soumis au dépôt, j'utilise des filtres d'option pour forcer les tailles que j'ai choisies pour la conception.

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