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

L'optimisation des images sur un site Web est une tâche ardue. Vous pouvez choisir d'utiliser moins d'images, d'images compressées, de sprites ou de svg; la liste continue. Un endroit où de nombreux sites WordPress se sont fait trébucher est dans la définition des tailles d'image, ce qui est un aspect crucial de l'optimisation des sites lourds de contenu .

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

Dans cet article, je vais vous guider à travers ce que 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 auriez dû venir 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 ceux-ci peuvent être modifiées dans les paramètres WordPress .

Chaque fois que vous téléchargez une image via WordPress, il génère des versions de ces images 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 du support sera utilisée, par opposition à une version rétrécie de l'original.

Ceci est extrêmement bénéfique car il 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 soit plus rapide que le téléchargement d'une image 1200 × 800.

Si une image plus grande est utilisée qui 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 lourds.

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 de 440 × 380, prenez une image avec cette taille exacte sur le serveur. Il y a deux endroits principaux où vous utiliserez des images téléchargées: des images en vedette et des images en post - je vous conseille de vous concentrer d'abord sur les images en vedette.

Dans tous les articles, sauf les plus orientés visuellement, cela n'a pas vraiment d'importance si une image en post est large de 220 pixels ou 245 pixels. Quelle que soit la version que vous avez disponible serait également utilisable. Les images présentées sont généralement montrées aux tailles communes. Pour les listes d'articles, vous pouvez utiliser une miniature de 178 × 178, pour les en-têtes d'article, vous pouvez utiliser une image de 1200 × 600.

En plus de cela, vous pouvez également conserver une vignette / taille moyenne / grande taille distincte telle que définie dans les paramètres pour vous donner un accès facile à des dimensions spécifiques lors de l'ajout d'images à des publications.

Donc, tout se résume à ceci: ne serait-il pas génial si nous avions deux tailles d'images supplémentaires que nous pourrions utiliser pour les images en vedette? Ces tailles d'image seraient créées à côté du reste lorsqu'une image est téléchargée. Les bonnes nouvelles sont que WordPress vous a couvert d'une fonction assez simple.

Création de tailles d'image

En utilisant la fonction add_image_size (), vous pouvez définir toutes les tailles d'image dont votre site a besoin. 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 voir, 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, la troisième, la hauteur maximale. Le quatrième paramètre définit le recadrage en dur. Si la valeur est true, l'image sera créée à la taille exacte spécifiée .

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

Utilisation de tailles d'image

Ces tailles d'image peuvent être utilisées dans un certain nombre de fonctions qui traitent de la récupération de médias. 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 ('featured_thumbnail'); 

Le premier paramètre de cette fonction vous permet de spécifier la taille de l'image à utiliser. Comme 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érer les 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 lorsqu'une nouvelle image est téléchargée, elles ne sont donc pas appliquées aux images déjà présentes dans le système.

Ne crains rien, le plugin Regenerate Thumbnails va tout améliorer! Ce plugin peut régénérer les vignettes pour toutes vos images, en tenant compte de toutes les tailles d'image définies. Il peut également cibler une image spécifique, ce qui est utile si vous en 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 regardant la source de l'image. Si vous avez téléchargé 'example.jpeg' et que vous voyez 'example.jpeg' comme source pour votre image sélectionnée, quelque chose ne va pas. Si vous voyez "example-178 × 178.jpeg" alors tout va bien; l'image optimisée est montrée.

Images réactives

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

La solution la plus simple est d'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 utile pour les utilisateurs mobiles où la puissance de traitement et la bande passante peuvent être un problème.

Optimisation d'image supplémentaire

Comme je l'ai mentionné dans l'introduction, il existe d'innombrables façons d'optimiser les images. Des sprites à la compression d'image, 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 pour améliorer les performances de l'image, je suggère de lui donner une lecture!

Je suggère également de regarder Hassle Free Responsive Images qui vous montre comment ajouter du support pour l'élément d'image, quelque chose que vous voudrez utiliser si vous voulez écrire votre propre code.

8 sites pour faire de l'argent pour les créateurs de vidéos

Il y a des sites qui vous paieront pour les choses que vous faites tous les jours. Cependant, si vous avez un talent, comme la création vidéo, alors vous devriez savoir sur les bonnes plates-formes d'où vous pouvez gagner beaucoup d'argent en utilisant ce talent .Il est toutefois difficile de déterminer la bonne plateforme pour générer un revenu décent en échange de vos efforts de production vidéo. La plup

(Conseils techniques et de conception)

Différences entre les startups et les MNC [PIC]

Tous se demandaient ce que c'était que de travailler dans une start-up, et à quel point l'expérience serait différente de travailler dans une société multinationale régulière? Mis à part les règles et les règlements que les multinationales mangent, respirent et dorment, il y a beaucoup de différences qui séparent les audacieux des établis . Et Wittyfeed

(Conseils techniques et de conception)