Un Demi-Pixel Explique Pourquoi Votre Carrousel Paraît Flou
Découpez une photo large en quatre diapositives de carrousel et la première chose qui se produit est un calcul : la largeur divisée par quatre. Sur une photo de 1170 pixels cela fait 292,5 pixels par diapositive, et un demi-pixel n’est pas quelque chose qu’un canvas sache couper.
Ce qu’il fait à la place est la partie intéressante, et c’est pire qu’une couture de travers.
Ce qu’un navigateur fait d’un demi-pixel
À qui lui demande une tranche de 292,5 pixels, un canvas n’arrondit pas à 292 pour passer à la suite. Il rééchantillonne — il reconstruit chaque pixel de la tuile comme une moyenne pondérée de ses voisins, parce que la grille de pixels qu’on lui demande de produire ne coïncide plus avec celle qu’on lui a donnée.
C’est facile à mesurer. Construisez une source de rayures noires et blanches d’un pixel, coupez une tranche sur un pixel entier et une autre à 292,5, puis relisez les pixels :
| Tranche | Pixels revenus | Contraste du bord |
|---|---|---|
| Pixel entier | 0, 255, 0, 255 | 255 — exact |
| 292,5 | 111, 143, 111, 143 | 32 |
Le noir et le blanc sont revenus en deux gris séparés de onze pour cent. Deux cent cinquante-cinq marches de contraste de bord sont devenues trente-deux — quatre-vingt-sept pour cent, disparus.
Et cela ne s’arrête pas à la couture. La tuile entière est reconstruite, donc chaque détail fin à l’intérieur s’adoucit d’autant. Sur des rayures c’est flagrant. Sur une photographie vous ne verrez rien d’aussi net ; vous verrez un carrousel légèrement plus flou que l’image de départ, sans rien à l’écran pour vous dire pourquoi.
Le correctif est arithmétique, pas un filtre de netteté
Rien ici n’a besoin d’être corrigé après coup. La tuile doit seulement tomber sur des pixels entiers, et elle le peut, si la largeur est rendue divisible avant toute coupe.
Prenez la plus grande largeur en pixels entiers qui divise juste par le nombre de diapositives, centrez-la et coupez là. Chaque tranche commence et finit alors sur un entier, donc rien n’est rééchantillonné — et toutes les diapositives sortent à la même taille, ce qu’un carrousel exige de toute façon, puisque toutes partagent un seul rapport.
Le coût : quelques pixels de largeur. Mesuré sur cinq largeurs de téléphone courantes :
| Largeur de la photo | Diapositives | Tranche naïve | Tranche entière | Pixels abandonnés |
|---|---|---|---|---|
| 1170 | 4 | 292,5 | 292 | 2 |
| 1080 | 3 | 360 | 360 | 0 |
| 4032 | 3 | 1344 | 1344 | 0 |
| 3024 | 5 | 604,8 | 604 | 4 |
| 1290 | 7 | 184,29 | 184 | 2 |
Quatre pixels au maximum, et aucun sur les deux largeurs qui divisent déjà juste. C’est tout l’échange : jusqu’à quatre pixels de largeur, contre chaque pixel de chaque tuile reconstruit à partir de ses voisins.
La règle générale : la perte vaut au plus le nombre de diapositives moins un. Dix diapositives peuvent coûter neuf pixels d’une photo large de plusieurs milliers.
L’autre chose qui décide de ce qui survit
Toutes les diapositives d’un carrousel partagent un rapport. Cette seule contrainte décide de la largeur de bande utilisable, car la bande vaut le rapport de la diapositive multiplié par leur nombre :
- Carré 1:1 sur trois diapositives demande une bande 3:1.
- Portrait 4:5 sur trois diapositives demande 2,4:1 — des diapositives plus hautes, donc une bande plus étroite les remplit.
- Paysage 1,91:1 sur trois diapositives demande 5,73:1, ce que presque aucune photographie n’est.
Une photo 16:9 fait 1,78:1. Face à une cible de 2,4:1 elle n’est pas trop étroite — elle est trop basse, donc les côtés sont rognés pour que la proportion tombe juste. Face à 3:1 le rognage est plus sévère. C’est pourquoi des diapositives portrait gardent davantage d’une photo ordinaire que des carrées — l’inverse de ce que la plupart des gens supposent.
Ce que cela change au moment de publier
- Redimensionnez la photo à une largeur divisible par votre nombre de diapositives si chaque pixel compte — 1080 pour trois, 1200 pour quatre, 1500 pour cinq.
- Sinon, un bon découpeur doit abandonner deux ou trois pixels plutôt que couper une tranche fractionnaire. La différence est invisible en largeur et très visible en netteté.
- Choisissez portrait 4:5 pour garder le maximum de la photo, carré pour un fil varié, et paysage uniquement pour de vraies panoramiques.
- Des coutures exactes au pixel, c’est ce qu’un découpeur contrôle. Ce qu’il ne contrôle pas, c’est l’application : certains fils ajoutent un petit écart ou un coin arrondi entre les diapositives, donc une arête franche traversant une couture peut encore se lire comme un joint, si exacte que soit la coupe.
Essayez
Notre découpeur de carrousel fait l’arithmétique ci-dessus : il rogne à une largeur divisible, coupe sur des pixels entiers, et vous dit exactement combien de pixels il a abandonnés et à quelle taille chaque diapositive est sortie. Tout se passe dans votre navigateur — la photo n’est jamais envoyée.
Si la photo n’a pas encore la bonne largeur, le redimensionneur d’images s’en charge d’abord, et le vérificateur de zone sûre montre ce que l’application elle-même recouvrira une fois publié.
FAQ
Pourquoi un demi-pixel compte-t-il si je n’en vois même pas un ?
Parce que le navigateur ne le jette pas — il reconstruit toute la tuile autour. Le coût mesuré sur une arête franche est passé de 255 marches de contraste à 32, et cet adoucissement touche chaque pixel de la diapositive, pas seulement la couture.
Ne puis-je pas simplement accentuer les diapositives ensuite ?
L’accentuation rend du contraste aux bords qu’elle sait trouver ; elle ne récupère pas un détail moyenné, et elle ajoute ses propres halos. Couper sur des pixels entiers coûte quelques pixels de largeur et ne demande aucune correction.
À quelle largeur redimensionner avant de découper ?
N’importe quel multiple du nombre de diapositives. 1080 se divise par trois, quatre, cinq, six, huit et neuf. 1200 se divise par trois, quatre, cinq, six, huit et dix. Si vous connaissez déjà le nombre, arrondissez simplement la largeur au multiple inférieur le plus proche.
Cela vaut-il en dehors d’Instagram ?
Cela vaut partout où une image est coupée en morceaux égaux, car c’est une propriété du canvas et non de l’application. Les carrousels sont là où on le remarque, parce que les diapositives se retrouvent côte à côte et invitent à la comparaison.
Les coutures seront-elles vraiment invisibles ?
Les pixels s’aligneront exactement. Que le joint passe inaperçu dépend aussi du fil, qui peut ajouter un écart ou un coin arrondi entre les diapositives, et de l’image : du détail sur la couture la cache, un aplat et des lignes droites non.