Initial Outils Par Initial Infra ↗

Préparer des images pour un site web ou un catalogue

Partez de la zone d’affichage prévue sur le site : recadrez au bon rapport, redimensionnez, puis compressez une copie. Vérifiez le résultat dans la page finale avant de remplacer vos originaux.

Mis à jour le

Choisir les dimensions à partir de la page

Une photo de produit, une bannière et une miniature n’occupent pas la même place. Relevez les dimensions ou les recommandations de votre site avant de traiter un lot. Une image beaucoup plus large que son emplacement peut ajouter du poids sans détail utile ; une image trop petite risque de paraître floue lorsqu’elle est agrandie.

Définissez un rapport cohérent pour une série de produits. Par exemple, un catalogue peut prévoir des vignettes carrées et une image plus large sur la fiche détaillée. Ce sont deux usages à préparer séparément. Un rapport unique ne convient pas nécessairement à toutes les photos : un objet haut doit rester entier et identifiable.

Conservez le fichier original à part. Travaillez sur une copie et choisissez un nom descriptif lié au contenu, sans empiler des mots-clés. Le nom sert aussi aux personnes qui devront retrouver et remplacer l’image plus tard.

Recadrer, redimensionner puis compresser

  1. Recadrez la photo pour garder le sujet et obtenir le rapport voulu. Vérifiez qu’aucun détail utile n’a disparu.
  2. Redimensionnez la copie aux dimensions nécessaires. Respectez ses proportions pour éviter de déformer le produit.
  3. Compressez l’image, puis comparez le résultat avec la copie précédente.

Un agrandissement ne recrée pas les détails absents de l’original. Pour une photo insuffisante, une meilleure source sera souvent plus utile qu’un export plus grand. À l’inverse, plusieurs compressions successives peuvent dégrader les détails : repartez d’une copie de qualité si le résultat devient trop marqué.

Les outils fonctionnent sur votre appareil. Le résultat doit être téléchargé après chaque opération avant de passer à la suivante. Ils ne publient aucune image dans votre site et ne modifient pas vos fichiers sources.

Choisir le format et contrôler le résultat

JPG convient souvent à une photographie sans transparence. PNG peut être utile pour un visuel qui exige de la transparence ou des contours précis, mais une photo en PNG peut être lourde. WebP est une autre option à essayer si votre site accepte ce format. Le comparatif JPG, PNG et WebP détaille les choix et les limites des conversions.

Il n’existe pas un poids idéal valable pour toutes les images. Fixez une contrainte selon la place du visuel, la quantité de photos sur la page et le niveau de détail nécessaire. Comparez les contours, les textes visibles et les zones de couleur. Une taille réduite ne sert pas le catalogue si le visiteur ne distingue plus le produit.

Le réglage de qualité du compresseur concerne JPG et WebP, pas PNG. La réduction obtenue dépend de la source. Contrôlez les dimensions et le poids du téléchargement final plutôt que de supposer qu’un pourcentage de qualité correspond à un gain de poids.

Vérifier l’image dans la page qui la présente

Après import dans votre site, contrôlez le cadrage sur petit et grand écran, les images de variantes et le comportement du zoom éventuel. Ajoutez un texte alternatif qui décrit ce que l’image apporte à la page ; les éléments purement décoratifs peuvent avoir une alternative vide. Évitez une liste de mots-clés sans rapport avec le visuel.

Le fichier optimisé n’assure pas à lui seul une page rapide ou une prise de contact. Le thème du site, les scripts, le chargement des images et la clarté de la fiche influencent aussi l’expérience. Si les photos sont prêtes mais que le catalogue reste difficile à utiliser, le besoin peut concerner le site et son parcours de demande.