Contexte

Définition de pixels (px)

Les images que vous voyez sur un écran d’ordinateur sont composées de petits points disposés les uns à côté des autres. Comme le mot « point » est déjà utilisé en anglais pour mesurer des distances, une unité de mesure spécifique a été créée pour désigner la taille des images : les pixels. Les pixels sont donc l’unité de mesure utilisée pour déterminer la largeur et la hauteur d’une image à l’écran.

Quand SPIP vous dit que l’image doit faire au minimum 1920 × 0, ça veut dire :

1. une largeur d’au minimum 1920 px
2. une hauteur d’au minimum 0 px (toute valeur plus grande que 0 est donc valable)

Logos

Dans SPIP, les logos sont un élément particulièrement important pour accompagner la publication d’un contenu.

Avec le squelette SoyezCréateurs, c’est d’autant plus important que les logos peuvent être affichés sur toute la largeur de l’écran et dans les réseaux sociaux (cf : Publications de qualité sur les réseaux sociaux avec SoyezCréateurs ).

⇒ C’est pourquoi, dans un souci de direction artistique, SoyezCréateurs force désormais la taille minimum des logos à 1920 pixels (px) de large.

Images

Pour les images, pas de taille minimum, mais un redimensionnement automatique des images plus grandes que 3840 px.

Où trouver des images de 1920 px ?

Ma principale source d’images libres de droit de cette taille est Pixabay.

Par exemple, le logo de cet article est disponible ici.

Vous pouvez consulter une liste de sites fournissant des images libres de droit.

Et si je veux agrandir ma petite image ?

Avec un logiciel de retouche d’image

Pour cela, il faut utiliser un logiciel de retouche d’image [1].

Et il faut trouver avec ce logiciel les commandes :

• « redimensionner » l’image
• en « conservant les proportions »
• et en fixant une « largeur » à 1920 px

Selon la méthode de redimensionnement (échantillonnage), vous obtiendrez alors une image :

• floue/moins nette
• pixelisée (les pixels originaux auront été grossis et leur aspect carré saute alors aux yeux)

⇒ Faites ça si vous ne pouvez vraiment pas faire autrement.

Avec un logiciel dédié à l’agrandissement intelligent d’images

Vous pouvez aussi utiliser

• Upscayl basé sur des outils d’intelligence artificielle et capable d’inventer des détails crédibles en l’agrandissant.
• Ou SuperImage (idem)

⇒ Résultats impressionnants, mais calcul long !

Indiquer le point d’intérêt de l’image

En mode Cognac, SoyezCréateurs pourra afficher le logo :

• en mode portrait recadré sur la page d’accueil :

  

• en mode panorama en haut de l’article :

  

Il est donc important de spécifier le point d’intérêt de l’image qui sera conservé quel que soit le recadrage.

C’est à ça que sert la petite croix affichée par-dessus toutes les images que vous joignez à un article (logo et illustrations) :

Il suffit de maintenir cliqué sur cette croix pour la déplacer à l’endroit voulu.

Mais est-ce que ça n’est pas un problème d’envoyer de trop grosses images au navigateur ?

Avec SPIP, l’image envoyée au navigateur est celle de la bonne taille, redimensionnée et recadrée du côté du serveur avant d’être envoyé au navigateur.

Donc, vous avez tout intérêt à avoir de grandes images, réduites pour l’affichage par SPIP, mais stockées de grande qualité pour permettre de faciliter les évolutions futures de votre site.

Choisir quand même une qualité inférieure ?

Oui, c’est possible depuis la version 5.2.42 de SoyezCréateurs qui fournit une option [2] pour pouvoir dégrader la qualité des logos en choisissant d’en mettre de plus petits.

Cette possibilité est cependant vivement déconseillée.

Nouveautés imposées par SPIP 4

Cela fait partie des pertes et profits de la version 4 de SPIP : la perte de la distinction entre illustrations et portfolio.

Maintenant, tout ce qui n’est pas inséré dans le texte par un appel <imgNNN...> ou <docNNN...> est dans la galerie en bas des articles.

⇒ Toutefois, SoyezCréateurs a quand même gardé une différence de comportement entre :

• img : pas de légende
• doc : le titre et descriptif en légende (documentant l’image).

Et a retrouvé la distinction entre Porfolio et Illustrations !