Adaptez la taille à l'endroit où l'image est affichée
Repérez l'espace le plus large que l'image occupera sur votre page. Une bannière pleine largeur peut demander environ 1600-2000 pixels. Une image dans une colonne d'article demande souvent 800-1200 pixels. Une petite vignette n'a parfois besoin que de quelques centaines de pixels. Les outils de développement de votre navigateur ou les réglages de votre thème indiquent généralement la largeur affichée. Si vous ne la connaissez pas, une largeur de 1200 pixels est un choix sûr courant pour une image d'article.
Prévoyez les écrans nets
Les écrans haute densité affichent plus de détails par pixel. Pour les images importantes, utiliser environ le double de la largeur affichée les garde nettes. Pour les images ordinaires, la largeur affichée suffit. Doubler la taille multiplie à peu près par quatre le nombre de pixels : ne le faites donc que là où la netteté compte. Les photos aux détails fins en profitent davantage que les graphismes simples ou les arrière-plans flous.
Conservez les proportions
Ne modifiez que la largeur ou la hauteur et laissez l'autre suivre. Étirer les deux à des valeurs fixes déforme les personnes et les cercles. Quand il vous faut une forme précise, recadrez au lieu d'étirer. Par exemple, pour transformer une photo 4:3 en carré, recadrez-la d'abord en carré, puis redimensionnez à la largeur voulue.
Réduisez, n'agrandissez pas
Réduire une image fonctionne bien. L'agrandir ne peut pas ajouter de détails : elle paraît alors floue. Si vous avez besoin d'une image plus grande, partez d'un original plus grand. Si l'original est petit, il vaut souvent mieux l'afficher plus petit que de l'étirer.
Un exemple concret
Supposons une photo de smartphone de 4000x3000 pour un article de blog dont la colonne de texte fait 800 pixels de large. Redimensionnez-la en 800x600, ou en 1600x1200 si vous voulez qu'elle reste nette sur les écrans haute densité. Dans les deux cas, le nombre de pixels diminue fortement par rapport à l'original, et la compression peut ensuite réduire encore le fichier. Les chiffres sont donnés à titre d'illustration et les gains réels dépendent de l'image.
Autre cas : une grille de vignettes où chaque image s'affiche à environ 300 pixels de large. Y charger des photos en pleine taille alourdit la page sans bénéfice visible. Redimensionner chacune à environ 300-600 pixels de large garde la grille rapide et nette. Les images de produits sont comparables : si le modèle de la boutique les affiche à 600 pixels de large, une version de 1200 pixels est généralement largement suffisante, même pour les écrans nets, alors qu'un original de 5000 pixels n'ajoute que du temps de téléchargement.
Les bannières d'en-tête demandent plus d'attention. Elles occupent toute la largeur : vérifiez donc la mise en page la plus large que vous gérez, et évitez de placer du texte essentiel dans l'image, car le recadrage sur les petits écrans pourrait le couper.
Marche à suivre étape par étape
- Trouvez la largeur d'affichage de l'image sur votre page.
- Décidez si vous voulez 1x ou environ 2x cette largeur.
- Ouvrez l'original, pas une copie déjà réduite.
- Définissez la largeur et gardez le rapport d'aspect verrouillé.
- Recadrez d'abord si vous avez besoin d'une autre forme.
- Compressez l'image redimensionnée pour le web.
- Vérifiez-la sur un téléphone et sur un écran d'ordinateur.
- Remplacez l'ancienne image sur votre page et rechargez pour confirmer que le rendu est bon.
Erreurs courantes
- Compter sur le navigateur pour réduire une image énorme : les visiteurs la téléchargent quand même en entier.
- Définir la largeur et la hauteur ensemble et écraser l'image.
- Agrandir une petite image pour remplir une bannière.
- Redimensionner à répétition une copie déjà compressée.
- Oublier de conserver l'original.
- Utiliser une même taille pour toutes les images de la page au lieu d'adapter chacune à son emplacement.
Liste de contrôle rapide
- Largeur d'affichage connue
- Taille réglée sur 1x ou environ 2x cette largeur
- Proportions conservées
- Original intact
- Compressé après le redimensionnement
Astuce : nommez clairement le fichier redimensionné, par exemple en ajoutant la largeur à la fin, pour pouvoir le distinguer plus tard de l'original.
Redimensionnez et compressez avec DoneImg
Ouvrez l'outil de redimensionnement de DoneImg, ajoutez votre image et saisissez la largeur voulue. Votre navigateur fait le travail : rien n'est envoyé. Ouvrez ensuite l'outil de compression pour réduire le poids du fichier et téléchargez le résultat. Répétez la même largeur pour chaque image d'une galerie afin que la page paraisse cohérente et se charge de façon prévisible. Prévisualisez toujours le résultat avant de le télécharger et gardez l'original intact. Si vous avez besoin d'une autre forme, utilisez l'outil de recadrage avant de redimensionner.
Dois-je redimensionner ou compresser en premier ?
Redimensionnez d'abord, car moins de pixels donnent moins de travail au compresseur et un fichier plus petit.
Redimensionner dégrade-t-il la qualité ?
Réduire une image la garde nette à sa nouvelle taille, mais vous ne pourrez pas l'agrandir ensuite sans flou : conservez donc l'original.