web-dev-qa-db-fra.com

WP Images réactives - télécharger des tailles d'image personnalisées

J'essaie de trouver une solution à mon problème depuis deux semaines sans aucune chance. J'ai constaté que mon thème et WP ne parvenaient pas à créer les images réactives appropriées. Cela vaut en particulier pour les fichiers PNG, qui au lieu de devenir plus petits, deviennent de plus en plus gros.

Par exemple, si je télécharge un fichier PNG de 12 Ko, WP et mon thème ont créé des fichiers dont la taille était de 3 à 4 fois supérieure, même si la résolution était plus petite que le fichier d'origine.

Maintenant, j'ai réussi à désactiver ce système d'image adaptative dans mon thème et j'ai trouvé un moyen de désactiver WP la création de fichiers à l'aide de code personnalisé. Cependant, ce que j'aimerais réaliser, c'est télécharger mes propres images de taille personnalisée au lieu de compter sur WP ou sur un autre élément de code pour générer des images plus petites ou plus grandes.

Est-ce que quelqu'un connaît une solution comment remplacer WP et lui faire livrer des images de taille personnalisée téléchargées manuellement avec srcset ... J'aimerais y parvenir tout d'abord parce que je peux créer des images optimisées de différentes tailles (par rapport algorithmes utilisés par WP) et deuxièmement, je veux que mes images soient hébergées sur CDN.

Merci d'avance.

imagesresponsiveoptimization
1
KBT

La raison pour laquelle la taille générée a une taille supérieure à celle de l'image d'origine est la façon dont la compression fonctionne.

Si, par exemple, vous importez une image de qualité médiocre de 50 Ko, mais que la qualité JPG de votre WordPress est définie sur 100, les vignettes auront une taille supérieure à celle de l'image d'origine, car WordPress ne les compresse pas. Cela peut être changé en utilisant le filtre jpeg_quality:

add_filter('jpeg_quality', function($arg){ return 90; });

Vous pouvez diminuer la valeur (ce qui réduit également la qualité) pour économiser plus d'espace. Je ne suis au courant d'aucun crochet pour les fichiers PNG, mais il existe des plugins qui peuvent compresser manuellement ces fichiers pour vous, tels que Compresser les images PNG & JPG ou Compressez PNG pour WP .

Vous pouvez générer manuellement vos propres images réactives, si vous connaissez le fonctionnement de srcset. Regardez cet exemple:

<img 
    src="<?php get_the_post_thumbnail_url( $post_id,'thumbnail' ); ?>"
    srcset="
        <?php the_post_thumbnail_url( 'medium' ); ?> 700w, 
        <?php the_post_thumbnail_url( 'large' );?> 1600w" 
    sizes="
        (max-width:700px) 700px,
        (min-width:701px) 1600px" 
    alt="<?php the_title(); ?>"
/>

De cette façon, vous pouvez contrôler pleinement vos images et leur comportement en fonction de votre thème.

En outre, en ce qui concerne la réactivité, vous voudrez peut-être vous assurer que vous avez défini une largeur pour votre contenu afin que WordPress puisse définir les points d'arrêt. Cela se fait par une valeur globale appelée $content_width:

if(!isset($content_width)) {
    $content_width = 700;
}

Ce qui peut être défini via le fichier functions.php de votre thème.

1
Jack Johansson