Optimisez vos images avec des tailles d'image prédéfinies [WordPress Tip]

Optimiser les images sur un site Web est une tâche ardue. Vous pouvez choisir d'utiliser moins d'images, d'images compressées, d'images-objets ou de fichiers svg; la liste continue. Un des endroits où de nombreux sites WordPress sont déclenchés est la définition de la taille des images, qui est un aspect crucial de l'optimisation des sites à fort contenu.

La taille des images est essentielle car les images sont automatiquement créées en fonction de la taille donnée lors du téléchargement des images. Cela garantit que même si vous avez une image originale de 3000 pixels de large, elle ne sera jamais utilisée si une image de 600 pixels est suffisante. Idéalement, un espace de 600 pixels de large devrait utiliser une image de 600 pixels de large au lieu d'une image plus grande..

Dans cet article, je vais vous guider quelles sont les tailles d'image et comment les définir.

Comment WordPress gère les images

Si vous avez déjà inséré une image dans un article WordPress, vous devriez être passé par le sélecteur de taille d'image. Cela vous permet d'insérer des versions petites, moyennes et grandes des images. Les tailles réelles pour ces peut être modifié dans les paramètres de WordPress.

Chaque fois que vous téléchargez une image via WordPress, il en génère des versions et les stocke séparément. Par exemple, si vous téléchargez une image 1200 × 800, WordPress peut créer des versions 100 × 100, 600 × 400 et 900 × 600. Lorsque vous insérez une image et choisissez "moyen", la version moyenne réelle sera utilisée, par opposition à une version réduite de l'original..

C’est extrêmement bénéfique car conserve la bande passante sur le serveur et le temps de traitement sur l'ordinateur client. Je pense qu'il n'est pas surprenant que le téléchargement d'une image 600 × 400 est plus rapide que le téléchargement d'une image 1200 × 800.

Si une image plus grande est utilisée, elle doit être réduite, le navigateur doit prendre en charge les calculs pour que cela se produise. Bien que cela ne prenne pas des heures, cela peut être perceptible sur les sites Web chargés d'images..

La bonne image au bon endroit

Le but ultime devrait être de toujours utiliser des tailles d'image appropriées. Si vous avez besoin d'une image 440 × 380, récupérez une image de cette taille exacte sur le serveur. Vous utiliserez les images téléchargées à deux endroits principaux: les images en vedette et les images in-post. Je vous conseillerais de vous concentrer d'abord sur les images en vedette..

Dans tous les articles, à l'exception des articles les plus visuellement dirigés, peu importe si une image intégrée dépasse 220 pixels ou 245 pixels de large. Quelle que soit la version disponible, elle serait également utilisable. Les images présentées sont toutefois généralement présentées en taille commune. Pour les listes d'articles, vous pouvez utiliser une vignette de 178 × 178, pour les en-têtes d'article, une image de 1200 × 600.

En plus de cela, vous voudrez peut-être également conserver une taille séparée miniature / moyenne / grande, comme défini dans les paramètres. vous donne un accès facile à des dimensions spécifiques lors de l'ajout d'images à des publications.

En résumé, voici ce qu’il en est: ne serait-il pas formidable de disposer de deux tailles d’images supplémentaires que nous pourrions utiliser pour les images en vedette? Ces tailles d'image seraient créées juste à côté du reste lorsqu'une image est téléchargée. Les bonnes nouvelles sont que WordPress vous a couvert avec une fonction assez simple.

Création de tailles d'image

En utilisant le fonction add_image_size () vous pouvez définir toutes les tailles d'image nécessaires à votre site Web. Créons les deux exemples mentionnés ci-dessus. Placez le code ci-dessous dans le fichier functions.php de votre thème ou dans le fichier d'un plugin..

 add_image_size ('Featured_thumbnail', 178, 178, true); add_image_size ('Featured_wide', 1200, 600); 

Comme vous pouvez le constater, cette fonction prend quatre paramètres. Le premier paramètre vous permet de définir un nom pour la taille. Le deuxième paramètre est la largeur maximale, le troisième, la hauteur maximale. Le quatrième paramètre définit un rognage difficile. Si défini sur true, l'image sera créée à la taille exacte que vous spécifiez.

Une fois que cela a été ajouté à votre thème ou plug-in, deux nouvelles versions de chaque fichier que vous téléchargez seront créées par WordPress..

Utilisation des tailles d'image

Ces tailles d'image peuvent être utilisées dans un certain nombre de fonctions traitant de la récupération de supports. Regardons d'abord les images en vedette. the_post_thumbnail () est couramment utilisé pour afficher l'image sélectionnée d'un message. Le code suivant peut être placé dans une boucle WordPress:

 the_post_thumbnail ('sélectionnée_thumbnail'); 

Le premier paramètre de cette fonction vous permet de spécifier la taille de l'image à utiliser. Depuis que j'ai spécifié "Featured_thumbnail", la version 178 × 178 de ce fichier sera utilisée..

Il existe un certain nombre d'autres fonctions telles que wp_get_attachment_image ()et wp_get_attachment_image_src () qui utilisent également le paramètre de taille d'image. Chaque fois que vous utilisez une telle fonction, vous devez toujours spécifier une taille d'image appropriée..

Régénération des vignettes

Si vous avez déjà un site en place, vous ne pourrez pas optimiser vos articles rétrospectivement en définissant simplement une taille d'image. Les tailles d'image ne sont prises en compte que lors du téléchargement d'une nouvelle image; elles ne sont donc pas appliquées aux images déjà présentes dans le système..

Ne craignez rien, le plugin Regenerate Thumbnails rendra les choses meilleures! Ce plugin peut régénérer les vignettes de toutes vos images, en prenant en compte toutes les tailles d'image définies. Ça peut aussi cibler une image spécifique, ce qui est utile si vous avez juste quelques-uns, ou si vous faites des tests.

Une fois vos vignettes régénérées, vous devriez voir les versions optimisées chargées sur votre site. Vous pouvez vérifier cela en affichant la source de l'image. Si vous avez chargé "exemple.jpeg" et que vous voyez "exemple.jpeg" comme source de votre image sélectionnée, quelque chose ne va pas. Si tu vois “exemple-178 × 178.jpeg” alors tout va bien; l'image optimisée est affichée.

Images réactives

Une difficulté à maintenir un site optimisé est la réactivité. Lorsque je visualise un article sur l'iPad, une image en post de grande taille est réduite, car la largeur maximale est d'environ 786 pixels..

La solution la plus simple consiste à utiliser un plugin comme Hammy. Hammy fonctionne en fonction de la largeur du contenu de votre thème (par opposition à la largeur de la fenêtre du navigateur) et peut servir des images optimisées en fonction de cela. Ceci est particulièrement pratique pour les utilisateurs mobiles où la puissance de traitement et la bande passante peuvent poser problème.

Optimisation supplémentaire de l'image

Comme je l'ai mentionné dans l'introduction, il existe d'innombrables façons d'optimiser les images. Des images-objets à la compression d'images, de nombreuses techniques peuvent être utilisées pour réduire les temps de chargement qui vont de pair avec les images. Ashutosh KS a écrit un excellent article présentant 9 plugins WordPress destinés à améliorer les performances de l'image, je suggère de lui donner une lecture!

Je suggère également de jeter un coup d'oeil à Hassle Free Responsive Images qui vous montre comment ajouter un support pour l'élément d'image, ce que vous voudrez utiliser si vous voulez écrire votre propre code..