Le plugin WordPress pour afficher vos images en grand sans alourdir la page

Le plugin WordPress pour afficher vos images en grand sans alourdir la page

Simple Lightbox est un plugin WordPress pour afficher les images dans leur taille réelle, au clic de la souris. Pratique pour afficher de grandes images sur son site sans impacter le temps de chargement.

J’avais initialement prévu de vous parler de la création des utilisateurs sur WordPress, mais je me suis rendue compte que je l’avais déjà fait (et de façon très détaillée en plus). Du coup, je vais vous présenter un plugin tout simple mais fort pratique (à tel point que je me suis toujours demandé pourquoi WordPress ne proposait pas cette fonctionnalité en natif ?).

« Simple Lightbox », mais de quoi parle-t-on ?

Les habitués auront reconnus derrière le nom « lightbox » la fonctionnalité dont nous parlons. Mais tout le monde ne connait pas les termes techniques consacrés. C’est pourquoi, je vous invite à cliquer sur l’image suivante :

chat blanc aux yeux verts

Voilà, c’est ça l’effet « Lightbox » : un petit script qui ouvre vos images en grand quand on clique dessus.

Le saviez-vous ? Les images sont ouvertes dans une « fausse fenêtre » incluse dans la fenêtre en cours. On appelle cet effet un « popin », par opposition au « popup », qui ouvre une nouvelle fenêtre.

Quel avantage présente la lightbox pour vos visiteurs ?

Outre le fait d’afficher les images en grand sans avoir à changer de page, cette fonctionnalité vous aidera à garder un site rapide. En effet, si vous deviez insérer dans vos pages une image de très grande taille, voire plusieurs, vous affecteriez la vitesse de votre site.

Les images, c’est ce qui pèse le plus lourd sur un site !

Avec Simple Lightbox, vous n’insérez que des miniatures de vos images, et le script va chercher la grande image à la demande de l’utilisateur (au clic). c’est pourquoi la vitesse est préservée.

Comment utiliser Simple Lightbox ?

En bon plugin WordPress, vous pouvez l’ajoutez via le menu Extensions de votre back-office.

Capture d'écran de l'activation de Simple Lightbox

N’oubliez pas d’activer le plugin !

Rien d’étonnant jusque là.

Pour que Simple Lightbox fonctionne bien, vous devrez surtout ne pas oublier d’insérer vos images en choisissant de lier l’image au fichier média, comme sur la capture ci-dessous :

Capture du moment où l'on lie l'image au fichier média
Si vous ne souhaitez pas d’effet Lightbox sur l’une de vos images, sélectionnez simplement « Aucun », dans cette même liste déroulante.

Enfin, dernière recommandation, choisissez une image de taille plus petite que l’image à afficher dans le popin (ça fonctionne sans ça mais ça perd de son intérêt !). C’est quand même énervant ces sites qui permettent d’afficher l’image en grand, mais qui au final présentent une image de la même taille !

plug in images wordpress, plug in wordpress lightbox, plug in wordpress simple lightbox

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

12 commentaires

  1. Salut Marie-Eve,

    Jolie présentation de ce plugin, que j’ai gardé longtemps mais que j’ai du virer : selon le P3 Checker, ce plugin me bouffait presque 50% des ressources ! Mon thème étant assez lourd et mon serveur un peu faiblard, la vitesse n’est déjà pas une des qualités phares de mon blog, alors j’ai préféré m’en passer…
    Depuis, je suis à la recherche d’une plugin de LightBox, mais qui ne prend que peu de ressources…

    Si quelqu’un a ça dans sa poche, je suis preneur ! 😉

    Répondre
    • Salut Mathieu,
      50% des ressources ! Ah oui quand même ! J’ai pas testé car je n’ai plus P3, mais ça m’interpelle !

      Comment un plugin si simple peut-il consommer autant ? Etrange…

      En tout cas si tu veux de la vitesse, le mieux est encore d’insérer un script JS directement dans le header et de le lancer sur tes images au moyen d’une classe par exemple. Celui-ci ne fait que 6kb : http://noelboss.github.io/featherlight/ (mais il faut peut-être l’adapter, je sais pas si tu codes)

      Répondre
    • Bonjour

      Effectivement le plugin Simple Lightbox consomme boucoup de ressource je les déjà tester ,pour le même effet j’utilise le plugin Easy FancyBox que je trouve moins lourd et plus esthétique avec plus de personnalisation.

      En tout les cas merci MarieEve pour cette description

      Amicalement

      Fawzi

      Répondre
  2. Bonjour Marie-Eve,

    Ce plugin a en effet l’air à la fois simple et utile, mais penses-tu qu’il apporte un plus par rapport à la fonctionnalité de lightbox offerte par le plugin JetPack?
    Je te remercie d’avance pour ta réponse.

    Amicalement,

    Bruno

    Répondre
    • Bonjour Bruno,

      Peut-être que celle de JetPack esst plus performante (moins gourmande en ressource) ? Je n’utilise pas JetPack, mais je vais en faire un tutoriel car c’est un outil assez pratique !

      Répondre
  3. Hello Marei-Eve,
    Super ce plugin ! Parce que moi, quand je veux insérer de grandes images sans perdre en rapidité de chargement, je me galère un peu…
    Je crée une image miniature et je place dessus un lien personnalisé vers la page de la grande image (je fais surtout ça pour montrer des captures d’écran). Les lecteurs n’ont qu’à cliquer pour agrandir, mais ils doivent ensuite cliquer sur la flèche retour de leur navigateur pour revenir à l’article (je ne mets pas de target= »_blank »).
    C’est moins ergonomique que la lightbox et ça me demande un peu de manip. Par contre, si Simple Lightbox consomme pas mal de ressources, c’est embêtant… A confirmer ?
    J’ai regardé le lien que tu donnes. Attribuer une classe à une image, c’est devenu facile, mais je me sens moyennement capable d’intégrer un script JS, surtout s’il faut l’adapter (mais ça viendra peut-être un jour !).
    Bonne fin de journée,
    Jérémie

    Répondre
  4. Il y a le simple light box et aussi le facheux one celui qu’on trouve sur les sites consacrée aux smartphone, celui ci tu n’a pas besoins de cliquer dessus et souvent il est fréquent que tu passe une minute à voir défiler de la pub avant d’accéder à ton information ( petit exemple de TF1 sur mobile )

    Répondre
  5. Comme beaucoup de photographe ,Le Chat se pose des questions sur la taille de ses photos 800 X 600 ( ils pèsent 200 de moyennes) pensez-vous que ce type de pluging peut lui être utile,pour son problème de lenteur de chargement ?
    merci de votre aide
    cordialement

    Répondre
  6. Plugin intéressant, lorsqu’il s’agit de devoir montrer un élement dans le détail, sans l’exposé tout de suite à la vue de l’internaute. Merci pour l’info ( plugin installé)

    Répondre
  7. Ou puis-je trouver un maximum d’extension pour WP? J’ai beau cherché je ne trouve pas :)

    Répondre

Trackbacks/Pingbacks

  1. Le plugin WordPress pour afficher vos images en... - […] Mode d'emploi de Simple Lightbox, le plugin pour afficher des images en grande taille dans une page, sans alourdir…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint