Comment combiner des images pour votre site

Réunir les images ou les garder séparées ?

Un collage regroupe plusieurs images dans un seul fichier. Sur une page de projet, il peut donner une vue d’ensemble compacte ou présenter un sujet à côté d’un détail utile. Les images doivent répondre à une même question, par exemple : à quoi ressemble cette cuisine terminée et comment ses rangements fonctionnent-ils ?

Gardez les images séparées si chacune demande une explication, un lien ou un examen attentif. Une galerie de produits permet de regarder chaque vue individuellement plutôt que dans une petite grille.

Un collage conserve sa disposition lorsqu’il est affiché en plus petit. Des images ajoutées séparément dans l’éditeur du site peuvent se placer les unes sous les autres sur téléphone ; celles réunies dans un fichier restent à leur place. La disposition est donc prévisible, mais la page dispose de moins de souplesse pour afficher chaque photo à une taille utile.

Choisir des images qui apportent des informations différentes

Deux à quatre images constituent un point de départ pratique pour résumer un projet. Donnez un rôle à chacune : une vue d’ensemble situe le sujet, tandis qu’un gros plan montre une particularité difficile à distinguer autrement. Deux vues presque identiques apportent généralement moins qu’une vue d’ensemble accompagnée d’un détail utile.

Recherchez des couleurs et des éclairages qui s’accordent. Pour une comparaison avant/après, des angles de prise de vue, des cadrages et des échelles similaires facilitent l’évaluation du changement. Évitez de masquer une différence importante par le recadrage. Notre guide pour choisir les images d’un site explique ce que chaque image doit communiquer.

Choisir une disposition adaptée aux images

Dans la disposition à trois images de Pixilo, la première occupe la grande zone à gauche et les deux suivantes sont superposées à droite. Changez l’ordre pour donner davantage de place à la photo souhaitée. Une grille classique se remplit de gauche à droite, puis de haut en bas. Les cases sans image affichent le fond choisi.

Adapter la forme du collage à ses cadres

La largeur et la hauteur du collage déterminent la forme des cadres à l’intérieur. Un collage carré ne donne pas forcément des cadres carrés : avec deux images côte à côte, chaque cadre est vertical. Une grille de deux lignes et deux colonnes donne des cadres à peu près carrés lorsque les espacements et les marges sont petits.

Pour deux photos verticales côte à côte, essayez un collage plus haut afin que les cadres restent verticaux. Un collage large et peu haut coupe davantage le haut et le bas des photos lorsqu’elles remplissent les cadres. Pour deux photos horizontales sur une même ligne, un collage plus large peut conserver davantage de chaque scène.

Partez de l’espace disponible sur la page, puis essayez une disposition et une forme adaptées aux photos. Si le site impose un format, conservez-le et changez plutôt la disposition ou les images. Dans Pixilo, déverrouillez les proportions pour modifier la forme, puis verrouillez-les lorsque vous souhaitez seulement changer la taille sans modifier les proportions.

Afficher toute l’image ou remplir le cadre ?

Afficher toute l’image conserve tous les bords, mais peut laisser de l’espace autour. Ce choix convient aux logos, aux schémas ou aux photos de produits dont un recadrage supprimerait une information importante.

Remplir le cadre recadre l’image pour occuper son emplacement sans la déformer. La grille présente des bords réguliers, mais vérifiez ce qui disparaît. Sélectionnez chaque miniature et ajustez la position du recadrage pour garder le sujet important visible.

Si un cadre ne peut pas montrer à la fois un visage et l’action à côté, essayez une autre forme ou disposition, affichez toute l’image ou choisissez une autre photo. Déplacer le recadrage ne peut pas faire entrer toute une scène large dans un cadre étroit. Utilisez d’abord l’outil de recadrage pour définir un cadrage plus précis de l’original, puis vérifiez comment il s’intègre au collage.

Séparer les images par des espaces

Un petit espace aide à distinguer les photos voisines. Une marge extérieure encadre le collage, mais réduit aussi la place disponible pour les images. Gardez les deux modestes si le collage apparaît dans une colonne étroite. Ils diminuent avec l’image lorsqu’elle est affichée en plus petit.

Choisissez un fond qui s’accorde avec les photos et la page. Il apparaît dans les espacements, les marges et les zones laissées libres par les images qui ne remplissent pas leurs cadres. Changer sa couleur ou choisir la transparence ne supprime pas un arrière-plan déjà présent dans une photo.

Combiner les images avec Pixilo

1. Ouvrez l’outil de combinaison d’images et sélectionnez vos fichiers JPG, PNG ou WebP.
2. Choisissez la disposition et utilisez les flèches sous les miniatures pour définir l’ordre.
3. Réglez la largeur et la hauteur du collage entier, espacements et marge extérieure compris.
4. Affichez chaque image entièrement ou remplissez son cadre. Si vous recadrez, sélectionnez chaque miniature et ajustez sa position. Les curseurs ne sont disponibles que dans les directions où l’image est recadrée.
5. Réglez les espacements, la marge extérieure et la couleur du fond ou sa transparence.
6. Téléchargez le PNG, vérifiez sa qualité et préparez la version à publier.

Vous pouvez utiliser Ajouter des images sans perdre l’ordre, les recadrages ou les réglages existants. Remplacer les images remplace la sélection. La disposition avec une grande image et deux petites demande exactement trois images ; en ajouter une quatrième fait passer à une grille.

Exemple : quatre photos d’une cuisine terminée

Une entreprise de rénovation souhaite présenter brièvement un chantier sur une page de projet. Elle choisit une vue d’ensemble de la pièce, l’intérieur d’un meuble de rangement, un détail du plan de travail et l’éclairage au-dessus du comptoir. Chaque photo montre un aspect différent du même travail terminé.

Elle commence par une grille de 2 × 2 pour présenter les quatre aspects. Si la vue d’ensemble était le principal argument, la disposition à trois images pourrait lui donner plus de place, avec deux détails à côté et la quatrième photo ailleurs sur la page.

La page affiche le collage sur une largeur maximale de 600 pixels. Pour cet exemple, exportez-le à 1200 × 800 pixels, avec des espacements de 16 pixels, une marge extérieure de 24 pixels et un fond blanc. Le fichier est deux fois plus large que l’affichage pour fournir davantage de détails aux écrans à forte densité de pixels. Ce sont des réglages d’exemple, pas une taille imposée à tous les sites. Notre guide des dimensions d’images pour le web explique comment les adapter à votre page.

Remplissez les cadres et placez d’abord la vue d’ensemble, puis le rangement, le plan de travail et l’éclairage. Ajustez chaque recadrage pour montrer la caractéristique que la photo doit expliquer.

Avec un affichage de 360 pixels de large sur téléphone, chaque photo ne mesure ici qu’environ 170 pixels de large. Le rangement et l’éclairage restent reconnaissables, mais supposons que le joint du plan de travail soit trop petit pour être examiné. Retirez cette photo du collage et affichez-la séparément en plus grand. Disposez ensuite les trois photos restantes autour de la vue d’ensemble. Augmenter seulement les dimensions d’export ne donnerait pas plus de place au joint sur la page.

Vérifier le collage dans la page sur mobile

Prévisualisez la page aux largeurs d’un ordinateur et d’un téléphone, sans zoomer. Vérifiez ce que les visiteurs peuvent réellement comprendre : comparer deux finitions, voir le rangement ou suivre la séquence. Reconnaître le sujet général ne suffit pas si le détail utile a disparu.

Vérifiez l’image dans la page, pas seulement dans le fichier téléchargé. Le thème du site peut la recadrer davantage pour la faire entrer dans une zone fixe. Modifiez cette zone ou ses réglages d’affichage si elle coupe une partie du collage.

Si la disposition semble trop chargée, simplifiez-la ou gardez les images séparées. Si votre outil de création de site permet une image différente sur mobile, préparez une version avec moins de photos ou une disposition verticale. Notre guide des images responsives explique cette approche.

Gardez les titres et les indications essentielles dans le texte de la page. Le texte intégré à une image rétrécit avec elle et se met à jour moins facilement. Ajoutez les légendes explicatives dans l’éditeur du site.

Ajouter une légende et un texte alternatif utile

Une légende peut identifier le projet et expliquer l’ordre des images. Pour les quatre photos de cuisine : « Rénovation de cuisine terminée. Depuis le coin supérieur gauche, dans le sens des aiguilles d’une montre : vue d’ensemble, rangement coulissant, éclairage du comptoir et détail du plan de travail. » Adaptez le texte à la disposition finale si vous déplacez ou retirez une photo.

Un collage informatif exporté dans un seul fichier nécessite un texte alternatif pour l’ensemble. Ici, il pourrait être : « Cuisine rénovée avec rangement coulissant, joint affleurant du plan de travail et lampes au-dessus du comptoir. » Décrivez l’essentiel plutôt que d’écrire seulement « Collage de quatre photos ».

Si les images expliquent une comparaison détaillée, présentez les différences importantes dans le texte voisin au lieu de tout faire tenir dans le texte alternatif. Les recommandations du W3C sur les images complexes expliquent comment associer une alternative courte à une description plus complète. Notre guide des textes alternatifs et des noms de fichiers aide à rédiger des descriptions adaptées à la page.

Préparer le fichier pour votre site

Pixilo enregistre le collage en PNG, ce qui préserve la transparence sans ajouter de compression avec perte lors de l’export. Cela ne restaure pas les détails absents des photos sources. Une petite image peut paraître floue lorsqu’elle est agrandie pour remplir son cadre, surtout après un recadrage serré. Examinez chaque photo dans le collage téléchargé. Si l’une est nettement moins nette que les autres, utilisez un original plus grand ou un cadre plus petit.

Un collage surtout composé de photos peut produire un PNG volumineux. Utilisez PNG vers WebP ou, si vous n’avez pas besoin de transparence, PNG vers JPG pour créer une copie destinée au site. Comparez sa taille et sa qualité visible au PNG. Regardez les détails fins et les contours en réglant la qualité : le plus petit fichier n’est pas utile s’il masque la caractéristique à montrer.

Si le fond de la page doit apparaître à travers l’image, gardez une version qui préserve la transparence. Le JPG ne le permet pas. Notre guide des formats d’images pour le web détaille les options.

Ajoutez la version choisie au site et vérifiez que la page utilise le bon fichier et les dimensions prévues. Gardez les photos originales pour les modifications futures : vous ne pouvez pas réorganiser les photos à l’intérieur du PNG téléchargé.