Reçois gratuitement une formation complète

sur le référencement !


Reçois tout de suite un livre de 45 pages pour tout savoir sur le référencement et sur l'écriture d'article pour le référencement
Valider la politique de confidentialité

Redimensionner une image automatiquement avec WordPress

Ecrit par Benoit Thibaudeau dans Wordpress | 13 commentaires |

Redimensionner les images automatiquement avec WordPressRedimensionner une image automatiquement avec WordPress est une chose que même un enfant serait faire 😉

Si sur la page d'accueil de votre blog, vous avez placé une miniature à côté de chaque résumé d'article, comme sur C' ça le net, il est préférable de créer une miniature plutôt que d'afficher une grande image et de la compresser. Déjà le résultat est moins bon, mais surtout le fait d'afficher des images miniatures plutôt que de grandes images redimensionnées, allège les pages et diminue le temps de chargement.

Une page dont le poids est important est handicapant. Les moteurs de recherche pénalisent les sites trop lents et à l'époque ou le nombre de personnes, qui naviguent depuis des smartphones et des tablettes, augmente de façon importante, les pages avec de grandes images, même compressées pour être affiché en petit, est un handicape.

Vous allez voir qu'il suffit de quelques lignes de code pour créer automatiquement des images à la bonne dimension avec WordPress.

Pourquoi redimensionner automatiquement les image avec WordPress ?

Lorsque vous créez un nouveau type de format d'image, WordPress créé une copie de chaque image que vous importez dans les médias. Il garde l'image dans sa taille originale et créé autant de format d'image que défini dans le fichier functions.php.

Par défaut WordPress propose déjà nativement une miniature appelée "thumbnail", qui fait 150*150pixels.

Il y a des tas d'exemples pour démontrer l'utilité du redimensionnement automatiquement des images que vous importez dans les médias de WordPress.

  • Vous utilisez des miniatures pour la présentation de vos articles WordPress
  • Vous êtes photographe et/ou vous avez des galeries de photo sur votre site et si les photos ont toutes la même hauteur cela fait plus professionnel
  • Vous ne savez pas redimensionner les images, alors pourquoi ne pas laisser WordPress le faire Automatiquement ?
  • Pour vous simplifier la vie en automatisant le traitement
  • Pour avoir un site professionnel avec des présentations de pages identiques
  • Pour présenter des vignettes de vos articles sur des pages de votre catalogue en ligne
  • ...

Redimensionner automatiquement avec WordPress et les utiliser

Redimensionner les images automatiquement avec WordPress

Rien de plus simple. Cependant, une limite. Le redimensionnement sur WordPress diminue les images que vous importez dans les médias, il ne les agrandi pas. Donc si vous importez des images ou photos trop petites elles ne seront pas redimensionnées.

Supposons que vous ayez besoin de miniatures pour la présentation des articles dans votre catalogue en ligne. Ces miniatures feront 200*200pixels. Nous appellerons ces miniatures "mini-pres-article".

Il suffit d'ajouter dans les lignes suivantes dans le fichier functions.php :

if ( function_exists( 'add_image_size' ) ) 
    add_image_size( 'mini-pres-article', 200, 200, false );

On vérifie que la fonction de redimensionnement des images existe, puis on créé une nouvelle version de l'image au dimensions définies pour chaque image que l'on intègre aux médias de WordPress.  La fonction add_image_zise possède 4 paramètres :

  • $name : le nom du format de l'image que l'on utilisera pour afficher ce format d'image (obligatoire)
  • $width : La largeur maximale de l'image (option)
  • $height : La hauteur Maximale de l'image (option)
  • $crop : Par défaut "false" pour ne pas tronquer l'image, ou l'initialiser à "true" si on veut retailler l'image (option)

Si le 4ème paramètre est initialisé  à "false", WordPress redimensionne l'image avec le bord le plus large correspondant à la largeur ou hauteur initialisé par les paramètres de la fonction "add_image_size" mais garde les proportions de l'image.

Si le 4ème paramètre est initialisé à "true", l'image n'est pas redimensionné, mais recadré aux dimensions passés dans lors de l'appel de la fonction "add_image_size" et le reste de l'image est tronqué.

Utiliser les photos redimensionner automatiquement avec WordPress

Rien de plus simple. Il suffit d'ajouter les lignes suivantes à l'endroit où l'on veut récupérer l"image dans notre nouveau format (par exemple dans le fichier index.php) :

<?php 
$attachment_id = 8; // attachment ID
$image_attributes = wp_get_attachment_image_src( $attachment_id, 'mini-pres-article' ); // retourne un tableau avec le path de l'image et les dimensions de celle-ci.
?> 
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">

Voilà cela reste assez simple

Pour aller plus loin

Je vous propose de voir dans de prochains articles comment gérer les thumbnail.

Nous verrons aussi dans de prochains articles comment modifier et ajouter un avatar par défaut wordpress. Les avatars par défaut de WordPress n'étant pas terrible, comme vous pouvez le voir sur ce blog, il est possible d'en mettre d'autres, plus beaux.


L'article vous a-t-il aidé ?

Votre vote : 0 étoile(s)
Tags: ,

Portrait de Benoit Thibaudeau
Benoit Thibaudeau
1971-11-02
2020-01-12
Webmaster

Après une courte carrière en tant que cryptographe, j'ai été team leader chez un éditeur de logiciel qui créé des systèmes décisionnels pour les banques et les télécoms dans le monde entier.

Puis j'ai évolué vers architecte de système informatique, ce qui m'a amené à concevoir des systèmes parmi les plus gros d’Europe avec une visibilité sur les 10 prochaines années.

En parallèle j'étais chargé de la formation des employés de la société et de celle des clients, ce qui m'a appris beaucoup en ce qui concerne la dispense de cours.

Durant ma période en Irlande j’ai eu la chance de travailler, plusieurs mois, en étroite collaboration avec Google Irlande, ce qui m’a appris énormément sur le référencement.

Enfin, j’ai souhaité au bout de 15 ans d’arrêter de voyager tout le temps dans le monde entier, je me suis donc mis à mon compte et aujourd’hui je vis de mon activité.

Benoît Thibaudeau

Les conseils Internet : www
Pour me contacter :
Mr. Benoit Thibaudeau
27 bis rue Louis Rolland
92120 Montrouge,
Haut de Seine - FRANCE
Les stages photo : www
Cours photo sur Internet : cours
Le blog de tuto photo : Blog
Le site dream photos : www
Le blog dream photos : Blog

Commentaires (13)
  1. Vraiment sympas ton site !
    Vraiment sympas ton site ! J’attends le prochain article !
    Félicitations, un post vraiment bon !!

  2. Bonjour, votre article est intéressant , bravo pour le côté partage , j' ai un souci comment changer la dimension de mes photos quand elles sont déja en place sur mon site wordpress ? je suis mauvais la dessus et c 'est mon avenir qui se joue avec mon site.Grand merci pour votre retour éventuel.
    Salutations.
    Arnaud.

    1. Salut,
      Si vous souhaitez modifier la taille d'une image sur WordPress, allez dans votre onglet Médias, sélectionnez ensuite l'image à redimensionner et cliquez sur Modifier l'image.

      Vous modifiez la largeur de l’image (la première case) qui se trouve dans redimensionnement de l’image (la hauteur s’adaptera à la largeur selon la taille de l’image). Cliquez ensuite sur Redimensionner.

      Et voilà !!!

  3. Merci bcp pour toutes ces informations,
    ce petit conseil est tres intéressant.

  4. Je vous remercie pour ce site, c’est hyper intéressant.
    J’aime beaucoup toutes ces informations.Excellent site! Merci pour le partage et bonne continuation .

  5. Interessant, je cherche en ce moment à retrouver un plugin qui redimensionne les images à la volée, c'est à dire lors de leur premier affichage éventuel, et non systématiquement.
    Parce que quand on change de thème, ça modifie généralement la taille des images. Et on finit par se retrouver avec des dizaines de versions pour chacune...

  6. Bonjour, je trouve votre blog très intéressant .Merci pour les informations.

Laisser une réponse

Votre adresse email ne sera pas publiée.

Vous pouvez utiliser ces HTML balises et attributs: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Afficher
Cacher
error

Vous aimez ce blog? Passez le mot :)