Comparer deux images : réglages et meilleurs résultats

À quoi sert Comparer deux images ?

Comparer deux images réunit deux photos en une seule comparaison avant/après, sur votre propre ordinateur. Dans l’application, l’outil s’appelle Image Comparison. Servez-vous-en pour une rénovation, une retouche photo, une refonte graphique ou tout changement que vous voulez montrer à un client. Trois exports sont possibles :

• HTML : un curseur interactif dans un seul fichier. Faites glisser la séparation pour dévoiler l’avant et l’après.
• GIF : une animation où la séparation balaie l’image toute seule, en boucle.
• Image : un PNG ou un JPEG fixe, dans l’une des six mises en page, de la simple coupure à l’affiche avec un titre.

Image Comparison s’ouvre sous forme de Studio, avec un aperçu en direct, vos deux images en dessous et les réglages à droite.

01Étape 1 : Ouvrez le Studio et ajoutez deux images

Cliquez sur Tools dans la barre latérale, ouvrez l’onglet Create et cliquez sur Image Comparison dans la section From your media. Vous pouvez aussi rechercher « before and after ».

Cliquez sur Choose images et choisissez exactement deux images, ou déposez-les sur la fenêtre. La première devient Before (avant) et la seconde After (après). Les photos, les SVG et les fichiers RAW d’appareil photo fonctionnent tous.

Les deux cartes sous l’aperçu montrent chaque image avec sa taille. Cliquez sur Swap pour inverser les rôles, sur Replace pour choisir un autre fichier d’un côté, ou sur la croix pour en retirer un. Si vous en ajoutez plus de deux, le Studio vous demande de retirer les images en trop avant de pouvoir exporter.

123456

1. 1Replace
2. 2Swap
3. 3Output format
4. 4Starting position
5. 5Test widget
6. 6Export HTML

04Étape 4 : Choisissez la mise en page et le style

Dans l’onglet Appearance, choisissez une mise en page (Layout). En sortie Image, les six sont disponibles :

• Seam : un cadre, une coupure. Réglez Seam angle pour incliner la coupure jusqu’à 30°.
• Pair : les deux images côte à côte, ou l’une au-dessus de l’autre avec Orientation sur Vertical, avec une légende et une ligne de marque.
• Masthead : l’avant au-dessus de l’après, sous un grand titre.
• Contact print : deux tirages inclinés, avec des repères Before et After bien visibles. Ajustez Card tilt, Card spread et Card size.
• Overlap : l’après devant, l’avant derrière et assombri. Card offset règle l’écart entre les deux.
• Cover : une affiche 4:5 construite à partir des couleurs de l’image After, avec un titre.

Sous la mise en page, réglez les couleurs qu’elle utilise, comme Paper et Ink, puis la séparation (Divider : couleur et épaisseur Line width) et, en HTML, la poignée (Handle style). Sous Images, Fit mode choisit Cover (remplir le cadre et rogner) ou Contain (montrer tous les bords). En sortie Image, vous réglez aussi le fond (Background), l’arrondi des coins (Corner radius) et la largeur (Output width). En GIF, la section Animation règle le rythme et la taille.

12345

1. 1Layout
2. 2Fit mode
3. 3Output width
4. 4File name
5. 5Export PNG

05Étape 5 : Exportez, puis partagez

En bas de l’onglet Appearance, saisissez un nom de fichier (File name). En sortie Image, choisissez PNG ou JPEG. La ligne du dossier affiche Default output folder : le dossier de sortie de votre espace de travail, dans un dossier compare avec un sous-dossier à la date du jour, comme 10-15. Cliquez sur Change pour enregistrer cet export ailleurs. Cliquez ensuite sur le bouton d’export en haut à droite, par exemple Export HTML.

À la fin, un message confirme le fichier pendant quelques secondes. Après un export HTML, un bouton Copy HTML apparaît en haut, à côté de Edit comparison. Cliquez dessus pour copier tout le code du fichier exporté, prêt à coller là où votre site accepte du HTML personnalisé. Open folder montre le fichier, et Edit comparison vous ramène aux réglages pour modifier la comparaison et l’exporter de nouveau. Voir Où Hangar enregistre vos fichiers.

1234

1. 1Interactive HTML ready
2. 2Copy HTML
3. 3Open folder
4. 4Edit comparison

Tous les réglages, et quand les changer

Les réglages n’apparaissent que si le format et la mise en page choisis les utilisent. Ils sont remis à zéro quand vous quittez le Studio : exportez avant de passer à un autre outil.

Format

Un curseur interactif, un balayage animé ou une image fixe. HTML et GIF demandent la mise en page Seam.

• PlageHTML, GIF, Image
• Par défautHTML

Starting position

La position de la séparation au chargement du curseur, et celle de la coupure sur les images fixes Seam.

• Plage0 % à 100 %
• Par défaut50 %

Before label / After label

Les mots de chaque côté. Ils ne peuvent pas être vides ; désactivez Show labels pour les masquer.

• PlageJusqu’à 120 caractères
• Par défautBefore / After

Show labels

Inscrit les libellés dans l’export.

• Par défautActivé

Typeface

La police des libellés.

• PlageMatch layout, Sans, Display, Mono
• Par défautMatch layout

Size

La taille des libellés.

• Plage40 % à 400 %
• Par défaut100 %

Tracking

L’espace entre les lettres des libellés.

• Plage0 % à 40 %
• Par défaut9 %

Uppercase

Met les libellés en capitales.

• Par défautActivé

Plate

Sur Seam et Overlap, un encart derrière chaque libellé pour qu’il reste lisible sur n’importe quelle image. Plate color, Opacity, Padding et Rounding règlent son style.

• Par défautActivé

Headline, Caption, Brand line

Du texte en plus pour les mises en page fixes qui l’utilisent. Display size (50 % à 180 %) règle la taille du titre sur Masthead et Cover.

• PlageJusqu’à 120 caractères chacun
• Par défautVide

Typography

L’association de polices pour les titres et les libellés.

• PlageMatch layout, Classic, Editorial, Crafted, Bold, Modern, Neutral
• Par défautMatch layout

Layout

La disposition des deux images. Seule Seam fonctionne en HTML et en GIF.

• PlageSeam, Pair, Masthead, Contact print, Overlap, Cover
• Par défautSeam

Seam angle

Incline la coupure de la mise en page Seam.

• Plage0° à 30°
• Par défaut0°

Card tilt, Card spread, Card size

Les deux tirages de la mise en page Contact print.

• Plage0° à 8°, 0 à 200 px, 70 % à 130 %
• Par défaut3°, 24 px, 100 %

Card offset

L’écart entre After et Before sur la mise en page Overlap.

• PlageStacked à Apart
• Par défaut9 %

Paper, Ink, Role accent

Les couleurs de page et de texte de Pair, Masthead et Contact print. Role accent colore les repères de Contact print.

• PlageToutes les couleurs
• Par défautBlanc chaud, presque noir, rouge

Orientation and Gap

Sur une image fixe Pair, côte à côte ou l’une au-dessus de l’autre, et l’espace entre les deux.

• PlageHorizontal, Vertical ; 0 à 120 px
• Par défautHorizontal, 24 px

Show divider

Trace la ligne entre Before et After sur Seam. Color et Line width (1 à 8 px) règlent son style.

• Par défautActivé

Handle style

En HTML, la poignée du curseur.

• PlageCircle, Pill, Rounded square, Diamond, Minimal, Line only
• Par défautCircle

Fit mode

Cover remplit le cadre et rogne ce qui dépasse. Contain montre tous les bords, avec du fond autour.

• PlageCover, Contain
• Par défautCover

Background

En sortie Image, la couleur autour et derrière les images.

• PlageToutes les couleurs
• Par défautPresque noir

Corner radius

En sortie Image, arrondit les coins du cadre.

• Plage0 à 48 px
• Par défaut8 px

Output width

En sortie Image, la largeur de l’image.

• Plage1200, 1600, 2048, 2400 px
• Par défaut1600 px

Duration

En GIF, la durée d’un balayage.

• Plage1 à 12 s
• Par défaut3 s

End pause

En GIF, le temps d’arrêt sur l’avant et sur l’après.

• Plage0 à 2000 ms
• Par défaut350 ms

Direction

En GIF, un aller-retour, ou un aller simple qui recommence.

• PlageBefore → After → Before, Before → After
• Par défautBefore → After → Before

Width (GIF)

La largeur du GIF.

• Plage640, 960, 1280 px
• Par défaut960 px

Frame rate

En GIF, la fluidité du balayage. Plus la valeur est haute, plus le fichier est lourd.

• Plage10, 15, 20, 24 FPS
• Par défaut15 FPS

Optimization

En GIF, sacrifie de la fidélité des couleurs pour un fichier plus léger.

• PlageQuality, Balanced, Small
• Par défautBalanced

Format (Image)

Le type de fichier d’une image fixe. JPEG quality (60 % à 100 %, 92 % par défaut) apparaît en JPEG.

• PlagePNG, JPEG
• Par défautPNG

File name

Le nom du fichier exporté. Hangar ajoute la bonne extension.

• Par défautimage-comparison

Obtenir les meilleurs résultats

• Prenez les deux photos du même endroit. Le curseur ne convainc que si la pièce, le produit ou le visage est aligné des deux côtés. Gardez la même position, la même hauteur et le même zoom pour les deux prises.
• Accordez les formats. Recadrez les deux images aux mêmes proportions avant de les ajouter, pour que Cover ne les rogne pas différemment.
• Choisissez le format selon la destination. HTML pour un site ou une page de portfolio, GIF pour les réseaux sociaux et les e-mails où un curseur ne peut pas fonctionner, Image pour les présentations, l’impression et les documents.
• Gardez des libellés courts. Un ou deux mots se lisent mieux sur un téléphone. Laissez la pastille activée quand les libellés sont posés sur des images chargées.
• Placez la séparation là où se voit le changement. Réglez Starting position pour que la première chose vue soit la partie la plus frappante du changement.
• Accordez-vous au site du client. En HTML, choisissez un Handle style et une couleur de séparation qui vont avec la page où le curseur sera publié.

Pourquoi un résultat déçoit

• Le bouton d’export est grisé. Le Studio a besoin d’exactement deux images. Ajoutez-en une deuxième, ou retirez celles en trop si vous en avez ajouté plus de deux.
• HTML et GIF sont grisés. La mise en page choisie est une mise en page fixe. Choisissez Seam dans l’onglet Appearance, ou exportez en Image.
• Le panneau indique que les images n’ont pas le même format. Les deux images ont des proportions différentes. Avec Cover, les deux sont rognées dans un même cadre et des bords sont coupés (la note appelle cela Fill). Avec Contain, tous les bords sont visibles, avec du fond autour de la plus petite. Pour un curseur réussi, recadrez d’abord les deux au même format.
• Les deux côtés ne s’alignent pas. Les photos ont été prises de deux endroits différents. Reprenez-les ou recadrez-les pour que les lignes principales coïncident.
• Les libellés sont difficiles à lire. Activez Plate, augmentez son opacité, ou agrandissez Size.
• Le GIF est trop lourd. Baissez la largeur, la fréquence d’images ou la durée, ou réglez Optimization sur Small.
• L’export a échoué avec un message indiquant qu’une image dépasse la limite de 100 mégapixels. Réduisez l’image avec Redimensionner des images et réessayez.
• L’export a échoué parce qu’une image est illisible. Ouvrez-la dans une autre application, enregistrez-la en JPG ou en PNG, et ajoutez-la de nouveau avec Replace.

Pour les autres erreurs, voir Un fichier a échoué : que vérifier.

Limites

• Exactement deux images par comparaison, de 100 mégapixels chacune au plus.
• HTML et GIF ne fonctionnent qu’avec la mise en page Seam.
• Le curseur HTML s’affiche jusqu’à 1200 pixels de large, et les grandes images sont stockées dans le fichier à 2560 pixels au plus sur leur grand côté.
• Les GIF et WebP animés sont utilisés comme une seule image fixe.
• Les noms de fichier des deux images, sans l’extension, sont écrits dans le fichier HTML. Les données d’appareil et de lieu ne sont pas copiées.
• Les réglages ne sont pas enregistrés. Ils sont remis à zéro quand vous quittez le Studio.
• Tout se passe sur votre ordinateur. Rien n’est envoyé en ligne.