WordPress pour le photographe

WordPress est devenu le moteur de blog par excellence au cours des années 2010, facile à installer et à utiliser même sans connaissances poussées en informatique. Extensible à l’infini grâce aux plugins et personnalisable en profondeur grâce aux nombreux thèmes (dont les meilleurs sont payants), il peut notamment être transformé en plateforme e-commerce, forum, site communautaire, plateforme de podcasts, aggrégateur, documentation etc. C’est dont assez logiquement que les photographes s’en sont emparés pour administrer leurs sites web.

Avertissements

WordPress pour le photographe, c’est presque un oxymore. En effet, WordPress est fait pour gérer des contenus textuels : les deux objets qu’il reconnaît sont les articles (archivables) et les pages (pérennes), auxquels sont associées des propriétés : auteur, catégories, mots-clés, date, format, images, image d’en-tête (post thumbnail), état de publication, mot de passe etc. Ces propriétés peuvent être utilisées pour afficher des archives (par date, auteur, catégorie ou mot-clé).

Les images (et tous les médias en général) ne sont pas des objets à part entière dans WordPress, mais plutôt des propriétés attachées aux objets que sont les articles ou les pages, ou formulé différement : des pièces jointes. Les médias n’ont donc pas de propriétés et il n’est pas possible d’afficher des images autrement qu’incluses dans des pages ou des articles, et impossible d’afficher des archives d’images par date ou par catégorie par exemple. Au sens de WordPress, la galerie n’est qu’une mise en forme de plusieurs images dans un article, pas une archive.

WordPress n’est donc pas fait pour gérer des galeries de façon efficace, car il ne suffit pas d’ajouter une image, il faut aussi l’inclure manuellement dans une page ou dans un article. Imaginez que vous ayez une galerie thématique et une galerie par projet, il vous faut donc inclure manuellement 2 fois votre image. Ce sont toujours des contournements et des astuces qui nous permettront ici de parvenir à notre but. C’est la raison du succès de plateformes dédiées à l’hébergement de portfolio photographiques telles que 500px ou Smugmug. Il faut aussi se demander quel est le but recherché par le photographe à travers son site WordPress : exposer son travail photographique (donc des galeries), ou faire un blog qui “parle de photo” (donc plutôt du texte illustré). Dans le premier cas, WordPress n’est clairement pas le meilleur moyen de réaliser cette tâche.

Quel paradigme ?

Dans un souci d’efficacité, et puisqu’un photographe est d’avantage un créateur d’images qu’un éditeur de site web, l’objectif est ici de trouver un paradigme – une méthode de travail – qui lui permette de gérer facilement de grandes quantités d’images en un minimum de temps, en les tenant organisées et à jour. Simplicité et efficacité sont ici les maîtres-mots. On considère qu’un photographe sérieux a déjà une présence en ligne via les réseaux sociaux et sites de partage de photos (Facebook, Pinterest, Flickr, 500px, Viewbug, Tumblr, etc.), il faut donc interfacer tout cela de façon intelligente pour s’éviter d’avoir à mettre en ligne chaque image séparément sur chaque réseau. Trouver une méthode de travail intelligente et optimisée mérite l’investissement initial en temps, car il est rapidement rentabilisé. Nous en verrons deux plus bas.

La charte graphique

La charte graphique d’un site photo devrait être sobre et épurée pour mettre en valeur les images. WordPress possède une fonctionnalité traîtresse : les barres latérales et leurs widgets, qui ont tôt fait de surcharger les pages de distractions tant elles sont faciles et ludiques d’usage. Allez à l’essentiel, moins c’est mieux.

En 2015, le web est multi-support : écrans d’ordinateurs, tablettes, smartphones, appareils connectés etc. Tout site doit donc supporter nativement toutes les tailles d’écrans grâce aux techniques de responsive design, et c’est un critère important dans le choix d’un thème. Pensez alors votre site comme une appli mobile plus que comme un site classique, et réfléchissez le en terme d’expérience utilisateur plus que d’organisation du contenu.

Pour choisir un thème adapté à vos besoins, je vous recommande le site Themeforest, sur lequel je me fournis depuis 3 ans pour mes différents sites webs (je ne suis pas affilié). Il existe différents thèmes gratuits, mais je ne les ai jamais trouvé suffisamment complets pour cet usage. Un thème payant coûte une cinquantaine de dollars pour une qualité et un support la plupart du temps à la hauteur. Vérifiez que le thème que vous choisirez comporte un support du portfolio, avec un affichage ad-hoc (mise en page et archives).

Afficher un portfolio

La version externalisée

La solution que j’ai d’abord choisie passe donc par Flickr comme vaisseau amiral. Mes photos sont classées en albums sur Flickr, que je me contente d’importer sur les pages de mon portfolio grâce au plugin Flickr Justified Gallery qui permet de reproduire la mise en page continue de Flickr. Il existe différents plugins réalisant la même chose avec différentes mises en forme, suivant les goûts et les couleurs. Les avantages de passer par Flickr sont les suivants :

  1. les mises à jour et réorganisations de contenu opérées sur Flickr sont directement impactées sur le site web, pour un gain de temps d’édition,
  2. Flickr sert les images optimisées et redimensionnées dynamiquement au plus proche de leur dimension d’affichage, pour un gain de bande passante,
  3. les serveurs Flickr sont beaucoup plus rapides que la moyenne des hébergements personnels, pour un gain de temps de chargement,
  4. la gestion des images sous Flickr est beaucoup plus efficace que dans la galerie WordPress.

La grande force de cette méthode est que mon logiciel de traitement d’images possède un module d’export intégré vers Flickr qui me permet de mettre en ligne mes images sans même avoir à ouvrir mon navigateur web. À partir de Flickr, je dispatche les images vers tous mes autres réseaux sociaux et sites web grâce à IfTTW et j’affiche dynamiquement les albums Flickr sur les pages de mon site.

L’inconvénient principal de cette approche réside dans les conditions d’utilisations de Yahoo qu’il vous faut accepter, et notamment les aspects propriété intellectuelle et vie privée, ainsi que les politiques de contenu relatives à la nudité par exemple. De plus, le jour où Yahoo modifie ses conditions d’utilisation ou ferme son service, vous êtes seul et désemparé.

Dépendre d’une plateforme externe, surtout lorsqu’elle est gratuite, est toujours risqué car celle-ci peut décider à tout moment que vous n’êtes plus assez bien pour elle. Ainsi en 2014, Google a décidé d’interdire les contenus adultes (nudité, érotisme et pornographie) sur sa plateforme Blogger et a donc supprimé sans préavis les blogs concernés.

La version sur site

La nouvelle approche que j’ai choisie est d’héberger ma galerie sur mon serveur et mon WordPress. Les réseaux sociaux (même ceux dédiés à la photo comme Flickr) ne sont pas adaptés à la publication de contenu, mais plutôt dédiés à la publication de mises à jour. Facebook par exemple tronque les posts longs et met l’accent sur les images, mais des images compressées à l’extrême et dégradées. De plus, il n’a pas aimé que je publie des photos de nus, et son réglement en la matière est aussi stupide qu’hypocrite. Enfin, sa politique d’affichage des flux d’actualité est erratique et vous pouvez ainsi manquer des semaines de publications des pages que vous suivez, si Facebook a décidé que ce n’était pas assez intéressant pour vous.

L’idée est donc de faire de votre blog votre vaisseau amiral, où vous êtes le seul patron à bord (pas de conditions d’utilisation tierces, sinon celles de votre hébergeur et la loi) et où vous pouvez interagir directement avec vos lecteurs comme vous le souhaitez (commentaires, newsletter, contact par email) et éventuellement bâtir une base de données de prospects qui pourront devenir par la suite des clients (oui, je parle de webmarketing). À partir de ce blog, vous redispatchez les images vers les réseaux sociaux de votre choix, avec un lien vers le contenu original, pour aller chercher le visiteur là où il se trouve et le ramener chez vous. Si un jour votre réseau social favori ferme ou vous met dehors, il vous reste votre archive sur votre propre site comme repli. De plus, vous serez plus à même d’y proposer un affichage et une expérience utilisateur adaptée à vos photos, pour peu d’y travailler suffisamment.

Vous pouvez soit utiliser un plugin pour ajouter le support des galeries, soit poster séparément les images en utilisant le format d’article “image” ou “galerie”. Personnellement, j’utilise des articles au format image postés dans une catégorie spécifique, et des types d’articles personnalisés (portfolio) pour les galeries.

Le meilleur plugin de galerie est FooGallery, dont la base est gratuite mais qui peut s’étendre de fonctionnalités payantes et de thèmes. Sa puissance repose sur le fait qu’il s’intègre de façon transparente par dessus la galerie WordPress (un seul système de gestion des images), en créant simplement des galeries sous forme de custom post format. Il est alors possible d’afficher ces galeries dans des articles, pages et barres latérales avec un shortcode, et de configurer l’affichage au cas par cas. Il vient avec plusieurs mises en page élégantes et permet de regrouper les galeries en albums. Notez cependant qu’il ne permet pas aux médias d’exister en tant qu’objet à part entière (avec catégorie et mots clés), il définit simplement de nouveaux objets (galeries et albums) dont les images sont des propriétés.

Vous penserez alors à utiliser le plugin ImageMagickEngine qui a pour but de s’assurer que WordPress ne supprime pas les profils colorimétriques de vos images lorsqu’il recadre et redimensionne les vignettes. Sa fonction est de forcer WordPress à utiliser la librairie ImageMagick pour le traitement des images en lieu et place de GD tools, et il permet également de définir la qualité (donc la compression des images). Il est en effet pénible d’obtenir des miniatures d’images illisible parce que le contraste n’est plus correct à cause d’un profil d’image supprimé au recadrage.

Pour republier vos articles (images + légendes) sur les réseaux sociaux, vous pourrez utiliser l’excellent plugin (version gratuite allégée ou complète pour 49 $/an) Social Networks Auto-Poster for WordPress (SNAP), qui permet une gestion fine des paramètres d’exportation (mots clés, catégories, mode manuel, automatique ou semi-automatique, image par défaut etc.) et supporte la plupart des réseaux sociaux qui nous intéressent avec gestion du format de post : Facebook, Tumblr, Twitter, Google +, Deviant Art, Pinterest, Flickr, etc. Pour les réseaux non supportés (500px, notamment), vous pourrez encore passer par IfTTW soit depuis votre blog, soit depuis le réseau de votre choix.

Pour mettre en place facilement une newsletter email et interagir directement avec vos lecteurs sans la censure des réseaux sociaux, vous pourrez utiliser le plus simple des bons plugins de newsletter : Mailpoet Newsletters (anciennement Wisija). J’essaie, dans la mesure du possible, de poster une image par jour environ 3 jours par semaine, de façon à garder une interaction régulière.

Côté performances

On le répétera jamais assez, le temps de chargement d’un site influe directement sur l’expérience utilisateur, mais également sur le taux de rebond du site, et même depuis plus récemment sur le classement dans l’index Google. Or côté vitesse, avec un site rempli d’images, les photographes ne partent pas avantagés… Il va pourtant falloir s’en préoccuper.

Optimiser ses images

Sous Linux, afin d’optimiser en lot toutes les images d’un dossier, je me suis écrit le script suivant :

Il suffit de l’enregistrer dans un fichiercrop.sh et de l’appeler comme suit :sh crop.sh jpg pour que tous les fichiers dont l’extension est .jpg contenus dans le répertoire courant et ses sous-répertoires soient automatiquement optimisés pour le web en une seule commande (à adapter avec png, jpeg, etc. suivant les besoins). Il redimensionne les images pour qu’elles soient contenues dans une boîte de 2048×1600 pixels, ce qui est bien assez pour les meilleurs écrans modernes (le standard full HD est 1920×1080, tandis que les derniers écrans Retina 15 pouces montent à 2880×1800), augmente légèrement la netteté perceptuelle pour une meilleure lisibilité, et optimise la compression du jpeg. Il requiert ImageMagick et jpegoptim, faciles à trouver pré-compilés sur la plupart des distributions Linux.

2048px sur le plus grand côté est aussi le maximum permis sur Facebook pour la HD. Il est difficile de trouver le bon compromis entre qualité d’image et poids de fichier, surtout compte tenu de la variété des vitesses de connexion internet et des supports existants. Cette taille d’image convient au connexions relativement rapides et aux écrans HD, mais peut ralentir les téléphones.

Pour optimiser les images sans pertes directement sur votre serveur (et avec les mêmes utilitaires que ceux utilisés par mon script ci-dessus), vous pourrez installer le plugin EWWW Image Optimizer.

Utiliser le LazyLoad

Le LazyLoad (chargement paresseux) ou chargement à la demande permet de différer le chargement des images d’une page web pour ne les afficher que lorsque l’utilisateur les survole. Ceci a pour effet d’accélérer le chargement basique d’une page web (structure HTML), mais présente l’inconvénient d’afficher des espaces vides sur la page jusqu’au chargement complet des images. Cette technique repose sur des programmes javascript.

Il existe plusieurs plugins pour effectuer ceci, mais le meilleur que j’ai testé jusqu’à présent est WP Rocket (payant – 29€), qui ne s’arrête pas là puisqu’il effectue aussi la minification du CSS, HTML, javascript et la mise en cache des pages. Je me suis battu des années avec W3C Total Cache qui est une usine à gaz sans nom et buggué les trois quarts du temps, WP Rocket est simple et efficace, et mérite largement ses 30 €… Mon site est passé de 12 sec de temps de chargement à … moins de 2,5 sec en moyenne (divisé par 6). Sans commentaire… (je ne suis pas affilié).

Envoyer les images sur un CDN

Automattic, la société derrière WordPress, a lancé depuis plus de 4 ans un plugin fourre-tout nommé Jetpack, présenté sous forme de modules à activer séparément. Celui-ci a pour principale vocation de déporter certaines fonctionnalités sur les serveurs de WordPress.com, dont le CDN (Content Delivery Network) qui s’active via le module Photon. Il va envoyer les images de la bibliothèque de WordPress sur le serveur distant, et les servir redimensionnées, ce qui devrait faire gagner entre 0,5 et 1 s de temps de chargement suivant les cas et diminue le poids des pages parfois jusqu’à plusieurs Mo.

À noter que suivant la charge des serveurs de WordPress, il semble que les résultats fluctuent voire soient dégradés à certains moments de la journée. Photon donne des résultats mitigés également avec le LazyLoad, notamment pour les mises en page fluides (responsive) en causant des problèmes de hauteur des conteneurs HTML :

  1. si la hauteur du conteneur HTML (bloc div) dépend dynamiquement de la hauteur de son contenu (l’image), comme le contenu est chargé en différé, le paramètre hauteur n’existe pas au chargement de la page,
  2. or Photon utilise les paramètres de taille du conteneur pour charger l’image redimensionnée dynamiquement. Donc :
    1. soit on tombe dans une sorte de boucle infinie où la taille de l’image attend la taille du conteneur et réciproquement. C’est donc la miniature “fallback” qui est chargée, et elle n’est presque jamais de la bonne taille,
    2. soit le paramètre de largeur est tout de même passé à Photon qui charge la bonne image, mais elle a toutes les chances d’être plus haute que son conteneur car celui-ci a une taille préalablement définie par le navigateur.
  3. Il foit alors soit :
    1. spécifier en dur des hauteurs de conteneur et d’images fixes,
    2. charger à la demande les conteneurs avec leurs images en Ajax (infinite scroll),
    3. utiliser un code javascript pour redéfinir la hauteur des conteneurs HTML une fois les images chargées,
    4. renoncer au Lazy Load des images,
    5. renoncer à l’optimisation des images de Photon.

De plus, le cache de Photon n’expire jamais, ce qui signifie que si vous recadrez vos images ou vos miniatures, Photon continue de charger les versions originales (les premières enregistrées) et non les versions modifiées. Pour faire vider le cache des serveurs de WordPress, il faut contacter le support directement par email avec les URL concernées (long et pénible).

Attention à la boulimie de plugins

Un travers de WordPress est qu’on a vite tendance a abuser des plugins incroyables qui ajoutent des diaporamas aux effets spectaculaires, des gadgets, des effets visuels etc. Or ceux-ci chargent des images, des feuilles de style CSS et des programmes javascript (souvent n’importe comment), en présentant non seulement une menace pour la stabilité de votre site (gérer la compatibilité entre de nombreux plugins au gré des mises à jour est un casse-tête) mais aussi un impact négatif sur le temps de chargement des pages.

Donc :

  1. évitez les fonctions superflues, d’abord pour éviter les distractions visuelles, mais surtout pour limiter le nombre de requêtes HTML sur la page,
  2. bannissez les widgets et autres iframes de réseaux sociaux (boutons de partage, boutons de vote, compteurs de like et de reposts, badges de profils etc.) et préférez des partages par lien (voir en bas de cet article).

Pourquoi pas un système de booking ?

Une fonctionnalité que j’utiliserais certainement si j’étais professionnel serait la possibilité pour un client de bloquer directement sur mon site une plage horaire suivant mes disponibilités prédéfinies. Il existe un plugin couplé avec Google Agenda qui permet de gérer cela de façon – semble-t-il – assez intelligente (je n’ai pas testé) : Event Organizer. Là encore, il s’agit d’une base gratuite dont les fonctionnalités les plus intéressantes doivent être achetées séparément (dont la possibilité côté client de bloquer une plage horaire).

Conclusion

WordPress n’est pas fait pour servir de portfolio ou de galerie, mais il est tout de même possible de trouver des stratégies de contournement pour faire ce que l’on souhaite.

L’expérience montre toutefois qu’on a plutôt intérêt à se tourner vers des plugins et thèmes payants, car ils sont à la fois plus aboutis, plus complets, mais surtout plus fiables et plus robustes, pour un gain de temps substantiel à l’usage. La pertinence de WordPress + plugins peut donc être très sérieusement contestée par rapport à des plateformes payantes telles que Smugmug, 500px ou autres qui sont spécifiquement destinées aux photographes pour un tarif similaire, certaines embarquant même des parties privées destinées à la remise des photos aux clients, ou des système de vente de tirages et de licences de reproduction.

J’ai choisi cette option car j’ai de toute façon bâti une plateforme web maison et que je dispose des compétences pour la développer et l’administrer (et la sécuriser), mais ce n’est pas une option que je recommande à tout le monde, du moins si l’objectif cherché est de travailler proprement et d’éviter d’y passer un temps indécent.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

2016-10-14T18:22:00+00:0012 mai 2015|Catégories : Wordpress|Mots-clés : , , , , , , , |2 Commentaires

À propos de l'auteur :

J'écris parce que ça m'aide à réfléchir. Je publie pour que ça serve. Spécialiste calcul et modélisation thermodynamique chez Cellier Domesticus. Photographe. Pianiste. Développeur spécialisé en Python pour le calcul et la modélisation. Auteur de bouquins et de blog sur les sciences et la technologie. Expériences précédentes dans la fonction publique territoriale, les moteurs électriques industriels, les voitures solaires en fibre de carbone et le non-sens académique (maths sup, DUT).

2 Comments

  1. Ghislain 20 janvier 2016 à 12 h 24 min

    Bonjour
    merci pour cette mine d’informations.
    Pour un photographe, que pensez-vous des principaux thèmes (payants) style border, hiker, dorsey, focal, core, chocolate wp etc…
    Ces thèmes sont réputés spécialisés pour les photographes professionnels, qui ont donc des contraintes de réelles galeries pour présenter leurs travaux?
    Merci 😉

    • Aurélien 20 janvier 2016 à 14 h 58 min

      Bonjour Ghislain !

      Les thèmes pour photographes sont adaptés à la présentation de photos, galeries et portfolios, mais ne sont rien de plus que des interfaces (des façades) qui fournissent la mis en page pour le site web. L’organisation des images et du contenu en général (ce qui se passe sous le capot) reste du WordPress classique, c’est à dire pas optimisé pour des photographes et pensé surtout pour le contenu textuel. À moins que ces thèmes ne soient fournis avec des plugins spéciaux de gestion de galerie (et pas juste des mises en page de galerie), ce dont je doute.

      Après, présenter ses photos sur un site WordPress est tout à fait faisable, je le fais moi-même depuis 2 ans. Il faut juste garder à l’esprit que ce n’est pas la solution la plus efficace ni la plus pratique.

      Le fait est que si vos besoins sont juste limités à la photo, avec un portfolio, éventuellement une interface de remise des fichiers aux clients, vente de tirages et/ou de licences, etc. quitte à payer un thème pro (40 à 60$/6 mois de mises à jour + éventuellement des plugins eCommerce payants) et à vous embêter avec la configuration, autant passer directement par une plateforme dédiée à la photo comme Smugmug ou 500px ou Photoshelter ou d’autres (gratuit pour les usages basiques, environ 120-150$/an tout compris pour des usages pro).

Les commentaires sont fermés.

leo. dictum odio elit. mattis dolor. ut Donec id felis