Pour préparer une image pour le web, réduisez d'abord ses dimensions en pixels, puis compressez le fichier. Par exemple, une photo de 4000 px de large peut être exportée à 1200 px pour un article, puis compressée jusqu'à obtenir un fichier léger sans dégradation gênante. La largeur utile dépend de votre mise en page et de la densité de pixels de l'écran.
Pourquoi réduire les dimensions et le poids des images ?
Chaque kilo-octet augmente le volume à transférer. Une page avec plusieurs photos sorties directement de l'appareil peut devenir lente, notamment sur une connexion mobile. Le problème ne se résume pas à la résolution : le format, la compression, le cache et le nombre d'images comptent aussi.
Quel est le lien avec les Core Web Vitals ?
Le Largest Contentful Paint (LCP) mesure le délai d'affichage du plus grand élément de contenu visible, souvent l'image principale. Une image trop lourde peut le retarder. L'optimisation peut améliorer ce délai, mais ne garantit ni un bon score à elle seule ni une meilleure position dans les résultats de recherche.
| Élément | Risque des images trop lourdes | Intérêt d'une image adaptée |
|---|---|---|
| Chargement | Plus de données à transférer | Transfert généralement plus rapide |
| Expérience mobile | Attente sur les connexions lentes | Contenu visible plus tôt |
| Conversion | Friction avant de consulter un produit | Parcours moins pénible, à mesurer sur votre site |
| Référencement | LCP potentiellement dégradé | Meilleure base technique, sans garantie de classement |
| Bande passante | Coûts de transfert plus élevés | Moins de données à servir |
Comment mesurer l'amélioration ?
Comparez le poids des fichiers, le volume réellement téléchargé et le LCP avant et après modification, sur la même page et dans les mêmes conditions. Les statistiques générales de conversion ne prédisent pas le gain de votre site. Gardez une copie des originaux pour ajuster les exports si nécessaire.
Quel outil choisir pour redimensionner vos images ?
Pour une photo de profil, un outil dans le navigateur suffit souvent. Pour 50 photos produits ou une galerie client, privilégiez des réglages enregistrables et le traitement par lots.
Outils en ligne pour les tâches ponctuelles
TinyPNG sert à réduire le poids des fichiers ; ne confondez pas cette compression avec le changement de dimensions. L'outil de redimensionnement Adobe Express permet de définir une taille. Squoosh propose des réglages de dimensions, de format et de compression.
Ces outils conviennent pour quelques images d'article, une photo de profil ou un fichier à envoyer par courriel. Vérifiez leurs limites de taille et leurs règles de confidentialité avant de téléverser un document sensible.
Logiciels de bureau pour un contrôle précis
Adobe Photoshop, Affinity Photo et GIMP permettent de contrôler les dimensions, les profils colorimétriques, la netteté et la compression. Des préréglages rendent une série d'exports plus cohérente.
Commencez par tester une qualité de 70 à 80 sur une échelle de 0 à 100, puis inspectez le résultat. Ces valeurs sont un point de départ, pas une garantie : leur effet varie selon le logiciel et le format.
Extensions pour les plateformes CMS
Sur WordPress, ShortPixel, Smush ou Imagify peuvent automatiser l'optimisation à l'importation. Définissez, par exemple, une largeur maximale de 1200 px pour un type d'image, puis vérifiez les variantes produites et leur affichage réel.
Cette approche convient aux équipes qui publient régulièrement. Comparez les fonctions et les limites des outils d'optimisation d'images avant de choisir ; conservez les originaux plutôt que de les écraser.
Comment redimensionner une photo avec Squoosh ?
Les dimensions sont la largeur et la hauteur en pixels. Le poids est la taille du fichier en Ko ou Mo. Réduire les premières ne dispense pas d'optimiser le second.
Étape 1 : définir une largeur utile
Prenons une photo de 6000 px et 15 Mo destinée à une bannière d'article. Pour cet exemple, visez 1200 px de large et essayez de rester sous 100 Ko. Il s'agit d'objectifs de travail, pas de spécifications universelles.
Ouvrez la photo dans Squoosh, activez « Resize » et saisissez 1200 dans le champ de largeur. Conservez les proportions pour que la hauteur s'ajuste sans étirer la photo.
Partez d'un original suffisamment grand et réduisez-le. Agrandir un petit fichier ne recrée pas fidèlement les détails absents.
Étape 2 : régler la compression
Choisissez un format adapté, puis comparez plusieurs niveaux de qualité. Essayez 75 et observez les contours, le texte éventuel, les dégradés et les détails fins. Téléchargez une version test avant d'adopter les réglages pour toute une série.
Un export de 1200 px peut parfois approcher 95 Ko, mais le résultat dépend du contenu et du codec. Si votre fichier reste plus lourd, comparez WebP ou AVIF et ajustez la qualité sans sacrifier la lisibilité. Notre guide pour améliorer la qualité d'une image décrit d'autres pistes ; un outil d'amélioration ne remplace pas le contrôle de l'export.
Quelles dimensions utiliser comme point de départ ?
| Emplacement | Largeur indicative | Objectif de poids indicatif |
|---|---|---|
| Grande bannière | 1920 px | Moins de 250 Ko |
| Image d'article | 1200 px | Moins de 100 Ko |
| Image dans une colonne | 800 px | Moins de 80 Ko |
| Photo produit | 1000 px | Moins de 100 Ko |
| Vignette | 400 px | Moins de 40 Ko |
Adaptez ces repères à la taille d'affichage, au zoom produit, à la densité de l'écran et au sujet. Plusieurs variantes responsives valent souvent mieux qu'un fichier unique très large.
Que faut-il optimiser en plus des dimensions ?
Quel format d'image choisir ?
- JPEG : adapté aux photographies ; la compression avec perte réduit le poids en supprimant une partie des données. Il ne gère pas la transparence.
- PNG : utile pour les graphiques, certains textes et la transparence. Sa compression sans perte peut produire des fichiers lourds pour les photos.
- WebP et AVIF : formats modernes offrant souvent une meilleure compression. Comparez leur qualité, le temps d'encodage et la compatibilité de votre chaîne de publication plutôt que de supposer un gain fixe.
Consultez les avantages et limites dans notre guide du format d'image pour le web.
Comment trouver le bon compromis de compression ?
Visez le fichier le plus léger qui conserve les détails utiles à l'utilisateur. Une différence de qualité à peine visible sur une photo peut être gênante sur un logo ou du texte. Examinez l'image à sa taille d'affichage et sur mobile, pas seulement en aperçu réduit.
Comment nommer les fichiers et rédiger le texte alternatif ?
Remplacez IMG_8432.jpg par un nom descriptif tel que chaussures-course-bleues.jpg. Le nom apporte du contexte, sans devoir accumuler des mots-clés.
Le texte alternatif décrit l'information portée par l'image aux personnes qui ne la voient pas. Pour une photo qui montre réellement ce contenu, « Paire de chaussures de course bleues à lacets blancs sur un sol en bois » est plus utile que « chaussures ». N'inventez pas de détails. Une image purement décorative doit avoir un attribut alt vide ; une infographie nécessite aussi une explication textuelle de ses informations importantes.
Comment traiter 50 ou 100 images par lots ?
Le traitement par lots applique les mêmes règles de dimensions, qualité et format à un dossier entier. Testez-les sur quelques images représentatives avant de lancer la série : un portrait et une capture avec du texte ne tolèrent pas forcément la même compression.
Automatiser avec les actions Photoshop
- Ouvrez une copie d'une photo et enregistrez une action : redimensionnement à 1200 px, éventuelle accentuation légère, export à une qualité testée de 75.
- Lancez le traitement par lots sur le dossier des 50 images en choisissant cette action.
- Enregistrez les fichiers optimisés dans un autre dossier et vérifiez plusieurs résultats, notamment les orientations portrait et paysage.
Affinity Photo propose également des outils d'automatisation. L'intérêt est la cohérence, pas seulement la vitesse ; ne laissez pas un réglage erroné se propager à tous vos fichiers.
Automatiser à l'importation dans le CMS
ShortPixel et Imagify peuvent intervenir directement dans la médiathèque. Vous pouvez définir une largeur maximale, par exemple 1500 px, une conversion WebP et la suppression de métadonnées inutiles. Vérifiez les options exactes de votre abonnement et préservez les données nécessaires, notamment les crédits et informations de droits.
Questions fréquentes sur le redimensionnement web
Quelle différence entre redimensionnement et compression ?
Redimensionner modifie la largeur et la hauteur, par exemple de 5000 à 1200 px. Compresser réduit le poids du fichier sans nécessairement changer ces dimensions. Faites généralement les deux : dimensions adaptées, puis compression contrôlée.
Quelle résolution en DPI utiliser pour le web ?
Les DPI concernent surtout l'impression. Un réglage d'export de 72 DPI n'allège pas à lui seul une image web et ne détermine pas sa taille d'affichage dans le navigateur. Concentrez-vous sur les pixels, la taille CSS, les variantes responsives et le poids du fichier.
Peut-on agrandir une image sans perdre de qualité ?
Pas en retrouvant automatiquement les détails d'origine. L'interpolation d'un JPEG ou PNG invente des pixels et peut donner une image floue. Les outils d'agrandissement par AI peuvent améliorer l'apparence, mais aussi créer de faux détails. Privilégiez l'original haute résolution, y compris pour ajouter du texte à une vidéo sur un fond net.
Les forfaits payants d'AI Media Studio commencent à 19 $/mois.