Comment améliorer et optimiser les images pour WordPress

Cela faisait longtemps que les images n'avaient pas été trop grosses pour être chargées sur Internet. Aujourd'hui, les sites Web ne peuvent pas exister sans eux. Même si les vitesses Internet ont considérablement augmenté au fil des ans, il est essentiel que vous preniez soin des photos sur votre blog.

Ce n'est pas parce qu'il est facile de télécharger des images sur votre site que vous devez le faire sans aucune préparation. Les images non optimisées peuvent, en fait, nuire à votre site de plusieurs manières ; d'affecter la façon dont les visiteurs pensent de vous à la vitesse de votre site Web et aux classements SEO. Si vous n'y avez toujours pas pensé, nous sommes là pour vous montrer plusieurs façons d'améliorer les images dans WordPress.

Comment optimiser les images pour WordPress afin d'accélérer votre site et d'améliorer le référencement

Pourquoi optimiser les images pour WordPress ? Si vous faites un effort, vous pouvez vous attendre à ce qui suit :

• Site plus rapide
• Meilleur référencement
• Des sauvegardes plus petites
• Moins d'utilisation de la bande passante
• Des utilisateurs plus heureux

Vous devez également savoir qu'il existe différentes étapes auxquelles vous pouvez optimiser les images. Vous pouvez vous occuper des photos avant même de les télécharger sur un blog ou vous pouvez le faire après le téléchargement.

Testez rapidement des images sur votre site

Avant de commencer à travailler sur l'optimisation, vous pouvez rapidement vérifier la vitesse et les performances de votre site. En utilisant l'un des outils de la liste, vous saurez rapidement sous quelle forme se trouvent les images de votre site.

Nous aimons utiliser GTmetrix qui vous montrera même les images exactes qui ralentissent le chargement de votre site.

Optimiser les images pour WordPress avant le téléchargement

Lorsqu'ils bloguent, la plupart des gens ne prennent pas toutes les mesures nécessaires pour optimiser leurs images. Habituellement, les gens prennent simplement une photo depuis leur appareil photo ou leur smartphone, en téléchargent une sur Internet ou en créent une à l'aide d'un logiciel informatique.

Ils ne pensent pas aux formats, aux dimensions des images ni aux noms de fichiers. Si l'image est bonne, ils supposent simplement qu'elle est prête pour Internet. Si vous ne vérifiez pas vos images, vous vous dirigez vers un désastre.

Redimensionner les images

Ne téléchargez pas d'images sur votre site WordPress avant de vérifier la largeur et la hauteur de chaque image. Si vous affichez des images à un maximum de 700px, par exemple, il n'est vraiment pas nécessaire de télécharger une image plus large. Si vous le faites, vous aurez un fichier plus volumineux qui ralentira votre site, tandis que la sortie sera la même. WordPress va créer une taille supplémentaire, mais ce n'est pas l'excuse pour ne pas préparer les images avant le téléchargement.

Le redimensionnement des images est simple et rapide. Il existe de nombreux outils gratuits comme Microsoft Paint qui vous aideront avec cela. Vous pouvez même trouver des outils en ligne gratuits pour redimensionner des images comme Easy Resize.

Les dimensions de l'image varient d'un thème à l'autre. Si vous ne savez pas lequel utiliser, examinez de plus près votre thème WordPress et inspectez les images, recherchez de la documentation ou demandez de l'aide à l'assistance.

Changer la qualité

Après avoir changé les dimensions, vous devriez envisager de changer la qualité des images. Selon les logiciels, il existe différentes manières de modifier la qualité des images. Par exemple, Photoshop toujours populaire vous permet d'enregistrer des images pour le Web. Cette option vous permettra d'enregistrer des images de moindre qualité, mais elles seront optimisées pour votre site.

De plus, si vous choisissez d'enregistrer une image au format JPEG, Photoshop vous demandera de choisir le niveau de qualité. Dans ce cas, réduire la qualité de 12 à seulement 8 réduira considérablement la taille d'une image, tandis que la différence de qualité ne sera pas si grande.

Si vous n'utilisez toujours aucun logiciel pour modifier la qualité de vos images, vous pouvez essayer l'outil gratuit en ligne Tiny PNG. Téléchargez simplement une photo et voyez quelle différence cela peut faire.

Choisissez le bon format

Même après les changements de taille et de qualité, vous devriez envisager de changer le format. Pour commencer, en sélectionnant simplement le bon format, vous pouvez retirer quelques kilo-octets d'une image, voire plus.

La règle générale est très simple. Si vous avez une photo, faites-la en JPEG. Si vous avez un logo, une image vectorielle ou un graphique très simple généré par ordinateur, optez pour PNG. Si vous avez une très petite image sans dégradés ou si vous souhaitez afficher une animation simple comme celle illustrée ci-dessus, vous pouvez utiliser GIF. En règle générale, les images PNG seront beaucoup plus grandes que les images JPEG et vous pouvez bénéficier d'un changement de format.

Dans de nombreux cas, le reformatage des images ne fera pas de différences de qualité significatives, alors que vous pouvez vous attendre à une différence de taille. La prochaine fois avant de télécharger une photo PNG, essayez-la et essayez de l'enregistrer au format JPEG pour voir la différence. Pour une explication plus détaillée, veuillez vérifier la différence entre PNG, JPEG, GIF et SVG.

Prendre soin des noms de fichiers

Bien que le nom de fichier puisse sembler sans importance, c'est en fait quelque chose dont vous devez être très conscient. Le nom de votre fichier image contient une information précieuse pour le référencement. Si vous voulez que les autres puissent trouver votre image sur Google et d'autres moteurs de recherche, vous devez lui donner un nom propre.

Nous vous suggérons de nommer les images sans utiliser d'espaces. N'oubliez pas d'inclure des mots-clés si vous voulez que la page et l'image soient classées. Par exemple, si vous téléchargez une photo de Ferrari California, le nom du fichier doit être « ferrari-california.jpg ». Si vous utilisez un plugin SEO pour WordPress, vous savez déjà qu'il vérifie vos balises alt pour les mots-clés. Oui, il est vraiment important d'avoir un nom d'image approprié.

Optimiser les images pour WordPress après le téléchargement

Après avoir préparé les images sur votre ordinateur, vous pouvez procéder au téléchargement. Espérons que vos images soient de la bonne taille et de la bonne qualité. Vous vous êtes assuré que le format et le nom de fichier sont corrects. Après le téléchargement, WordPress vous demandera des informations supplémentaires. Ne sautez pas les méta-informations ; remplissez les détails de vos images afin de pouvoir les organiser facilement et préparer le référencement.

Titre, description, texte alternatif et légende

Tout en vous occupant des aspects techniques, vous ne devez pas oublier le référencement. Ajoutez toujours le titre et la description à votre média. Cela vous aidera dans la gestion des médias WordPress et contribuera également à un meilleur référencement. N'oubliez pas non plus la balise alt qui sera affichée pour les visiteurs qui ne peuvent pas voir correctement votre image. Non seulement cela sera utile pour vos utilisateurs, mais cela vous aidera également avec le référencement. Votre page sera mieux classée et les utilisateurs pourront trouver vos nouvelles images plus facilement.

Bien que vous n'ayez pas besoin de sous-titres tout le temps, assurez-vous d'en ajouter pour les images qui nécessitent des explications supplémentaires (par exemple, des captures d'écran).

Modifier des images avec WordPress

Si vous vous rendez compte qu'une image a encore besoin d'être modifiée, sachez que WordPress vous permet de le faire même après avoir téléchargé le fichier. Modifiez la rotation, le recadrage et l'échelle des images que vous avez déjà téléchargées. Vous pouvez même éditer juste une vignette ou toutes les autres tailles. L'éditeur natif de WordPress est très simple, mais il peut vous permettre d'économiser de temps en temps.

Régénérer toutes les vignettes

La plupart des techniques précédentes vous aideront avec les nouveaux fichiers image que vous êtes encore sur le point de télécharger. Mais que se passe-t-il si vous avez déjà des centaines, voire des milliers de fichiers téléchargés sur votre site WordPress ? Ne t'inquiète pas; vous pouvez toujours optimiser ces images et modifier leur taille.

Pour une solution rapide, vous pourriez être intéressé par un plugin gratuit Regenerate Thumbnails qui a été utilisé par plus d'un million d'utilisateurs. Si vous voulez plus de contrôle sur les images, vous devriez consulter certains des meilleurs plugins WordPress pour l'optimisation des images que nous allons vous montrer dans les lignes suivantes de cet article.

Utiliser les plugins WordPress

Bien sûr, il existe des dizaines de plugins WordPress qui peuvent vous aider à optimiser les images sur votre site. Faites défiler vers le bas pour voir les meilleurs plugins WordPress pour optimiser les images.

Lazy Load images si nécessaire

Parfois, la qualité des images sera beaucoup plus importante que leur taille. C'est surtout vrai pour les photographes qui veulent que leurs photos soient de premier ordre. Ils ne peuvent pas risquer de réduire la taille ni la qualité des fichiers. Néanmoins, cela ne signifie pas que vous devez oublier l'optimisation. Pour optimiser les images pour WordPress dans ce cas, vous devriez envisager le lazy loading.

Lazy load est une technique qui charge les images uniquement lorsque les utilisateurs en ont besoin (faites défiler jusqu'à elles). Par exemple, si vous téléchargez vingt photographies de haute qualité dans un seul article, elles ralentiront considérablement votre site. Mais si vous chargez les images paresseux, l'article sera rapide comme l'éclair et les photos ne se chargeront que lorsque cela est nécessaire - au moment où un utilisateur y accède.

Avoir des images responsives

Bien que la majorité des thèmes WordPress soient réactifs, cela ne signifie pas nécessairement que vos images le sont également. Étant donné que vous ne voulez pas qu'une grande image se charge sur un petit écran, vous devrez enregistrer des tailles d'image supplémentaires pour votre site. Si votre thème n'utilise pas d'images réactives, envisagez d'embaucher un professionnel pour le travail - ce n'est pas aussi facile qu'il y paraît.

Optimiser les images pour les réseaux sociaux

Si vous voulez vous assurer que vos images s'affichent bien sur les réseaux sociaux, vous devrez franchir une étape supplémentaire et optimiser les balises méta et le balisage de schéma.

Si vous utilisez un plugin SEO comme Yoast, n'oubliez pas de vérifier les paramètres. Par exemple, Yoast vous permettra de configurer quelques éléments liés aux médias sociaux. Alors, accédez à SEO -> Social et entrez les informations sur Facebook, Twitter, Google+ et Pinterest.

Si vous en voulez plus et que vous souhaitez optimiser les images pour d'autres sites Web de médias sociaux, consultez le plugin WPSSO - Balises méta précises + balisage de schéma pour l'optimisation du partage social et le référencement.

Changer la façon dont WordPress compresse les images JPEG

Si vous téléchargez un tas d'images JPEG sur votre site WordPress, vous avez peut-être remarqué qu'elles perdent leur qualité d'origine. Si vous vous demandez si WordPress est à blâmer, vous aurez maintenant votre réponse – oui, c'est le cas !

Une fois que vous téléchargez une image au format JPEG, WordPress modifie automatiquement la compression et décide que vous souhaitez que l'image perde en qualité. Pour être plus précis, WP utilise 90% de compression sur vos JPGE. C'est bien si vos images ne sont là que pour être utilisées comme vignettes de publication ou pour être affichées dans une publication, mais si vous téléchargez vos photos, vous voulez qu'elles soient aussi belles que possible, n'est-ce pas ?

Heureusement, vous n'aurez besoin que d'une seule ligne de code pour changer cela.

Arrêtez la compression des images JPEG :

Si vous ne voulez pas que vos images JPEG soient compressées, copiez et collez simplement le code suivant dans votre fichier functions.php :

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

N'oubliez pas d'enregistrer les modifications et vous êtes prêt à télécharger de nouvelles images.

D'un autre côté, les images peuvent ne pas être un gros problème pour vous. Vous voudrez donc peut-être qu'ils soient encore plus compressés et vous faire gagner du temps lors du chargement de votre site. Si vous modifiez le dernier numéro de cette ligne de code, vous modifierez la qualité des images nouvellement téléchargées.

Compressez encore plus les images JPEG :

Plus le nombre est bas, plus les images seront compressées. Par exemple, pour compresser encore plus ces JPEG, vous aurez besoin de ce code :

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

N'oubliez pas ; le niveau de compression par défaut est 90.

Les plugins d'optimisation d'image les plus populaires pour WordPress

Au début de cet article, nous avons expliqué comment optimiser les images pour WordPress afin d'accélérer votre site et d'améliorer le référencement. Comme vous avez pu le voir, il existe différentes méthodes que vous pouvez utiliser. Il est important de prendre soin des images avant même de les télécharger sur votre blog. Mais lorsque les images sont déjà sur le site, il peut devenir impossible de réoptimiser chaque image séparément, puis de les télécharger à nouveau.

Ne t'inquiète pas; personne ne s'attend à ce que vous le fassiez en premier lieu. Restez avec nous dans les minutes qui suivent car nous sommes sur le point de vous montrer les plugins d'optimisation d'image les plus populaires pour WordPress.

Pour optimiser les images, il vous suffira de sélectionner le plugin dans la liste. Vous devrez le configurer et choisir les choses que le plugin fera pour vous. Après cela, vous pourrez vous détendre et déléguer le travail au plugin de votre choix, pendant que vous pourrez commencer à organiser vos fichiers multimédias.

Les plugins suivants vous aideront à compresser les images sur n'importe quel site WordPress que vous possédez. Ils accéléreront le chargement du site et vous aideront finalement à améliorer le référencement.

Plugin WP Smush

PRIX : Gratuit

Avec plus de 700 000 installations actives, WP Smush doit être l'un des meilleurs plugins d'optimisation d'image pour WordPress. Il peut optimiser rapidement les images en utilisant différentes techniques de compression. L'avantage de la compression d'images avec WP Smush est que les images ne perdront pas en qualité. Ne nous croyez pas ? Testez le plugin.

Lorsque nous avons parlé de la préparation d'images pour WordPress, nous avons mentionné que le redimensionnement est une partie cruciale du processus d'optimisation. Avec ce plugin, vous n'aurez pas à vous en soucier puisque WP Smush vous permet de définir des dimensions maximales. Après cela, toutes les images plus grandes seront automatiquement réduites avant de les ajouter à la bibliothèque.

Ce plugin fantastique peut fonctionner avec les fichiers JPEG, GIF et PNG. Il fonctionne avec tous vos répertoires, prend automatiquement en charge les pièces jointes et fonctionne même en multisite. Vous pouvez opérer manuellement sur chaque image ou en éditer cinquante en bloc. Si vous voulez des résultats encore meilleurs et plus d'options, consultez WP Smush PRO.

Plugin d'optimisation d'image EWWW

PRIX : Gratuit

Derrière ce drôle de nom, il y a l'un des plugins d'optimisation d'image les plus populaires pour WordPress. Tout comme celui mentionné précédemment, EWWW Image Optimizer peut compresser vos images sans affecter leur qualité. Quand vous pensez que le plugin peut accélérer votre site en quelques secondes, vous serez déjà sur le point de le télécharger. Une fois cela fait, vous pourrez optimiser les images en masse, et des galeries comme GRAND FlaGallery, NextCellent et NextGEN obtiendront même leurs propres pages d'optimisation en masse.

Toutes les images qui utilisent la classe WP_Image_Editor dans WordPress seront automatiquement optimisées , tandis que vous pouvez manuellement faire la magie sur toutes les autres. Nous aimons que vous puissiez sélectionner les dossiers que vous souhaitez optimiser. Pour plus de détails à ce sujet et sur les plugins qui utilisent la classe, veuillez ouvrir la page officielle EWWW Image Optimizer sur le référentiel WordPress.

Compresser le plugin d'images JPEG et PNG

PRIX : Gratuit

Si le joli petit panda tenant le logo WordPress ne vous donne pas envie d'en savoir plus sur ce plugin, on ne sait pas ce qui le fera. Et si le panda vous semble familier, c'est parce que c'est le même qui vous aide à compresser les images sur le site TinyPNG. Oui, il semble que l'animal soit plus polyvalent que nous ne le pensions à l'origine. Mais concentrons-nous sur le plugin.

Si vous optez pour ce plugin, le Panda optimisera automatiquement vos images. Chaque fois que vous en téléchargez un nouveau, le plugin prendra le relais et fera son travail. Néanmoins, vous pouvez optimiser des images individuelles ou le faire en vrac simplement en vous rendant dans la médiathèque.

Compresser les images JPEG & PNG prend même en charge les PNG animés, fonctionne parfaitement sur un multisite, il est compatible WooComerce et n'aura pas de problèmes avec WP Offload S3.

L'avantage du plugin est qu'il vous permet de définir des attributs de largeur et de hauteur maximum pour toutes les images. Si vous vous inquiétez de ce que cela va faire des métadonnées, ne vous inquiétez pas ; le panda gardera toutes les informations intactes.

Il n'y a pas de limite de taille de fichier, vous pouvez définir un widget de tableau de bord et cela fonctionne même avec l'application mobile WordPress. Parce que tout cela, Compress JPEG & PNG images a plus de 100 000 installations actives et mérite une place sur la liste des meilleurs plugins d'optimisation d'image pour WordPress.

Plugin d'imsanité

PRIX : Gratuit

Bien que l'image de couverture de ce plugin puisse vous effrayer, prenez une seconde et regardez toutes les fonctionnalités d'Imsanity. Oh, même le nom du plugin semble fou, non ? Une fois que vous êtes d'accord avec le nom du plugin, vous verrez qu'il a beaucoup à offrir.

Imsanity peut redimensionner automatiquement les images, vous permet de définir des dimensions maximales et propose même une option de redimensionnement en bloc. Ceci est important si vous avez déjà des centaines d'images sur votre blog qui ont besoin d'être optimisées.

Ce plugin gratuit est une excellente option si vous ne voulez pas trop vous battre avec les paramètres du plugin. Il suffit d'installer et d'activer Imsanity, de définir quelques options et vous pouvez l'oublier. il gérera sa propre voie vers l'optimisation de l'image.

Nous avons adoré l'option qui vous permet de convertir des images BMP en JPG. Juste au cas où vous auriez beaucoup de fichiers BMP que vous avez téléchargés par erreur il y a quelque temps, cela vous sauvera la vie.

Plugin d'optimisation d'image ShortPixel

PRIX : Gratuit

Avec plus de 30 000 installations actives, ShortPixel Image est toujours l'un des plugins d'optimisation d'image les plus populaires pour WordPress. Le plugin regorge de fonctionnalités, et ce sera un incontournable pour les sites qui ont beaucoup d'images à optimiser.

ShortPixel Image Optimizer optimisera non seulement les documents JPG, PNG, GIF et PDF pour vous, mais il vous permettra également de convertir n'importe quelle image JPEG, PNG ou GIF en WebP . Le plugin fonctionne bien avec d'autres plugins de galerie, et peu importe si votre site utilise HTTP ou HTTPS. Il vous permettra de supprimer les données EXIF ​​des images (quelque chose que les photographes adoreront avoir).

Le plugin reconnaît les images qu'il a déjà optimisées, il les ignorera donc si nécessaire. Vous pouvez autoriser ou interdire l'optimisation automatique et faire beaucoup plus avec ce plugin fantastique. Consultez la page officielle sur le référentiel pour voir toutes les fonctionnalités.

Optimus – Optimiseur d'image WordPress

PRIX : Gratuit

Tout comme le plugin mentionné précédemment, Optimus optimisera vos images pour WordPress, et il le fera sans affecter la qualité de vos images. Vous pouvez laisser le plugin régler les choses automatiquement, ou vous pouvez désactiver l'option et n'optimiser les images qu'en cas de besoin.

Optimus fonctionne sur plusieurs sites, il n'est pas étranger aux sites de commerce électronique WordPress et il est entièrement optimisé pour les applications mobiles WordPress et Windows Live Writer. Cela accélérera votre site sans que vous ayez à toucher une ligne de code. Le plugin offre beaucoup plus, mais vous devrez opter pour la version premium. Pour en voir plus, rendez-vous sur la page officielle du référentiel de plugins WordPress.

Ajoutez un chargement paresseux pour vos vidéos et images dans WordPress

Une fois que vous commencez à ajouter beaucoup de matériel vidéo et image sur votre site Web, il est évident qu'il commencera à se charger plus lentement. Peu importe d'où elles viennent, les vidéos et les grandes images pèseront lourd sur votre site et feront attendre vos visiteurs beaucoup plus longtemps que nécessaire pour charger tout le contenu. Avec WordPress, cela ne devrait pas être un gros problème et voici comment vous pouvez facilement remédier à la situation.

Si vous connaissez bien PHP, il existe un excellent article sur l'ajout de lazy loading pour les images et le défilement infini écrit par nos collègues sur Elegant Themes.

Sinon, dans les prochaines lignes, nous mentionnerons certains des plugins de chargement paresseux les plus populaires qui accéléreront le chargement de votre site . Et vous n'aurez même pas à faire grand-chose d'autre que d'installer un plugin et de le configurer en quelques étapes rapides.

Chargement paresseux pour les vidéos

PRIX : Gratuit

Si vous avez beaucoup de vidéos Youtube et Vimeo, vous devriez envisager d'installer ce plugin. Une fois que vous l'avez configuré, le plugin placera une image sur votre vidéo et à cause de cela, votre site Web se chargera beaucoup plus rapidement. Une fois qu'un visiteur fait défiler une vidéo, cette image sera affichée avec un bouton "play" dessus. Après un clic, la vidéo commencera à se charger et à jouer. Une simple démo peut être consultée sur le site du développeur.

WP YouTube Lyte

PRIX : Gratuit

Ce plugin fera son travail de manière rapide et facile. Après l'avoir installé, ajoutez simplement un lien vers votre vidéo Youtube ou utilisez un shortcode pour en ajouter un. Vous pouvez choisir entre ajouter une vidéo normale, une liste de lecture ou uniquement l'audio de la vidéo sélectionnée. Après cela, vos vidéos Youtube recevront une image qui permettra le chargement paresseux. Cliquez simplement sur l'image pour lancer votre vidéo ou votre audio.
Voir une démo sur le site du développeur.

a3 Charge paresseuse

PRIX : Gratuit

Celui-ci est dédié à votre site mobile. Si vous avez beaucoup d'images et/ou de vidéos que vous souhaitez montrer à vos visiteurs sur des appareils mobiles, vous devriez jeter un œil à a3 Lazy Load. Il vous permettra d'ajouter un chargement paresseux à vos images et vidéos et le plugin vous permettra même de choisir des effets de transition qui apparaîtront aux utilisateurs pendant qu'ils font défiler le contenu en cours de chargement.

Dans la zone d'administration, vous pouvez facilement activer et désactiver le contenu que vous souhaitez charger paresseux. Pour ceux qui sont activés, le contenu ne sera chargé qu'au moment où un visiteur fait défiler jusqu'à cette partie du contenu.
Il y a une démo bien présentée qui contient 1000 images - chacune n'est chargée qu'une fois que vous y faites défiler. Comme ce plugin charge également des vidéos paresseuses, il existe une démo vidéo que vous pouvez voir en cliquant sur le lien ci-dessus.

bj paresseux charge

PRIX : Gratuit

Si vous n'avez pas besoin de support pour les vidéos et que vous souhaitez uniquement que vos images se chargent paresseux, vous devriez consulter ce plugin WP. Une fois installé et configuré, il remplacera vos images, vignettes, images Gravatar et même iframes par un espace réservé. Semblable à un plugin mentionné précédemment, il ne chargera le contenu qu'une fois qu'un utilisateur y accédera.

Qu'il s'agisse d'images ou de vidéos que vous souhaitez charger paresseux, l'un des plugins mentionnés ci-dessus vous aidera en quelques secondes. Tous sont gratuits, il n'y a donc aucune excuse pour ne pas essayer au moins l'un des plugins et voir combien de poids cela vous prendra. Bien sûr, il existe de nombreux autres plugins avec la même fonction et vous êtes libre de les parcourir et de les essayer tous.

Afficher les images avant et après de manière attrayante

Nous sommes sûrs que vous avez déjà vu de nombreux exemples d'images avant/après. Je ne sais pas pour vous, mais la première chose que nous avons à l'esprit lorsque nous voyons l'expression « avant et après » est un programme d'entraînement physique où les gens montrent leur corps avant et après un programme d'entraînement.

Si vous y réfléchissez, la plupart des sites Web utilisent une approche simple pour présenter les différences : ils prennent les deux images et les placent l'une à côté de l'autre ou même l'une au-dessus de l'autre. Si vous voulez le même résultat, vous ne liriez pas cet article car vous savez déjà comment faire cela.

Et si nous vous disions qu'il existe un moyen visuellement époustouflant de résoudre ce problème avant/après et qu'il est à portée de main ? Eh bien, il y a et après une configuration, vous ferez l'éloge des développeurs parce que le résultat final est vraiment, vraiment cool.

Vingt Vingt

PRIX : Gratuit

Twenty Twenty est le nom de ce plugin génial que vous pouvez télécharger gratuitement dans le référentiel de plugins WordPress.

Le plugin vous permettra de placer une image sur l'autre et de jouer avec un curseur afin que vous puissiez masquer/révéler l'image. S'il vous plaît, regardez la démo et vous verrez de quoi nous parlons.

OK, maintenant que vous êtes accro à ce petit plugin, voyons comment créer cet effet étonnant. Bien qu'il soit relativement facile de recréer l'effet de démonstration, vous devrez toujours vous familiariser avec le HTML de base. Allons-y:

1. Créer un nouveau message ou ouvrir celui existant
2. Insérez deux images dans la publication. Si vous travaillez dans un éditeur visuel, vous devriez voir l'image l'une au-dessus de l'autre. Si vous travaillez dans un éditeur de texte, vous devriez voir un code semblable à celui-ci :

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
hauteur="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
hauteur="200" /></a>

3. Saisissez la balise [twentytwenty] avant la première image
4. Après le second, entrez la balise [/twentytwenty]

Vous devriez vous retrouver avec quelque chose comme ceci dans votre éditeur de texte :

5. Assurez-vous que vos photos sont de la même taille pour obtenir les meilleurs résultats
6. Prévisualisez ou publiez votre article et profitez de vos superbes photos avant et après

Comment créer des images interactives – dessiner, ajouter des descriptions et des liens

Aujourd'hui, il est difficile de gérer un site Web sans multimédia. Les images, les vidéos et la musique font partie de pratiquement tous les sites Web. Un internaute moyen est fortement dépendant des stimuli visuels, vous devez donc vous occuper des parties visuelles et interactives de votre site. Les articles avec des images reçoivent 94% de vues en plus que ceux qui n'en ont pas. En outre, il est déjà connu que le multimédia sur les sites Web peut augmenter le retour sur investissement du marketing de contenu.

Nous espérons qu'il n'est pas nécessaire de vous persuader de prendre soin des images sur votre site. Même si vous n'utilisez pas d'images dans les articles (ce que vous devriez), vous utilisez des images en vedette, n'est-ce pas ? Il existe de nombreux plugins de galerie qui peuvent vous aider à gérer les images sur votre site WordPress, vous pouvez avoir des thèmes liés à la photographie, connecter Instagram à votre site WordPress et bien plus encore. Mais et si vous vouliez créer du contenu plus interactif ?

Pour commencer, vous pourriez être intéressé par l'ajout d'un effet d'image avant-après que vos utilisateurs adoreront. N'oubliez pas la réalité virtuelle dans WordPress qui devient de plus en plus populaire après qu'Automtic ait introduit la réalité virtuelle sur WordPress.com. Pourtant, il manque quelque chose. Est-il possible de faire des images interactives avec des parties cliquables ? Oui, c'est possible, et nous sommes sur le point de vous montrer à quel point c'est amusant et facile.

Attirer l'attention

PRIX : Gratuit

La première chose à propos de ce plugin que vous aimerez, c'est qu'il est entièrement gratuit ! Comme avec n'importe quel autre plugin du référentiel WordPress, vous pouvez le télécharger, l'installer et l'activer en quelques minutes. La version gratuite vous permettra de travailler avec une seule image interactive. Si vous en voulez plus, vous devrez opter pour la version PRO, mais nous en reparlerons plus tard.

Le plugin est réactif et vous n'avez pas à vous soucier de l'affichage correct des images interactives sur n'importe quel appareil. Non seulement l'image sera mise à l'échelle en fonction de la taille de l'écran, mais elle fonctionnera dans la plupart des navigateurs modernes et anciens (ordinateurs de bureau et mobiles). Draw Attention utilise des éléments de canevas lorsqu'ils sont affichés dans de nouveaux navigateurs, tandis qu'il reviendra aux images cliquables si vous le chargez dans un ancien.

Caractéristiques

Avant de passer à un exemple qui vous montrera à quel point ce plugin simple est puissant, voyons à quoi s'attendre de Draw Attention :

• Dessiner – Après avoir téléchargé une image, vous aurez la possibilité de dessiner des formes dessus. Sélectionnez n'importe quelle partie de votre image qui deviendra sélectionnable/cliquable
• Couleurs – Personnalisez les couleurs afin que vous puissiez adapter les hotspots à la conception de votre site
• Surbrillance au survol - Affiche une autre partie de l'image si un utilisateur survole la partie sélectionnée
• Afficher plus d'informations – Afficher plus d'informations sur la partie sélectionnée de l'image
• Aller à l'URL - Rediriger les utilisateurs vers n'importe quelle URL s'ils cliquent sur la sélection

Exemple – Carte interactive d'Hawaï

Nous utiliserons l'exemple du site de démonstration pour vous montrer ce que vous pouvez faire exactement avec Draw Attention. Voyons donc à quoi ressemble une carte interactive d'Hawaï lorsqu'elle est créée avec le plugin.

La première chose à faire est de trouver une image des îles d'Hawaï. Après avoir navigué vers Attirer l'attention -> Modifier l'image, vous devez télécharger l'image dans la zone de la barre latérale droite. Une fois l'image chargée, le plaisir peut commencer.

Ici, vous pouvez choisir les couleurs des reflets (couleur, bordure, opacité, etc.), styliser la "boîte d'informations supplémentaires" (image, titre, couleur du texte, etc.). Si vous ne souhaitez pas sélectionner manuellement toutes les couleurs de l'image, vous pouvez rapidement choisir un jeu de couleurs dans la barre latérale droite.

La partie la plus magique se produit dans l'écran des paramètres Hotspot Areas . Ici, vous obtiendrez votre image chargée en taille réelle. Tout ce que vous avez à faire maintenant est de commencer à dessiner et de créer un nouveau hotspot. Vous pouvez ajouter autant de points que vous le souhaitez, ce qui signifie que vous pouvez créer des sélections complètes comme vous le souhaitez. Vous pouvez créer autant de hotspots, et chacun peut avoir ses propres paramètres.

Ainsi, dans cet exemple, vous devez sélectionner l'une des îles. Choisissez un titre pour l'île, ajoutez une description et l'image supplémentaire qui s'affichera une fois qu'un utilisateur survolera le point d'accès (partie droite de l'image GIF ci-dessus).

Vous devez répéter le processus pour chacune des îles que vous souhaitez rendre interactives. Une fois que vos hotspots sont prêts, copiez simplement le shortcode du côté droit. Collez le shortcode dans un article, une page, un widget ou partout où vous souhaitez afficher votre nouvelle carte interactive, et le tour est joué ! Si vous souhaitez rediriger les utilisateurs vers une autre page une fois qu'ils ont cliqué sur les sélections, il vous suffit de sélectionner l'URL au lieu de la description. Facile comme ça !

Version PRO

Alors que la version gratuite sera parfaite si vous n'avez besoin que d'une seule image, la version PRO vous permettra d'avoir autant d'images interactives sur votre site que vous le souhaitez. Bien que ce soit la chose la plus importante à considérer, la version PRO vous apportera encore plus que plusieurs images.

La fonction Options de mise en page vous permettra d'afficher plus d'informations sur les parties sélectionnées de l'image. Par exemple, vous pourrez afficher des informations dans une lightbox ou dans une simple barre d'outils qui apparaîtra après qu'un utilisateur survolera la partie sélectionnée de l'image.

Il existe également vingt palettes de couleurs prédéfinies, vous n'avez donc pas besoin de personnaliser chaque couleur manuellement. La version PRO vous coûtera 74 $ pour une licence de site unique, mais si vous avez besoin de plus d'une image interactive, ce sera une évidence.

Comment régénérer des tailles d'image supplémentaires

Il est relativement facile d'enregistrer de nouvelles tailles d'image dans votre thème WordPress. Après avoir indiqué à votre système la taille de vos images, les avoir nommées et décidé comment les recadrer, vous êtes libre de distribuer les images où vous le souhaitez. Mais qu'en est-il des vieilles images ?

Si vous avez utilisé l'une des techniques que nous vous avons montrées, vous avez préparé le gazon pour de nouvelles images. Que vous utilisiez de nouvelles tailles d'image pour les vignettes de publication ou que vous autorisiez les auteurs à les utiliser dans les publications, les nouvelles règles s'appliquent uniquement aux images qui sont téléchargées après que vous ayez apporté la modification au fichier functions.php. Pour modifier les anciennes images, nous vous suggérons d'utiliser le plugin Regenerate Thumbnails.

Régénérer les vignettes :

PRIX : Gratuit

1. Allez dans Plugins-> Ajouter un nouveau
2. Rechercher « Régénérer les vignettes »
3. Installer et activer le plugin
4. Accédez à Outils-> Regen.Thumbnails

Si vous souhaitez redimensionner toutes vos images, cliquez simplement sur le bouton « Régénérer toutes les vignettes » et attendez que le plugin fasse le gros du travail.

Si vous souhaitez voir les images qui vont être redimensionnées, ou si vous souhaitez ne redimensionner que certaines images, accédez à votre médiathèque où vous trouverez une nouvelle option sous « Actions groupées » et une à côté de chaque image dans le Galerie.

La bonne chose à propos du plugin est qu'il ne supprime pas vos images originales. Il ne créera que de nouvelles tailles d'image que vous pourrez utiliser dans votre thème, tandis que les originaux vous seront laissés pour les utiliser plus tard ou les supprimer manuellement si vous décidez que vous n'en avez pas besoin.

C'est ça. Profitez de vos nouvelles vignettes ou consultez le plugin Simple Image Sizes qui peut faire la même chose.

Supprimer les attributs d'image de largeur et de hauteur avec jQuery

Lors de l'ajout d'images à un article WordPress, le système ajoute automatiquement ses attributs de hauteur et de largeur à l'image. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Sauvegarder les modifications

Et tu as fini! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Ouvrez votre fichier functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Sauvegarder les modifications
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Ouvrez fonctions.php
2. Copiez et collez le code suivant :

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Sauvegarder les modifications

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Conclusion

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.