Comment améliorer les images dans WordPress

Comment améliorer les images dans WordPress

Cela fait longtemps que les images n’ont pas été quelque chose de trop grand pour télécharger sur Internet.Aujourd’hui, les sites web ne peuvent exister sans eux.Bien que la vitesse d’Internet a considérablement augmenté au fil des ans, il est essentiel que vous prenez soin des images 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.Des images optimisées, en effet, peuvent endommager votre site de plusieurs façons; d’influencer la façon dont les visiteurs pensent à la vitesse de votre site Web et les classements SEO.Si vous n’y avez pas encore pensé, nous sommes ici pour vous montrer différentes façons d’améliorer les images dans WordPress.

Dans ce guide, nous allons vous montrer:

  • Comment optimiser les images pour WordPress pour accélérer votre site et améliorer seo
  • Modifier la façon dont WordPress compresse les images JPEG
  • Les plugins d’optimisation d’image les plus populaires pour WordPress
  • Ajouter le téléchargement lent pour vos vidéos et images
  • Voir les images avant et après de manière attrayante
  • Comment créer des images interactives : dessiner, ajouter des descriptions et des liens
  • Comment régénérer des tailles d’images supplémentaires
  • Supprimer les attributs d’image de largeur et de hauteur avec jQuery
  • Comment créer des tailles d’images personnalisées dans Media Uploader
  • Prenez une capture d’écran automatique de n’importe quel site web et le poster comme une image dans votre post

Comment optimiser les images pour WordPress pour accélérer votre site et améliorer seo

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

  • Site le plus rapide
  • MEILLEUR RÉFÉRENCEMENT
  • Sauvegardes plus petites
  • Moins d’utilisation de bande passante
  • Utilisateurs plus heureux

Vous devez également savoir qu’il existe plusieurs étapes où vous pouvez optimiser les images.Vous pouvez prendre soin des images avant même de les télécharger sur un blog, ou vous pouvez le faire après le téléchargement.

Essayez les images rapidement 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 apprendrez rapidement dans quelle forme se trouvent les images sur votre site.

Nous aimons utiliser GTmetrix qui vous montrera également les images exactes qui font que votre site se charge plus lentement.

Optimiser les images pour WordPress avant de télécharger

Pendant le blog, la plupart des gens ne prennent pas toutes les mesures nécessaires pour optimiser leurs images.Habituellement, les gens prennent simplement une photo de leur appareil photo ou smartphone, en téléchargent une à partir d’Internet ou en créent une à l’aide d’un logiciel informatique.

Ils ne pensent pas aux formats, à la taille de l’image ou aux noms de fichiers.Si l’image semble bonne, ils supposent juste qu’il est prêt pour l’Internet.Si vous ne vérifiez pas vos images, vous construisez un désastre.

Resize images

Resize images

Ne téléchargez pas d’images sur votre site WordPress avant de vérifier la largeur et la hauteur de chaque image.Par exemple, si vous voyez des images jusqu’à 700 px, vous n’avez pas vraiment besoin de télécharger une image plus grande.Si vous le faites, vous aurez un fichier plus grand qui rendra votre site plus lent, tandis que la sortie sera la même.WordPress va créer des dimensions supplémentaires, mais ce n’est pas une excuse pour ne pas préparer d’images avant de télécharger.

Resizing images est rapide et facile.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 resize images comme Easy Resize.

La taille de l’image varie d’un thème à l’autre.Si vous ne savez pas lequel vous devez utiliser, examinez de plus près votre thème WordPress et inspectez les images, recherchez de la documentation ou demandez de l’aide.

Changer la qualité

Après avoir changé de taille, vous devriez envisager de changer la qualité des images.Selon le logiciel, il existe plusieurs façons de changer la qualité de l’image.Par exemple, toujours populaire Photoshop 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.

En outre, si vous choisissez d’enregistrer une image comme JPEG, Photoshop vous demandera de choisir le niveau de qualité.Dans ce cas, l’abaissement de la qualité de 12 à seulement 8 permettra de réduire considérablement la taille d’une image, tandis que la différence de qualité ne sera pas si grande.

Si vous n’utilisez pas encore de logiciel pour changer la qualité de vos images, vous pouvez essayer le petit PNG en ligne gratuitement.Téléchargez une photo et voyez quelle différence elle peut faire.

Choisissez le bon format

Même après des changements de taille et de qualité, vous devriez envisager de changer le format.Pour commencer, en sélectionnant simplement le bon format, vous pouvez sortir quelques kilooctets d’une image, sinon plus.

Formats d’images

La règle générale est très simple.Si vous avez une photo, faites-la JPEG.Si vous avez un logo très simple, une image vectorielle ou des graphiques générés par ordinateur, choisissez PNG.Si vous avez une très petite image sans nuances ou si vous souhaitez montrer une animation simple comme celle indiquée ci-dessus, vous pouvez utiliser des GIF.En règle générale, les images PNG seront assez grandes que les images JPEG, et vous pouvez profiter de la modification du format.

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

Prendre soin des noms de fichiers

Bien que le nom du fichier peut sembler peu important, c’est en fait quelque chose que vous devriez être très conscient de.Le nom de votre fichier d’image contient des informations précieuses pour seo.Si vous voulez que d’autres trouvent votre image sur Google et d’autres moteurs de recherche, vous devriez lui donner son propre nom.

Nous vous recommandons de nommer des images sans utiliser d’espaces.N’oubliez pas d’inclure des mots clés si vous souhaitez 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 plug-in SEO pour WordPress, vous savez déjà qu’il contrôle les balises alt pour les mots clés.Oui, il est vraiment si important d’avoir le nom d’image correct.

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.Nous espérons que vos images sont de la bonne taille et de la bonne qualité.Vous vous êtes assuré que le format et le nom du fichier sont corrects.Après le téléchargement, WordPress vous demandera plus d’informations.Ne sautez pas les méta-informations; entrez les détails de vos images afin que vous puissiez facilement les organiser et se préparer pour seo.

Titre, description, texte alt et légende

Tout en traitant de la technicité, vous ne devriez pas oublier seo.Ajoutez toujours le titre et la description à vos médias.Cela vous aidera avec la gestion des médias WordPress et fonctionnera également pour un meilleur référencement.Aussi, n’oubliez pas l’étiquette alt qui apparaîtra pour les visiteurs qui ne peuvent pas voir votre image correctement.Non seulement cela sera utile pour vos utilisateurs, mais il vous aidera également avec SEO.Votre page se positionnera mieux et les utilisateurs pourront trouver vos nouvelles images plus facilement.

Bien que les sous-titres ne soient pas toujours nécessaires, assurez-vous d’en ajouter un pour les images qui nécessitent des explications supplémentaires (p. ex. captures d’écran).

Modifier des photos avec WordPress

Si vous vous rendez compte qu’une image a encore besoin d’être éditée, vous devez savoir que WordPress vous permet de le faire même après avoir téléchargé le fichier.Modifiez la rotation, la culture et resizez les images que vous avez déjà téléchargées.Vous ne pouvez modifier qu’une vignette ou toutes les autres dimensions.L’éditeur WordPress natif est très simple, mais vous pouvez économiser de l’argent de temps en temps.

Régénérer toutes les vignettes

La plupart des techniques ci-dessus vous aideront avec les nouveaux fichiers d’image que vous téléchargez encore.Mais que faire si vous avez des centaines sinon des milliers de fichiers déjà téléchargés sur votre site WordPress?Ne vous inquiétez pas; vous pouvez toujours optimiser ces images et changer leur taille.

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

Comment régénérer des tailles d’images supplémentaires

Utilisez des 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 l’optimisation de l’image.

Télécharger des images en cas de besoin

Parfois, la qualité des images sera beaucoup plus importante que leur taille.Cela est particulièrement vrai pour les photographes qui veulent que leurs photos soient de premier ordre.Ils ne peuvent pas risquer de réduire la taille ou la qualité du fichier.Toutefois, cela ne signifie pas que vous devez oublier l’optimisation.Pour optimiser les images pour WordPress dans ce cas, vous devriez envisager un chargement lent.

Le chargement lent est une technique qui charge les images uniquement lorsque les utilisateurs en ont besoin (faites défiler vers eux).Par exemple, si vous téléchargez vingt photos de haute qualité sur un article, elles ralentiraient considérablement votre site.Mais si vous téléchargez les images paresseux, l’article serait super rapide et les photos ne seront téléchargées que si nécessaire, le moment où un utilisateur vient à eux.

Avoir des images réactives

Bien que la plupart des thèmes WordPress soient réactifs, cela ne signifie pas nécessairement que vos images sont réactives aussi.Parce que vous ne souhaitez pas télécharger une grande image sur un petit écran, vous devrez enregistrer des tailles d’images 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 n’y paraît.

Optimiser les images pour les médias sociaux

Si vous voulez vous assurer que vos images semblent bonnes sur les médias sociaux, vous aurez besoin d’aller plus loin et d’optimiser les balises meta et balisage schématique.

Si vous utilisez un plugin SEO comme Yoast, n’oubliez pas de vérifier les paramètres.Par exemple, Yoast vous permettra de mettre en place des choses liées aux médias sociaux.Ensuite, allez à 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 de médias sociaux, consultez WPSSO – Balises meta précises + Schema Markup pour l’optimisation du partage social et plugins SEO.

Modifier la façon dont WordPress compresse les images JPEG

Si vous téléchargez des tas d’images JPEG sur votre site WordPress, vous avez peut-être remarqué qu’elles perdent leur qualité d’origine.Si vous vous êtes demandé si c’est la faute de WordPress, vous aurez maintenant votre réponse – oui, c’est le cas!

Une fois qu’une image est chargée dans le format JPEG, WordPress modifie automatiquement la compression et décide de perdre la qualité de l’image.Pour être plus précis, WP utilise une compression de 90% sur votre JPGE.C’est génial si vos images ne sont là que pour être utilisés comme vignettes de messages ou d’être affiché dans un post, mais si vous téléchargez vos photos, vous voulez qu’ils soient les meilleurs possibles, non?

Heureusement, vous n’aurez besoin que d’une seule ligne de code pour le modifier.

Cesse de compresser les images JPEG :

Si vous ne souhaitez pas que vos images JPEG sont compressées, il vous suffit de copier et coller le code suivant dans votre fichier Fonctions.php :

add_filter ('jpeg_quality', fonction ($arg) {retour 100;});

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

D’autre part, les images peuvent ne pas être une grosse affaire pour vous.Ainsi, vous voudrez peut-être qu’ils soient encore plus compressés et vous faire gagner du temps le 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 faible, plus les images seront compressées.Par exemple, pour compresser encore plus ces fichiers JPEG, vous aurez besoin de ce code :

add_filter ('jpeg_quality', fonction ($arg) {retour 80;});

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

Important : Cela n’affectera les images téléchargées qu’après avoir passé le code dans les fonctions.php.Pour modifier la taille et la qualité des images que vous avez déjà dans la bibliothèque, vous aurez besoin d’un plugin.Découvrez comment régénérer des tailles d’images supplémentaires.

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

Au début de cet article, nous avons parlé de la façon d’optimiser les images pour WordPress afin d’accélérer votre site et d’améliorer seo.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 photos sont déjà présentes sur le site, il peut être impossible de rouvrir chaque image individuelle séparément, puis de les télécharger à nouveau.

Ne vous inquiétez pas; personne ne s’attend à ce que vous le faites en premier lieu.Restez avec nous dans les minutes suivantes car nous sommes sur le point de vous montrer les plugins d’optimisation d’image les plus populaires pour WordPress.

Pour optimiser les images, vous n’aurez qu’à sélectionner le plug-in de la liste.Vous devrez le configurer et choisir les choses que le plugin fera pour vous.Après cela, vous serez en mesure de se détendre et de déléguer le travail au plugin de votre choix, tandis que vous pouvez commencer à organiser vos fichiers multimédias.

Les plugins suivants vous aideront à compresser des images sur n’importe quel site WordPress que vous avez.Ils vont télécharger le site plus rapidement et éventuellement vous aider à améliorer seo.

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 rapidement optimiser les images en utilisant différentes techniques de compression.La grande chose au sujet de compresser des images avec WP Smush est que les images ne perdront pas dans la qualité.Tu n’y crois pas ?Essayez le plugin.

Lorsque nous avons parlé de la préparation d’images pour WordPress, nous avons dit que la mise à l’échelle 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 la taille maximale.Après cela, toutes les images plus grandes seront automatiquement resized avant de les ajouter à la bibliothèque.

Ce plugin fantastique peut fonctionner avec des fichiers JPEG, GIF et PNG.Il fonctionne avec tous vos répertoires, prend automatiquement soin des pièces jointes, et fonctionne sur plusieurs sites ainsi.Vous pouvez utiliser manuellement chaque image ou modifier une cinquantaine d’entre elles en vrac.Si vous voulez des résultats encore meilleurs et plus d’options, consultez WP Smush PRO.

Optimiseur d’images EWWW

PRIX: gratuit

Derrière le drôle de nom, il ya l’un des plugins d’optimisation d’image les plus populaires pour WordPress.Tout comme celui mentionné ci-dessus, l’optimiseur d’images EWWW peut compresser vos images sans compromettre leur qualité.Lorsque vous pensez que le plugin peut accélérer votre site en quelques secondes, vous serez déjà sur votre chemin pour le télécharger.Une fois que vous le faites, vous serez en mesure d’optimiser les images en vrac, et les galeries comme GRAND FlaGallery, NextCellent et NextGEN auront également leurs pages Bulk Optimize.

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

Compresser les images JPEG et PNG

PRIX: gratuit

Images de minuscules compressées

Si le panda mignon avec le logo WordPress ne vous donne pas envie d’en savoir plus sur ce plugin, nous ne savons pas ce qu’il va faire.Et si le panda vous semble familier, c’est parce que c’est le même qui vous aide à compresser des images sur le site TinyPNG.Oui, il semble que l’animal soit plus polyvalent qu’on ne le pensait au départ.Mais concentrons-nous sur le plugin.

Si vous allez avec ce plugin, Panda optimisera automatiquement vos images.Chaque fois que vous en chargez un nouveau, le plug-in prend le relais et fait son travail.Toutefois, vous pouvez optimiser les images individuelles ou le faire en vrac en accédant simplement à la médiathèque.

Compressez les images JPEG et PNG prend même en charge les PNJ animés, fonctionne parfaitement sur un site multiple, est compatible avec WooComerce et n’aura aucun problème avec WP Offload S3.

La grande chose au sujet du plugin est qu’il vous permet de définir la largeur maximale et les attributs de hauteur pour toutes les images.Si vous vous inquiétez de ce que feront les métadonnées, ne vous inquiétez pas; le panda gardera toutes les informations intactes.

Il n’y a pas de limites de taille de fichier, vous pouvez définir un widget de tableau de bord, et il fonctionne également avec l’application mobile WordPress.Parce que tout cela, Compress JPEG et 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.

Imsanity (19 ans)

PRIX: gratuit

Imsanity (19 ans)

Bien que l’image de couverture de ce plugin peut vous faire peur, prenez une seconde et voir toutes les caractéristiques de l’Imsanity.Oh, le nom du plugin a l’air fou aussi, non ?Une fois que vous êtes d’accord avec le nom plugin, vous verrez qu’il a beaucoup à offrir.

Imsanity peut automatiquement resize images, vous permet de définir la taille maximale, et a également une option de mise à l’échelle en vrac.Ceci est important si vous avez déjà des centaines de photos sur votre blog qui ont besoin d’optimisation.

Ce plugin gratuit est une excellente option si vous ne voulez pas lutter beaucoup avec les paramètres plugin.Tout ce dont vous avez besoin est d’installer et d’activer Imsanity, définir quelques options et vous pouvez les oublier; gérera son propre chemin vers l’optimisation de l’image.

Nous avons adoré l’option qui vous permet de convertir des images BMP en JPG.Dans le cas où vous avez de nombreux fichiers BMP téléchargés par erreur il ya quelque temps, ce sera un vrai remède-tout.

Optimiseur d’image ShortPixel

PRIX: gratuit

Optimiseur d’image ShortPixel

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

ShortPixel Image Optimizer optimise non seulement les documents JPG, PNG, GIF et PDF pour vous, mais vous permettra également de convertir n’importe quelle image JPEG, PNG ou GIF en WebP.Le plugin fonctionne bien avec d’autres plug-ins galerie et il n’a pas d’importance si votre site utilise HTTP ou HTTPS.Il vous permettra de supprimer les données EXIF des images (quelque chose que les photographes vont adorer avoir).

Le plugin reconnaît les images qu’il a déjà optimisées, de sorte qu’il les sautera en cas de besoin.Vous pouvez autoriser ou interdire l’optimisation automatique et faire beaucoup, beaucoup plus avec ce plugin fantastique.Consultez la page officielle du référentiel pour voir toutes les fonctionnalités.

Optimus – Optimiseur d’image WordPress

PRIX: gratuit

Optimus

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

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

Ajouter le téléchargement lent pour vos vidéos et images dans WordPress

Une fois que vous commencez à ajouter beaucoup de matériel vidéo et d’image à votre site Web, il est évident qu’il va commencer à charger plus lentement.Peu importe d’où ils viennent, les grandes vidéos et les images agiront comme un lourd fardeau sur votre site et faire attendre les visiteurs beaucoup plus longtemps que nécessaire pour télécharger tout le contenu.Avec WordPress, cela ne devrait pas être une grosse affaire et voici comment résoudre la situation facilement.

Si vous connaissez PHP, il ya un excellent article sur l’ajout de chargement d’image lente et défilement sans fin écrit par nos collègues sur les thèmes élégants.

Si ce n’est pas le cas, dans les prochaines lignes, nous mentionnerons quelques-uns des plugins de téléchargement lents les plus populaires qui ront votre site plus rapidement.Et vous n’aurez même pas à faire beaucoup plus que d’installer un plugin et le configurer en quelques étapes.

Charge paresseuse pour les vidéos

PRIX: gratuit

Charge paresseuse pour les vidéos

Si vous avez beaucoup de vidéos Youtube et Vimeo, vous devriez envisager d’installer ce plugin.Une fois mis en place, le plugin insérera une image dans votre vidéo et pour cette raison 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 à télécharger et à jouer.Une démo simple peut être consultée sur le site du développeur.

WP YouTube Lyte

PRIX: gratuit

WP YouTube Lyte

Ce plugin fera son travail rapidement et facilement.Après l’avoir installé, ajoutez un lien vers votre vidéo Youtube ou utilisez un shortcode pour en ajouter un.Vous pouvez choisir entre ajouter une vidéo, une liste de lecture ou un son régulier uniquement à partir de la vidéo sélectionnée.Après cela, vos vidéos Youtube auront une image sur elle qui permettra le téléchargement lent.Il suffit de cliquer sur l’image pour démarrer la vidéo ou audio.
Regardez une démo sur le site du développeur.

a3 Charge paresseuse

PRIX: gratuit
DÉMO 1
DÉMO 2

a3 Charge paresseuse

Ceci est dédié à votre site mobile.Si vous avez beaucoup d’images et / ou de vidéos que vous souhaitez montrer à vos visiteurs sur les appareils mobiles, vous devriez vérifier a3 Lazy Load.Il vous permettra d’ajouter un téléchargement lent à vos images et vidéos, et le plugin vous permettra même de choisir les effets de transition qui apparaîtront aux utilisateurs comme ils défilent à travers le contenu que vous téléchargez.

Dans la zone admin, vous pouvez facilement activer et désactiver le contenu que vous souhaitez télécharger lentement.Pour le contenu actif, le contenu ne sera téléchargé que lorsqu’un visiteur fait défiler cette partie du contenu.
Il ya une démo bien montré qui dispose de 1000 images – chacune n’est téléchargée qu’une fois que vous faites défiler à travers elle.Depuis ce plugin télécharge également des vidéos, il ya une démo vidéo que vous pouvez voir en cliquant sur le lien ci-dessus.

CHARGE BJ Lazy

PRIX: gratuit

CHARGE BJ Lazy

Si vous n’avez pas besoin de support vidéo et que vous voulez juste télécharger vos images paresseux, consultez ce plugin WP.Une fois installé et configuré, il remplacera les images, les vignettes, les images Gravatar et même les iframes par un espace réservé.Semblable à un plug-in mentionné précédemment, il ne chargera le contenu qu’une fois que l’utilisateur se connecte à celui-ci.

Qu’il s’agisse d’images ou de vidéos que vous souhaitez télécharger paresseusement, 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 un des plugins et voir combien de poids il faudra pour vos épaules.Bien sûr, il ya beaucoup d’autres plugins avec la même fonctionnalité et vous êtes libre de naviguer et de les essayer tous.

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

Nous sommes sûrs d’avoir 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 quand nous voyons l’expression « avant et après » est le programme d’entraînement physique où les gens montrent leur corps avant et après un programme d’entraînement.

Si vous y pensez, la plupart des sites web utilisent une approche simple pour montrer les différences: ils prennent les deux images et les placer l’un à côté de l’autre ou même l’un sur l’autre.Si vous voulez le même résultat, vous ne lirez pas cet article parce que vous savez déjà comment le faire.

Que faire si nous vous avons dit qu’il ya une façon visuellement étonnante de résoudre ce problème avant / après et il est juste à portée de main?Eh bien, il ya et après une configuration, vous allez louer les développeurs parce que le résultat final est vraiment super.

Vents vents

PRIX: gratuit

Vents vents

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

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

Ok, maintenant quand vous êtes accro à ce petit plugin, voyons comment créer cet effet étonnant.Bien qu’il soit relativement facile de recréer l’effet démo, vous aurez toujours besoin de connaître votre HTML de base.Allons-y:

    1. Créer un nouveau poste ou ouvrir celui existant
    2. Insérez deux images dans le post. Si vous travaillez dans un éditeur visuel, vous devriez voir l’image les unes sur les autres.Si vous travaillez dans un éditeur de texte, vous devez voir le code similaire à ce qui suit :
<a href="image1.jpg"> <img src = "http://www.loactionoftheimage.com" width = "700" height = "200" /> </a>

<a href="image2.jpg"> <img src = "http://www.loactionoftheimage.com" width = "700" height = "200" /> </a>
    1. Insérer l’étique[venti venti]tte avant la première image
    2. Après la seconde, insérez l’étiquette [/ twentytwenty]

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

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

<a href="image2.jpg"> <img src = "http://www.loactionoftheimage.com/image2.jpg" width = "700" height = "200" /> </a>
[/ Twentytwenty]
  1. Assurez-vous que vos images sont de la même taille pour obtenir les meilleurs résultats
  2. Prévisualisez ou publiez votre message et profitez de vos images visuellement étonnantes 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 médias.Les images, les vidéos et la musique font partie de presque tous les sites Web.Un internaute moyen dépend fortement des stimuli visuels, vous devez donc prendre soin des parties visuelles et interactives de votre site.Les articles avec des images reçoivent 94% plus de vues que ceux qui n’en ont pas.En outre, il est déjà connu que le contenu multimédia sur les sites Web peut augmenter le retour sur investissement du marketing de contenu.

Nous espérons que vous n’aurez pas besoin de vous convaincre de prendre soin des images sur votre site.Même si vous n’utilisez pas d’images dans des articles (ce que vous devriez), vous utilisez des images en vedette, non?Il ya beaucoup de plugins galerie qui peuvent vous aider à gérer les images sur votre site WordPress, vous pouvez avoir des thèmes liés à la photographie, lien Instagram à votre site WordPress, et faire beaucoup plus.Que se passe-t-il si je veux créer plus de contenu interactif ?

Pour commencer, vous pourriez être intéressé à ajouter des effets d’image avant et après que vos utilisateurs en profiter.N’oubliez pas la réalité virtuelle dans WordPress qui est de plus en plus populaire après automattic introduit la réalité virtuelle dans WordPress.com.Cependant, il manque quelque chose.Est-il possible de créer des images interactives avec des parties cliquables ?Oui, c’est possible et nous allons vous montrer à quel point c’est amusant et facile.

Attirer l’attention

PRIX: gratuit
Démo

La première chose que vous aimez à propos de ce plugin, c’est qu’il est complètement gratuit!Comme pour tout autre plug-in 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 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 des images interactives s’affichant correctement sur n’importe quel appareil.Non seulement l’image sera resized en fonction de la taille de l’écran, mais il fonctionnera dans la plupart des navigateurs modernes et plus anciens (bureau et mobile).Attirer l’attention utilise des éléments de toile lorsqu’ils apparaissent dans de nouveaux navigateurs lorsqu’il revient aux cartes d’images si vous les chargez dans un précédent.

Caractéristiques

Avant d’arriver à un exemple qui vous montrera à quel point ce plugin simple est puissant, voyons à quoi s’attendre d’Attirer l’attention:

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

Attirer l’attention sur les paramètres

Exemple : Carte interactive d’Hawaï

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

La première chose que vous devriez faire est de trouver une image des îles hawaïennes.Après avoir passé à Attirer l’attention > modifier l’image, vous devez télécharger l’image sur la zone sur la barre latérale droite.Une fois l’image téléchargée, le plaisir peut commencer.

Ici, vous pouvez choisir des couleurs pour les lumières élevées (couleur, bord, opacité, etc.), Donnez un style à la « boîte d’information supplémentaire » (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 schéma de couleurs à partir de la barre latérale droite.

Attirer l’attention : Comment créer des images interactives dans WordPress

La partie la plus magique se produit sur l’écran des paramètres des zones hotspot.Ici, vous obtiendrez l’image téléchargée en taille réelle.Tout ce que vous devez faire maintenant est de commencer à dessiner et à 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 que vous voulez.Vous pouvez créer beaucoup 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 sera affichée une fois qu’un utilisateur aura exploré le hotspot (côté droit de l’image GIF indiquée ci-dessus).

Vous devez répéter le processus pour chacune des îles que vous souhaitez être interactif.Une fois que vous avez vos hotspots prêts, copiez le shortcode du côté droit.Coller le code court dans un message, une page, un widget ou où vous voulez montrer votre nouvelle carte interactive et vous avez terminé!Si vous souhaitez rediriger les utilisateurs vers n’importe quelle autre page après avoir cliqué sur les sélections, sélectionnez simplement l’URL au lieu de la description.Aussi facile que ç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 toutes les images interactives sur votre site que vous voulez.Bien que ce sera la chose la plus importante à considérer, la version PRO vous apportera encore plus d’images.

La fonction Options de mise en page vous permettra de voir plus d’informations sur les parties sélectionnées de l’image.Par exemple, vous pouvez afficher les informations dans une boîte lumineuse ou une barre d’outils simple qui apparaîtra après qu’un utilisateur passe sur la partie sélectionnée de l’image.

Il ya aussi vingt palettes de couleurs prédéfinis, de sorte que vous n’avez pas besoin de personnaliser manuellement toutes les couleurs.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 un jeu d’enfant.

Comment régénérer des tailles d’images supplémentaires

Il est relativement facile d’enregistrer de nouvelles tailles d’image dans votre thème WordPress.Après avoir dit à votre système la taille de vos images, vous les avez nommées et décidé comment les recadrer, vous êtes libre de distribuer les images où vous voulez.Et les vieilles photos ?

Si vous avez utilisé l’une des techniques que nous vous avons montrées, vous avez préparé le terrain pour de nouvelles images.Que vous utilisiez la taille des images nouvellement enregistrées pour les vignettes postales ou que vous permettiez aux auteurs de les utiliser dans les publications, les nouvelles règles ne s’appliquent qu’aux images téléchargées après avoir fait la modification du fichier Fonctions.php.Pour modifier des images plus anciennes, nous vous recommandons d’utiliser le plugin Thumbnails régénéré.

Régénérer les vignettes :

PRIX: gratuit
  1. Aller à Plugin-> Ajouter de nouveaux
  2. Recherche de « Vignettes régénérées »
  3. Installer et activer le plugin
  4. Allez à Regen'> Tools.Vignettes, 19

Si vous souhaitez resize toutes vos images, il suffit de cliquer sur le bouton « Régénérer tous les aperçus » et attendre que le plugin pour faire le dur labeur.

Comment régénérer des tailles d’images supplémentaires

Si vous souhaitez voir des images qui seront resize, ou si vous souhaitez resize seulement certaines des images, rendez-vous à votre bibliothèque où vous trouverez une nouvelle option sous « Actions en vrac » et une à côté de chaque image dans la galerie.

La bonne chose au sujet du plugin est qu’il ne supprime pas les images originales.Il ne créera que de nouvelles tailles d’image que vous pouvez utiliser dans votre thème, tandis que les originaux resteront pour vous d’utiliser plus tard ou de les supprimer manuellement si vous décidez que vous n’en avez pas besoin.

C'est tout.Profitez de vos nouvelles vignettes ou consultez le plugin Tailles d’image simple qui peut faire la même chose.

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

Lorsque vous ajoutez des images à un message WordPress, le système ajoute automatiquement ses attributs de hauteur et de largeur à l’image.C’est généralement une bonne chose, mais il ya des moments où vous n’aimerez pas le fait que chaque image obtient ces attributs.

Si vous souhaitez supprimer des attributs au point de téléchargement, vous pouvez le faire via une fonctionnalité simple que nous vous avons montré la dernière fois.

Mais si vous lisez l’article ou essayez la fonctionnalité vous-même, vous avez remarqué qu’il affecte uniquement les images téléchargées après l’installation de la fonctionnalité dans votre système WP.Si vous avez déjà une base de données pleine de publications avec des images insérées, la fonctionnalité ci-dessus ne vous aidera pas beaucoup avec vos anciens attributs d’image.

Puisque vous ne pouvez probablement pas examiner manuellement chaque image individuelle et éliminer la largeur et la hauteur une par une, vous avez probablement besoin d’une autre fonctionnalité qui supprime ces attributs pour toutes les images existantes intégrées dans vos messages. Dans ce cas, vous êtes au bon endroit parce que nous allons vous montrer un moyen facile de supprimer automatiquement les attributs d’image large et de hauteur avec seulement quelques lignes de code jQuery.N’avez pas peur de la phrase précédente : vous n’avez même pas besoin de savoir ce qu’est JQuery, suivez les trois étapes suivantes, et vous aurez fini en un clin d’œil.

Supprimez les attributs d’image de largeur et de hauteur :

    1. Ouvrez le fichier en-tête.php de votre dossier thématique
    2. Copier et coller ce code n’importe où entre les balises <head> Et </head>:
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text / javascript">
jQuery.noConflict ();
jQuery (document) .ready (function ($) {
$ ( 'Img'). Chacun (fonction ) {
$ (Ceci) .removeAttr ( 'width')
$ (Ceci) .removeAttr ('hauteur');
});
});
  1. Enregistrez vos modifications

Et c’est fini !Le code fera sa magie après l’ouverture d’un message qui contient une image et supprimer les balises de largeur et de hauteur de celui-ci.

Comment créer des tailles d’images personnalisées dans Media Uploader

Si vous utilisez Media Uploader pour gérer des images dans WordPress, vous avez probablement vu de nombreuses options pour les images.Parmi beaucoup, vous pouvez choisir une taille d’image que vous pouvez envoyer à votre article.

Il y a des options d’aperçu, de médias, de grande taille et de taille réelle à choisir, mais toutes ces options ont des valeurs par défaut.Ainsi, si vous utilisez un thème personnalisé, la plupart du temps vous êtes coincé la largeur d’édition et la hauteur pour chaque image encore et encore.

En fait, tu n’as pas à le faire.Il ya une petite fonctionnalité soignée appelée add_image_size () qui est un excellent outil pour les développeurs.Et après cet article, vous le trouverez utile aussi.

Supposons que votre thème a une largeur personnalisée et que vous voulez facilement intégrer des images pour les adapter parfaitement.Disons que la largeur est de 666 px (nous n’allons pas entrer dans pourquoi vous définissez la largeur à ce nombre, c’est votre choix).Pour ce faire, vous devez ajouter un bouton radio supplémentaire à l’uploader multimédia.Avec le code ci-dessous, vous ajouterez une autre dimension qui est la moitié de la taille de l’original.

    1. Ouvrez votre fichier Fonctions.php
    2. Copiez et coller ce morceau de code :
custom_image_sizes fonction {
add_image_size ('one-size', 333, 333, true);
add_image_size (« une autre taille », 666, 666, vrai);
}

add_action ('init', 'custom_image_sizes');

show_image_sizes (taille$['one-size']) {
$ taille = __ ('Custom size 1', 'isitwp');
$ tail['another-size']le = __ ('Custom size 2', 'isitwp');
retourne $ taille;
}

add_filter (« image_size_names_choose », « show_image_sizes »);
  1. Enregistrez vos modifications
  2. Essayez d’ajouter une image de votre uploader multimédia où vous devriez voir les nouvelles options de taille dans « Paramètres d’affichage de pièce jointe »

Prenez une capture d’écran automatique de n’importe quel site web et le poster comme une image dans votre post

Si vous souhaitez prévisualiser un site Web, vous devez visiter le site Web, l’imprimer ou prendre une capture d’écran avec un programme de navigateur ou un module d’ajout.Ensuite, vous devrez modifier l’image, la couper dans la bonne taille et la télécharger sur votre WordPress afin que vous puissiez utiliser la capture d’écran dans un message.

Si vous n’avez pas à prendre cet instantané de temps en temps, il ne sera pas un problème, mais si vous utilisez des captures d’écran de différents sites Web plus souvent, vous serez heureux de savoir qu’il ya une fonctionnalité fantastique qui permet de gagner du temps et des nerfs.

Dans cette partie du guide, nous allons vous montrer la fonctionnalité complète qui crée un shortcode que vous pouvez utiliser pour prendre des instantanés de n’importe quelle page Web que vous voulez.

Créer capture d’écran automatique:

    1. Fonctions ouvertes.php
    2. Copiez et coller le code suivant :
fonction wp_webscreen ($ atts, $ contenu = NULL) {
extrait (shortcode_atts (tableau)
« snap » => 'http://s.wordpress.com/mshots/v1/',
« url » => 'http://www.firstsiteguide.com',
« alt » => 'wploop',
« w » => '600', // largeur
« h » => '450' // hauteur
), $atts));

$ img = '<img alt = "'. $alt. Src = « '. $ snap. ''. urlencode (url$ ). '? w ='. $w. '& h ='. $h. '"/>';
retourne $ img;
}
add_shortcode (« écran », « wp_webscreen »);
  1. Modifier les variables par défaut dans le tableau
  2. Enregistrez vos modifications

Cette fonctionnalité crée un shortcode que vous pouvez facilement utiliser n’importe où sur votre site WordPress.Si vous souhaitez utiliser une capture d’écran d’une page Web dans un message, widget sidebar, ou footer, par exemple, vous avez juste besoin de c / p le shortcode au bon endroit:

La beauté [screen url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]de cette fonctionnalité est qu’il enregistre l’image comme une URL dynamique, ce qui signifie qu’une fois que vous créez un instantané avec le code court, il sera automatiquement mis à jour à l’avenir et toujours afficher l’apparence actuelle du site spécifié dans le code court.

Notez que vous pouvez modifier les paramètres du code court directement à partir de celui-ci.Vous n’avez pas besoin de modifier le code dans le fichier Fonctions.php si vous souhaitez capturer l’instantané d’une autre URL ou capturer l’instantané à une taille différente.

Exemple:

Disons que vous voulez prendre une capture d’écran de Google et en faire 200 × 400 pixel[screen url = “http://www.google.com” alt = “Google” w = “200 ″ h =” 400 ″]s:

Vous pouvez rendre tout encore plus facile en sauvant le shortcode dans un bouton afin que vous puissiez l’insérer dans un message en un clic d’un bouton.

Conclusion

Vous n’avez pas besoin d’installer tous les plugins et fonctionnalités que nous avons mentionnés pour améliorer les images sur votre site WordPress.Mais nous espérons que vous avez trouvé au moins quelques conseils qui vous aideront à optimiser les images ou les rendre meilleures en aucune façon.