Un panorama posté sur Instagram comme une seule image se transforme en une fine bande dans le flux Le même panorama coupé en trois ou quatre diapositives et posté comme un carrousel remplit l'écran, et le glissement se déplace sur l'image comme si vous panoramiez une caméra L'effet est simple à décrire et facile à se tromper légèrement : une diapositive à un pixel, ou une dernière diapositive plus étroite que le reste, et le balayage saute.
Ce guide explique comment fonctionne un carrousel sans couture, combien de diapositives un panorama donné a besoin, à quoi ressemble l'arithmétique de coupe avec le nombre réel de pixels et comment utiliser le Générateur de défilement de carrousel sur Toolz pour effectuer le découpage dans votre navigateur.
tl;dr : Un carrousel sans couture est une image large découpée en diapositives égales qui partagent exactement leurs bords, affichées dans l'ordre de sorte que le glissement fait défiler l'image Le nombre de diapositives est le panorama' ; s rapport hauteur/largeur divisé par le rapport hauteur/largeur slide' ; s : un panorama 3 :1 est composé de 3 diapositives carrées ou de 4 diapositives portrait (4 :5). Le générateur de volutes de carrousel suggère que compter, recadre l'image exactement à autant de diapositives et n°39 ; valeur de largeur, coupe les limites du pixel entier et exporte des diapositives de 1 080 px de large sous forme de JPEG, PNG ou WebP dans un zip numéroté. Il s'exécute côté client, rien de téléchargé, gratuit, pas d'inscription.
Qu'est-ce qu'un carrousel Instagram transparent ?
Un carrousel sans couture est un poteau de carrousel dont les diapositives sont des pièces consécutives d'une image Au lieu de passer d'une photo à l'autre, le spectateur glisse et l'image continue à travers l'espace Les photographes de paysage l'utilisent pour des panoramas, les designers l'utilisent pour de longues illustrations, et les marques l'utilisent pour des chronologies ou des gammes de produits qui traversent plusieurs images.
Cela fonctionne parce qu'un carrousel montre des diapositives côte à côte dans une bande, et chaque diapositive d'un poteau a la même taille Si la diapositive 1 se termine à la colonne de pixels 1 200 de l'original et que la diapositive 2 commence à la colonne 1 200, la jointure est invisible Si la diapositive 2 commence à la colonne 1 198 ou 1 203, une diapositive de l'image se répète ou disparaît, et sur un horizon droit ou un bord de construction qui apparaît comme une marche visible.
Deux règles de plate-forme façonnent tout le reste Au moment d'écrire ces lignes, Instagram accepte jusqu'à 20 diapositives dans un carrousel, et toutes les diapositives d'un message partagent le rapport hauteur/largeur du premier ; une diapositive de forme différente est recadrée pour correspondre Les plates-formes modifient ces détails de temps en temps, alors traitez-les comme un comportement actuel plutôt que comme une spécification fixe.
Quelle forme de diapositive choisir ?
Portrait 4 :5 est le choix habituel, car c'est la forme la plus haute que le flux Instagram affiche et prend le plus d'écran sur un téléphone Square et paysage sont là quand la composition leur convient.
Le générateur propose les trois formes de carrousel, chacune exportée de 1080 px de large :
| Forme coulissante | Taille de sortie | Rapport (largeur/hauteur) | Diapositives pour un panorama 3 :1 | Diapositives pour un panorama 4 :1 |
|---|---|---|---|---|
| Portrait (par défaut) | 1080 x 1350 | 0.8 | 4 | 5 |
| Carré | 1080 x 1080 | 1.0 | 3 | 4 |
| Paysage | 1080x566 | 1.91 | 2 | 2 |
Le nombre de diapositives dans le tableau provient d'une division, couverte dans la section suivante Le motif à remarquer est que les diapositives plus étroites ont besoin de plus d'entre elles pour couvrir la même largeur Les diapositives de portrait montrent la plus grande hauteur du panorama par diapositive, ce qui est généralement ce qui fait qu'une photo de paysage semble grande, mais elles ont besoin de plus de glissements Les diapositives de paysage montrent un panorama dans des cadres moins nombreux et plus courts et conviennent à des images très larges et peu profondes telles que les skylines.
De combien de diapositives un panorama a-t-il besoin ?
Divisez le rapport hauteur/largeur panorama' ;s par le rapport hauteur/largeur slide' ;s, puis arrondissez à la diapositive entière la plus proche.
slides = round( (image width / image height) / (slide width / slide height) )
Pour un panorama 3 :1 dans les diapositives de portrait : 3 / 0,8 = 3,75, qui arrondit à 4. En diapositives carrées : 3 / 1 = 3. Dans les diapositives de paysage : 3 / 1,908 = 1,57, qui arrondit à 2.
Pour un panorama 4 :1, comme une image 6000 x 1500 : 4 /0,8 = 5 diapositives de portrait, 4 /1 = 4 diapositives carrées et 4 / 1,908 = 2,1, donc 2 diapositives de paysage.
le outil Panorama à carrousel exécute ce calcul dès que vous ajoutez une image, serre la réponse entre 1 et 10 et y règle le curseur Diapositives avec une ligne telle que " ; 4 correspond le plus à votre image' ; proportions s." ; Le curseur lui-même va de 2 à 10. une fois que vous le déplacez, la suggestion cesse de passer outre à votre choix ; ajouter une nouvelle image ou choisir une forme de diapositive différente ramène la suggestion.
Le décompte se divise rarement parfaitement, donc quelque chose doit donner. Arrondir à plus de diapositives coupe un peu du haut et du bas du panorama Arrondir à moins de diapositives coupe à partir de la gauche et de la droite Le générateur fait cette garniture une fois, centrée, avant de couper, c'est pourquoi chaque diapositive sort de la même taille.
Comment l'outil coupe-t-il les glissières sans couture ?
Cela fonctionne en trois étapes et chacune existe pour arrêter un type spécifique de couture.
Étape 1 : recadrer la bande. Les diapositives forment ensemble une longue bande dont le rapport est le rapport de diapositives multiplié par le nombre de diapositives Pour 4 diapositives de portrait qui est de 1080 x 4 /1350 = 3,2 L'outil prend la plus grande région centrée de l'image avec exactement ce rapport Si l'image est plus large que la bande, les côtés sont coupés ; s'il est plus haut, le haut et le bas sont coupés.
Étape 2 : diviser la bande en colonnes de pixels entiers. La largeur de la bande est arrondie à un nombre entier de pixels, divisé par le nombre de diapositives, et les éventuels pixels restants sont distribués un à la fois aux diapositives principales Une bande de 3 199 px en 3 diapositives devient 1 067 + 1 066 + 1 066 Les colonnes sont consécutives, donc chaque diapositive commence exactement sur le pixel après la fin de la précédente Aucune colonne n'est comptée deux fois et aucune n'est sautée.
Étape 3 : mettez à l'échelle chaque diapositive à la taille de sortie. Chaque colonne est dessinée sur un canevas à la taille prédéfinie complète, 1080 x 1350 pour le portrait, à l'aide du navigateur' ; canevas drawImage opération définie dans le Norme HTML WHATWG(, avec un lissage d'image de haute qualité).
Pourquoi ne pas arrondir chaque diapositive' ; s position indépendamment ? Parce que les limites fractionnaires dérivent Si une bande a une largeur de 3 201 px et que 4 diapositives sont calculées comme 800,25 px chacune, arrondir chaque début et chaque largeur par elle-même peut mettre une diapositive' ; son bord droit un pixel au-delà de la diapositive suivante' ; son bord gauche L'étalement du reste à travers les diapositives principales maintient chaque limite un entier et chaque diapositive dans un pixel source des autres Dans le cas 1 067 contre 1 066, qu'un pixel source ne change pas l'échelle horizontale de la valeur.
Un exemple travaillé avec des comptes de pixels réels
Prenez un panorama 4000 x 1333, un rapport hauteur/largeur de 3,0008, et choisissez des diapositives de portrait.
Le décompte suggéré. 3,0008 / 0,8 = 3,751, qui arrondit à 4 diapositives.
La bande pour 4 diapositives. Le rapport de bande est de 3,2, et le rapport d'image de 3,0008 est inférieur à cela, donc l'image est relativement plus haute que la bande L'outil conserve la largeur complète de 4000 px et la hauteur de garniture : 4000 /3,2 = 1 250 px Cela supprime 83 px, environ 41,5 px du haut et 41,5 px du bas.
Les diapositives. 4 000 /4 = 1 000 px chacun sans reste, donc quatre tranches de 1 000 x 1 250, chacune augmentée de 1,08 à 1 080 x 1 350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
Choisir 3 diapositives à la place. Faites glisser le curseur jusqu'à 3 et le rapport de bande tombe à 2,4. maintenant l'image est plus large que la bande, donc l'outil garde la pleine hauteur de 1 333 px et la largeur des garnitures : 1 333 x 2,4 = 3 199,2 px, arrondie à 3 199. environ 400 px se détache de chaque côté Divisé en 3, soit 1 067 + 1 066 + 1 066 px, donc la première diapositive obtient le pixel restant.
Le pousser trop loin. À 6 diapositives le rapport de bande serait de 0,8 x 6 = 4,8, beaucoup plus large que l'image Le générateur montre un avertissement lorsque le rapport image' ; s tombe en dessous de 75 % du rapport de bande Pour cette image, 0,8 x 6 x 0,75 = 3,6, et 3,0 est inférieur à 3,6, donc la page dit : " ; Cette image n'est pas assez large pour 6 diapositives à cette forme, donc chaque diapositive sera recadrée en haut et en bas dur." ; à 5 diapositives le seuil est de 3,0 et l'image se dégage juste.
Un deuxième exemple montre un panorama qui tient exactement Une image de 6000 x 1500 est 4 :1 Dans les diapositives de portrait, la suggestion est 4 /0,8 = 5, le rapport de bande est 5 x 0,8 = 4,0, et rien n'est coupé du tout : cinq tranches de 1200 x 1500, chacune réduite de 0,9 à 1080 x 1350. Passez aux diapositives carrées et la suggestion est 4, encore une fois sans garniture : quatre tranches de 1500 x 1500, échelonnées à 1080.
Comment faites-vous le carrousel étape par étape ?
- Ajouter le panorama. Ouvrez le Séparateur de carrousel Instagram et déposez une image, cliquez pour parcourir, ou collez-en une dans le presse-papiers Toute image que le navigateur peut décoder fonctionne, ce qui signifie en pratique PNG, JPEG, WebP, GIF et AVIF.
- Choisissez la forme de la diapositive. Portrait 4 :5 est la valeur par défaut La note sous le sélecteur reformule à quoi sert la forme.
- Vérifiez le nombre de diapositives. Acceptez la suggestion ou déplacez le curseur La bande d'aperçu redessine immédiatement, et l'en-tête affiche la sortie, par exemple " ; 4 x 1080x1350" ;.
- Choisissez un format et téléchargez. Appuyez sur " ; Télécharger les 4 sous forme de zip" ; pour l'ensemble, ou utilisez le " ; Glissière 1" ;, " ; Glissière 2" ; boutons pour enregistrer des diapositives simples.
Les fichiers sont nommés à partir de votre nom de fichier d'origine avec un numéro zéro : harbor.jpg se transforme harbor-01.jpeg, harbor-02.jpeg et ainsi de suite à l'intérieur harbor-carousel.zip. Le remplissage maintient les diapositives dans l'ordre de balayage dans n'importe quel gestionnaire de fichiers, ce qui est important lorsque vous les sélectionnez toutes sur votre téléphone La bibliothèque de zip se charge uniquement lorsque vous appuyez sur le bouton zip, de sorte que la page elle-même reste légère.
Téléchargez les diapositives sur Instagram dans l'ordre des numéros sous la forme d'une seule publication carrousel. Les publier dans le désordre est le moyen le plus courant pour qu'un ensemble correct de diapositives finisse par paraître cassé.
Faut-il exporter JPEG, PNG ou WebP ?
JPEG est le choix par défaut et le bon choix pour les photographies Instagram ré-encode les téléchargements en tant que JPEG de toute façon, donc un fichier sans perte achète un téléchargement plus important et rien de visible à la fin La compression JPEG est définie dans Recommandation UIT-T T.811, et le générateur code à une qualité de 0,92.
La PNG est sans perte, spécifiée par le Recommandation W3C PNG« Et convient aux panoramas qui sont des illustrations, des diagrammes ou contiennent du texte, où les artefacts JPEG sur les bords durs s'afficheraient avant Instagram' ; sa propre compression en ajoute davantage ».
WebP donne les plus petits fichiers de qualité similaire et utilise également 0,92 pour son encodage avec perte C'est un choix judicieux pour les diapositives dirigées ailleurs qu'Instagram, comme une galerie de site Web.
Si vous avez besoin des diapositives dans un autre format par la suite, ou d'un dossier de celles-ci converti en masse, le guide de conversion du format de l'image couvre ce qui change entre JPG, PNG et WebP et quand chacun en vaut la peine.
Le fractionnement réduira-t-il la qualité de l’image ?
La coupe ne ; la mise à l'échelle peut. Chaque diapositive est prise à la source à pleine résolution, puis mise à l'échelle à 1080 px de large.
Lorsqu'une tranche est plus large que 1080 px, comme dans l'exemple 6000 x 1500 où chaque tranche est de 1200 px, la diapositive est réduite, ce qui ne perd aucun détail visible Lorsqu'une tranche est plus étroite que 1080 px, la diapositive est mise à l'échelle et aura l'air plus douce L'image 4000 x 1333 en 4 diapositives de portrait donne des tranches de 1000 px, un léger agrandissement de 1,08 x. Une image large de 2000 px divisée en 5 diapositives donne des tranches de 4000, un look soft phone, agrandi 2000000, un téléphone agrandi et un soft.
Une règle empirique découle de l'arithmétique : pour les diapositives nettes, la source doit avoir au moins 1080 px de large par diapositive, donc 4 320 px pour 4 diapositives et 5 400 px pour 5. si un panorama est plus petit que cela, moins de diapositives auront l'air plus nettes. Pour en savoir plus sur les raisons pour lesquelles l'agrandissement ne peut pas ajouter de détails, consultez le guide redimensionnement des images sans perte de qualité(en), qui passe par la réduction d'échelle, la mise à l'échelle et le rééchantillonnage.
Qu'est-ce qui cause une couture visible, et comment la réparer ?
La plupart des coutures proviennent de l'une des cinq causes et le générateur supprime les deux premières.
| Symptôme | Cause probable | Correction |
|---|---|---|
| Une fine bande répétée ou manquante au niveau d'une jointure | Limites de tranches fractionnaires arrondies indépendamment | Utilisez le découpage en pixels entiers, comme le fait le générateur |
| La dernière diapositive semble étirée ou coupée court | Pixels restants déversés sur une diapositive | Étalez le reste sur les diapositives principales |
| Glisse hors séquence | Téléchargé dans le mauvais ordre | Publier dans l'ordre des numéros de fichier, 01 en premier |
| Une diapositive s'est recadrée différemment des autres | Ratios d'aspect mixtes en un seul poste | Exportez chaque diapositive de la même forme |
| Sujet coupé au milieu d'un visage ou d'un signe | Terres limites glissantes sur le sujet | Modifiez le nombre de diapositives pour qu'une limite se déplace |
La dernière ligne est un problème de composition, pas technique Avec 4 diapositives, les limites se situent à 25 %, 50 % et 75 % de la bande ; avec 3 diapositives, à 33 % et 67 %. Si un visage person' ; s atterrit exactement sur une jointure, une diapositive plus ou moins déplace généralement la coupe quelque part inoffensivement Les visages et le texte sur une jointure survivent au glissement mais semblent gênants chaque fois qu'un spectateur s'arrête sur une seule diapositive.
Quelles sont les limites de l'outil ?
Le curseur va de 2 à 10 diapositives Instagram permet plus, mais au-delà de dix un panorama typique n'a plus assez de largeur pour donner à chaque diapositive un vrai détail, et chaque diapositive devient une bande étroite qui arrête la lecture en tant qu'image.
La culture est toujours centrée Si la partie importante du panorama se trouve près du bord supérieur ou inférieur et de la hauteur de coupe choisie, changez le compte ou recadrez d'abord la source avec le recadrage d'images sur les réseaux sociaux(en), qui vous permet de choisir le point focal.
L'entrée doit être un fichier que le navigateur identifie comme une image et peut décoder. Un fichier qui n'est pas une image est refusé avec un message le nommant, et une image corrompue ou dans un format que le navigateur ne peut pas lire obtient " ; Cette image n'a pas pu être lue." ; les photos HEIC d'un iPhone ne sont pas décodées par la plupart des navigateurs, alors convertissez-les d'abord.
Comme chaque outil du site, les téléchargements comptent pour une limite d'utilisation quotidienne Il n'y a pas de filigrane et aucun compte nécessaire.
Le panorama est-il téléchargé n'importe où ?
Non. L'image est décodée, recadrée, découpée en tranches et codée sur un canevas HTML dans votre navigateur, et le zip est assemblé localement Rien n'est envoyé à un serveur, stocké ou enregistré, et la page continue de fonctionner avec le réseau déconnecté une fois chargée. Cela compte pour les photos de produits inédites ou le travail client que vous n'avez pas encore publié.
Outils connexes pour les poteaux de carrousel
Le générateur de parchemin se trouve aux côtés d’une poignée d’autres outils d’image conçus pour les publications sociales, toutes côté client.
le recadrage d'images sur les réseaux sociaux recadre une seule image à quinze tailles de plate-forme avec une grille focale à neuf points Le générateur mat met une image non carrée sur un carré ou un portrait mat pour que l'ensemble de l'image survive au flux, qui convient à un poteau de couverture qui montre le panorama complet petit avant le carrousel Le générateur de cartes photo crée des cartes de devis et des graphiques de style actualité à partir de modèles, et le filigrane ajoute un logo ou un filigrane de signature, dans un coin ou carrelé, avant de publier Chaque outil de l'ensemble est répertorié sur le pôle d'outils d'image sociale.
