Un ami m'a envoyé une photo de téléphone et une capture d'écran et leur a demandé une image pour une liste. J'ai déposé les deux dans une toile à leur propre taille et j'ai obtenu quelque chose que personne n'accepterait : une photo 4032 par 3024 avec une capture d'écran étroite de 1170 par 2532 à côté, une bande de blanc vide sous la capture d'écran, et le tout 5202 pixels de large. Les photos étaient bien. L'arrangement était le problème, et c'est le même problème à chaque fois, car les deux fichiers ne partagent presque jamais une dimension. Décider quel axe doit aligner est l'ensemble du travail, et tout le reste en découle.
tl;dr : La fusion d'images est une décision de mise à l'échelle avant d'être une décision de dessin. Side by side correspond à chaque image à la hauteur de la plus haute, empilant les allumettes à la largeur la plus large, et une grille correspond aux deux, c'est pourquoi une grille doit également choisir entre recadrer et laisser de l'espace. Mesuré sur une photo 4032x3024 à côté d'une capture d'écran 1170x2532 : Side by Side produit une toile 5429x3024 avec la capture d'écran agrandie à 1397x3024, l'empilement produit une toile 4032x11750 avec la capture d'écran agrandie d'un facteur de 3,4 et un réseau à deux cellules en mode de couverture conserve 70,2 % de la photo et 49,4 % de la capture d'écran. Choisissez le mode par lequel vous souhaitez conserver l'axe. le Fusion d'images Dessine tout dans l'onglet du navigateur, donc rien n'est téléchargé.
Pourquoi les images fusionnées semblent-elles fausses ?
Parce que les entrées sont des formes différentes et que la plupart des outils les dessinent à la taille qu'ils arrivent.
Une photo de téléphone est 4032 par 3024 dans le paysage. Une capture d'écran du téléphone est de 1 170 par 2 532. Une numérisation est ce que le scanner a décidé. Placez-en deux dans une rangée à la taille native et l'un d'eux domine l'autre, avec un espace mort remplissant tout ce qui reste de la dimension la plus haute. Cela se lit comme une erreur plutôt qu'une mise en page, même à quelqu'un qui ne pouvait pas vous dire pourquoi.
La solution est de normaliser, et la seule question est sur quel axe. Dans une rangée, les hauts et les bas sont ce que l'œil suit, de sorte que les hauteurs doivent correspondre et chaque image prend la largeur de son propre rapport d'aspect. Dans une colonne, les bords gauche et droit sont la ligne, de sorte que les largeurs correspondent à la place. Une grille a les deux arêtes à maintenir, elle doit donc correspondre aux deux, et c'est le mode où quelque chose doit donner.
C'est la conception entière. Tout en dessous est ce qui en découle.
Que fait côte à côte à une capture d'écran haute ?
Il l'agrandit, parfois plus que vous ne le souhaitez.
Voici le résultat mesuré pour la paire ci-dessus, tiré du code de mise en page plutôt qu'estimé :
| mode | toile | Photo dessinée à | Capture d'écran dessinée à |
|---|---|---|---|
| côté à côté | 5429 x 3024 | 4032 x 3024 | 1397 x 3024 |
| empilé | 4032 x 11750 | 4032 x 3024 | 4032 x 8726 |
Side by side correspondait aux deux à 3024, la plus haute des deux hauteurs, de sorte que la capture d'écran est passée de 2532 à 3024 pixels. Il s'agit d'un agrandissement de 19 %, qui sur une capture d'écran de texte est visible si vous le recherchez et invisible si vous ne le faites pas.
L'empilement est le dramatique. La correspondance avec l'image plus large a fait de 1170 à 4032 pixels la capture d'écran, un facteur de 3,4, et la toile est sortie de 11 750 pixels. La capture d'écran est désormais l'objet dominant dans une image très longue, et chaque lettre a été augmentée de plus de trois fois, ce qu'aucun rééchantillonnage ne rend net.
La leçon n'est pas qu'un seul mode est meilleur. C'est que le mode décide sur quelle image est agrandie, alors choisissez celle sur laquelle vos images sont déjà d'accord. Deux photos de téléphones dans le paysage partagent une hauteur et passent côte à côte sans aucune mise à l'échelle. Deux captures d'écran du même téléphone partagent une largeur et se cumulent parfaitement.
Quand faut-il empiler au lieu d'aller côte à côte ?
Lorsque le contenu est lu vers le bas, ou lorsque les images ont déjà la même largeur.
L'empilement est le bon pour une séquence : trois captures d'écran d'un flux de paiement, un avant et un après où l'après appartient en dessous, une conversation capturée par parties. C'est aussi juste chaque fois que les entrées proviennent du même appareil dans la même orientation, car les largeurs correspondent déjà et rien n'est mis à l'échelle.
Side by side est juste pour la comparaison, où l'œil doit se déplacer plutôt que vers le bas, et pour tout ce qui sera consulté en ligne dans un message, car une image 4032 par 11 750 est défilée plutôt que vue.
Il y a une raison pratique de préférer la rangée aussi. La plupart des endroits qui acceptent une image l'affichent à une largeur fixe, donc une fusion très haute se rétrécit en une extrémité. Une rangée de trois photos à la même hauteur reste lisible à cette largeur d'une manière qu'une colonne de trois ne fait jamais.
Qu'est-ce qu'une grille a pour décider qu'une bande ne le fait pas ?
Que faire d'une image qui n'est pas la forme de la cellule, ce qui est une question qu'une bande n'a jamais à se poser car elle n'épingle qu'un seul axe.
Une grille goupille les deux. Chaque cellule a la même taille et une photo 4:3 ne convient pas à une cellule en forme de capture d'écran 9:19.5. Il n'y a que deux réponses honnêtes, et l'outil vous demande de choisir entre elles :
- contenir S'adapte à l'ensemble de l'image à l'intérieur de la cellule et laisse de l'espace autour d'elle. Rien n'est perdu et la grille semble légèrement irrégulière car chaque image se trouve dans son propre patch d'arrière-plan.
- Couverture Remplit complètement la cellule en prenant une récolte centrée hors de l'image. La grille semble uniforme et les bords des images ont disparu.
Ni l'un ni l'autre n'est correct en général Contenir est le bon pour les captures d'écran, les documents, les diagrammes et tout ce qui contient des informations. La couverture est la bonne pour les visages, les paysages et la texture, où une culture centrée est ce qu'une personne aurait fait de toute façon.
La valeur par défaut ici est la couverture, car la raison la plus courante de créer une grille est qu'elle doit être lue comme un seul objet.
Combien de photo jette la couverture ?
Plus que ce que les gens attendent lorsque les entrées sont des formes différentes, et rien du tout lorsqu'elles correspondent.
La taille de la cellule est la moyenne des entrées, de sorte que deux images très différentes ne produisent une cellule qui ne convient ni l'un ni l'autre. Pour la paire de photos et de captures d'écran, dans une grille à deux cellules, le code de mise en page rapporte exactement ce qui est dessiné :
| imaginer | Natif | Région source dessinée | Pixels conservés |
|---|---|---|---|
| Photo | 4032 x 3024 | 2831 x 3024 | 70,2 % |
| capture d'écran | 1170 x 2532 | 1170 x 1250 | 49,4 % |
La moitié de la capture d'écran a disparu. Non compressé, non escaladé : recadré, haut et bas, car une grande image étroite forcée dans une cellule presque carrée doit perdre ses extrémités. Si cette capture d'écran était un reçu, le total n'est plus dans l'image.
La même opération sur douze photos de la même caméra ne recadre rien, car chaque entrée a déjà la forme de la cellule. La couverture est bon marché lorsque les entrées sont d'accord et coûteuses lorsqu'elles ne le font pas, et l'outil ne peut pas dire dans quel cas vous vous trouvez. Changez pour contenir le moment où vos images sont différentes de formes et les bords sont importants.
Combien de colonnes une grille devrait-elle avoir ?
Suffisamment pour que le résultat soit plus large que grand, ce qui, pour la plupart des comptes, signifie la racine carrée arrondie vers le bas.
Les lignes s'enchaînent des colonnes et du décompte, et l'arithmétique est impitoyable. Douze images en quatre colonnes sont composées de trois lignes complètes. Sept images en trois colonnes sont composées de trois lignes avec deux cellules vides à la fin, que la mise en page laisse comme arrière-plan plutôt que d'étirer la dernière image pour les remplir.
| Images | colonnes | Résultat |
|---|---|---|
| 4 | 2 | 2 x 2, pas de lacunes |
| 6 | 3 | 2 x 3, pas d'écart |
| 7 | 3 | 3 lignes, deux cellules vides |
| 9 | 3 | 3 x 3, pas d'écart |
| 12 | 4 | 3 x 4, pas de lacunes |
Un décompte qui est propre à des facteurs qui mérite d'être visé. Si vous avez sept photos et que le coin vide vous dérange, les correctifs honnêtes sont de les en déposer, d'en ajouter une ou de l'accepter, car aucun arrangement de sept cellules égales n'est un rectangle.
Pourquoi y a-t-il un écart, et quel devrait-il être ?
Parce que toucher des images se lit comme une seule image, et parfois c'est faux.
Un écart de zéro est bon pour un panorama, pour un avant et un après qui devrait ressembler à une image, et pour tout ce qui est le point. C'est la valeur par défaut ici pour cette raison.
Un écart est juste lorsque les images sont des éléments distincts qui se trouvent dans un seul fichier : trois photos de produits, un ensemble de captures d'écran, un collage. Quelque part entre 8 et 24 pixels, effectue le travail sur des images de quelques milliers de pixels, et le curseur passe à 80 pour un travail plus important. L'espace est appliqué autour de l'extérieur comme entre les deux, de sorte que le résultat a une bordure plutôt que des images saignant du bord.
Une chose à savoir avant de choisir PNG pour une fusion à écart : l'écart est rempli de blanc, pas de transparent. La toile est peinte en blanc avant que quoi que ce soit ne soit dessiné, car JPEG n'a pas de canal alpha et un écart non peint est en noir. Un PNG de cet outil a donc des gouttières blanches plutôt que transparentes, ce qui compte si vous envisagez de poser le résultat sur un fond coloré.
Quelle est la taille de l'image fusionnée ?
Plus grand que les entrées, et dans la casse empilé beaucoup plus grand, car rien n'est compressé.
Les dimensions du canevas sont prévisibles à partir du mode. Côte à côte, la largeur est la somme des largeurs à l'échelle et la hauteur est l'entrée la plus haute. Empilée, la largeur est la plus large entrée et la hauteur est la somme. Une grille est une colonne de fois la cellule plus les écarts.
Douze photos de téléphones dans une grille à quatre colonnes s'élèvent à 16 208 pixels sur 9 136 pixels, soit 148 mégapixels. C'est là que commence la section suivante.
Pourquoi la sortie s'arrête-t-elle à 8 000 pixels ?
Parce qu'au-delà d'une certaine taille, un canevas de navigateur cesse de fonctionner, et il ne le dit pas.
La limite n'est pas une spécification. MDN le dit clairement: La plupart des navigateurs dépassent 10 000 par 10 000 pixels, les appareils iOS ont toujours été limités à 4 096 par 4 096, et dépassant les dimensions maximales ou la zone "rend le canevas inutilisable" avec des commandes de dessin qui échouent en silence. Il n'y a pas d'exception à attraper. Vous obtenez une image vierge, ou rien du tout. Les chiffres par navigateur sont collectés dans le Résultats des tests de taille de toile, qui est la référence qui vaut la peine d'être vérifiée avant de supposer un nombre.
Ainsi, la disposition est réduite pour s'adapter à un côté long de 8 000 pixels plutôt que d'être autorisé à échouer. Pour cette grille de douze photos, le facteur d'échelle est de 0,494, ce qui a entraîné une baisse de 16 208 par 9 136 à 8 000 par 4 509, soit 36 mégapixels. Chaque photo atterrit à environ 1 976 par 1 483 au lieu de 4 032 par 3 024.
C'est une véritable perte de résolution, et c'est le commerce honnête : une image de 36 mégapixels qui existe bat une image de 148 mégapixels que le navigateur refuse de dessiner. Si vous avez besoin de la pleine résolution de douze photos, fusionnez-les en plusieurs pièces plus grandes ou utilisez un outil de bureau sans canevas.
Le résultat doit-il être PNG ou JPG ?
JPG pour les photos, PNG pour les captures d'écran et tout ce qui contient du texte ou de la couleur plate.
C'est la règle ordinaire et la fusion ne la change pas, mais la fusion la rend plus importante, car la sortie est importante. Une fusion de deux photographies de 5429 par 3024 est un fichier que vous remarquerez aux tailles PNG et non à la qualité JPEG 0,92, ce à quoi cela exporte.
L'inverse est valable pour les captures d'écran. Le sous-échantillonnage et la transformation de blocs de Chroma de JPEG produisent des franges visibles autour des bords de texte nets, et une bande de captures d'écran fusionnée est principalement des bords de texte nets. PNG est sans perte, donc le texte reste exactement aussi net qu'il l'était.
Une fusion mixte n'a pas de bonne réponse. Si l'une de vos entrées est une capture d'écran avec du texte et une autre est une photographie, choisissez par laquelle un lecteur examinera.
La fusion perd-elle de la qualité ?
Le dessin ne le fait pas, mais la mise à l'échelle pourrait, et il vaut la peine de savoir lequel est lequel.
Les pixels dessinés à leur taille native sont copiés, non recompressés. Dans une fusion côte à côte de deux photos de paysages provenant du même appareil photo, rien du tout n'est mis à l'échelle, de sorte que chaque pixel de la sortie provient d'un pixel d'entrée.
La mise à l'échelle est là où va la qualité. Toute image agrandie pour correspondre à un voisin plus grand est rééchantillonnée, ce qui invente des pixels qui n'ont jamais été photographiés. Une capture d'écran agrandie 3,4 fois pour correspondre à la largeur d'une photo est douce d'une manière qu'aucun paramètre ici ne corrige. Rien n'est mis à l'échelle au-delà de la plus grande entrée de l'axe correspondant, il y a donc un plafond, mais une petite image à côté d'une grande est toujours étirée pour l'atteindre.
Ensuite, il y a l'exportation. Le choix de JPG ré-encode tout, y compris les entrées qui étaient déjà JPEG, qui est une deuxième génération de compression avec perte sur ceux-ci. C'est le même mécanisme décrit dans Le guide audio sur l'extraction d'une piste, dans un autre support : décoder quelque chose de faible et le comprimer à nouveau n'est jamais gratuit. À la qualité 0,92, le coût est faible, et pour une bande de photos fusionnée, c'est le bon appel de toute façon.
Dans quel ordre les images vont-elles ?
L'ordre que vous les avez ajoutés, de gauche à droite ou de haut en bas, et la seule façon de le changer est de supprimer un et de le rajouter.
Cela vaut la peine de le savoir avant de sélectionner douze fichiers à la fois, car un sélecteur de fichiers les remet dans son propre ordre, qui est généralement alphabétique par nom de fichier et parfois non. Pour une séquence qui compte, comme un flux de paiement, les ajouter un par un dans l'ordre que vous souhaitez est moins de travail que de le réparer par la suite.
Trente images sont le plafond. Ce n'est pas une limite de canevas, c'est une limite de santé mentale : une fusion de trente photos de téléphone est une grille de 30 mégapixels après le plafond et une mise en page que personne ne peut lire.
Qu'est-ce qu'une image fusionnée ne vous donne pas ?
Tout ce qu'un outil de conception fait, ce qui est la limite honnête d'un outil de fusion.
Il n'y a pas de bordures autour des images individuelles, pas de coins arrondis, pas d'ombres portées, pas de légendes, pas de rotation par image, pas de chevauchement, pas de couleur de fond autre que le blanc. Chaque image est dessinée dans son rectangle et c'est l'ensemble des fonctionnalités.
Si vous voulez un collage encadré avec du texte, c'est un travail de conception et un outil de conception. Si vous souhaitez mettre trois images dans un seul fichier afin que quelque chose qui accepte une image obtienne les trois, c'est bien celui-ci. Traiter la seconde comme une version faible du premier est la source habituelle de déception.
Deux outils adjacents couvrent les suivis courants : Ajout de texte à une image pour une légende, et Le compresseur d'images Lorsqu'une grille de photos fusionnées sort plus grande que la limite de téléchargement ne le permet.
Pourquoi cela s'exécute-t-il dans le navigateur ?
Parce que les images n'ont jamais besoin d'aller nulle part, et au moment où elles le font, c'est la décision de quelqu'un d'autre ce qui leur arrive.
L'ensemble de la fusion est une opération de canevas. Vos fichiers sont décodés dans la mémoire de page, dessinés sur un canevas dans l'onglet, et le canevas est renvoyé en téléchargement via toBlob. Aucune demande ne porte une image, rien n'est écrit sur un serveur et aucune copie n'est stockée pour que quiconque faille ou oublie.
Pour beaucoup de fusions, c'est une gentillesse. Pour ceux qui impliquent une capture d'écran d'un relevé bancaire, une photo d'un document, une analyse médicale ou une photo d'un enfant, c'est la raison d'utiliser un outil comme celui-ci au lieu du premier résultat qui vous demande de télécharger.
Le coût est le plafond de la toile décrit ci-dessus et le fait que les très grandes fusions sont limitées par la quantité de mémoire que la tabulation peut contenir. Pour deux images, ou douze, aucune limite que vous rencontrerez.
