web-dev-qa-db-fra.com

Quelle est la bonne alternative à l’utilisation de $ content_width pour l’optimisation des images?

Le $content_width GLOBAL dans WordPress affecte de nombreux thèmes et même des plugins en limitant la taille des images et s’intègre 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 (1024x1024 par défaut) dans une publication, vous obtenez:

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

Si, au lieu de cela, vous supprimez ce paramètre global et insérez la taille réelle de l'image, définissez-le avec add_image_size.

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

La suppression de la globale et l'insertion d'images volumineuses, ce qui est très courant, entraînent souvent une économie de plus de 2 fois, dans des pages contenant plusieurs images, je vois des centaines de Ko enregistrées lors du chargement de la page.

Utiliser add_image_size et supprimer la possibilité d'insérer des images en taille réelle ne constitue-t-il pas une meilleure option?

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

imagesoptimizationglobals
14
Wyck

Gardez à l'esprit que $content_width global est utilisé non seulement pour les images, mais également pour les objets incorporés, tels que la vidéo. Ainsi, toute solution ne consistera pas simplement à abandonner l'utilisation/le support de $content_width lui-même.

Généralement, un thème contraint les images de la zone de contenu de plusieurs manières:

  1. Large Taille de l'image: Définir $content_width comme approprié pour la conception du thème
  2. Original/Full Taille de l'image: définition d'une règle CSS pour #content img { max-width: XXX; height: auto; } afin de garantir que les images en taille réelle insérées ne rompent pas la présentation
  3. Thumbnail Taille de l’image: Appelez set_post_thumbnail_size() pour définir la taille par défaut de l’image/publication de la vignette thumbnail. (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 du modèle spécifique, via the_post_thumbnail( $size ).)

Comme vous l'avez découvert, en raison de la manière dont WordPress sélectionne une taille d'image intermédiaire à utiliser pour une demande d'image donnée, cette demande peut générer une image à l'échelle du navigateur.

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

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

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

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

Donc, vous pourriez définir ces valeurs en fonction de votre valeur $content_width:

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, comme approprié.)

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

Si vous souhaitez simplement empêcher les utilisateurs d'insérer des images en taille réelle (encore une fois, procédez avec précaution; il peut s'agir du territoire du plug-in), 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 quelques valeurs sûres ici, car ce filtre est utilisé à plusieurs endroits.

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

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

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

Ensuite, ajoutez-le à 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' );
7
Chip Bennett

Oui je le pense Pour résoudre le problème $content_width relatif aux thèmes soumis au référentiel, 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...
2
sanchothefat