Les grosses images sont la raison numéro un du chargement lent des pages. La solution tient presque toujours en deux étapes : donner à l'image les bonnes dimensions, puis compresser ce qui reste. Faites les deux et une photo de 4 Mo devient une photo de 150 Ko d'aspect identique à l'écran.
Mettons-y de vrais chiffres.
Tailles cibles à viser
Vous n'avez pas à deviner. Voici des budgets de poids concrets qui gardent les pages rapides :
- Bandeau / plein largeur : sous 200 Ko, idéalement ~100 à 150 Ko.
- Photo dans l'article : 80 à 150 Ko chacune.
- Miniature / avatar : 10 à 30 Ko.
- Logo ou icône (PNG/SVG) : sous 30 Ko ; souvent bien moins.
Et les dimensions :
- Bandeau pleine largeur : 1600 à 2000 px de large suffisent pour la plupart des mises en page (doublez seulement si vous visez le Retina et pouvez vous permettre les octets).
- Photo en colonne : correspondez à votre largeur de contenu — souvent 800 à 1200 px.
- Miniature : la taille à laquelle elle s'affiche réellement, par ex. 300 à 400 px.
Si une seule image d'une page dépasse ~300 Ko, c'est généralement une erreur à corriger.
Étape 1 : redimensionnez à la vraie largeur d'affichage
C'est l'étape que les gens sautent, et c'est le plus grand levier. Une photo sortie tout droit d'un téléphone fait souvent 4000+ pixels de large. Si elle s'affiche dans une colonne de 800 pixels, vous expédiez 25 fois plus de pixels que l'écran n'en montre — et le nombre de pixels commande la taille du fichier plus que tout.
Utilisez le Redimensionneur d'images pour ramener l'image à la largeur à laquelle elle apparaît réellement. Redimensionnez en pixels ou en pourcentage, gardez le ratio verrouillé, et laissez le réducteur de qualité garder les bords propres.
Le bon dimensionnement à lui seul réduit souvent la taille du fichier de 80 à 90 % avant même d'avoir compressé un seul octet.
Étape 2 : compressez ce qui reste
Réduisez maintenant les données à l'intérieur de ces dimensions correctes.
- Photos (JPG/WebP) : réglez le curseur de qualité sur 75 à 85. C'est visuellement sans perte pour la plupart des images tout en réduisant fort la taille.
- PNG (captures, graphiques) : le Compresseur d'images les réduit à une palette de 256 couleurs, économisant généralement 60 à 80 % sans changement visible et en gardant la transparence.
Le compresseur plafonne aussi la sortie à la taille de l'original — il ne rend jamais quelque chose de plus gros — et il a un plafond de largeur optionnel, vous pouvez donc en réalité faire les deux étapes en une passe : réglez le plafond à votre largeur cible et compressez d'un coup. Traitez tout un dossier par lot et téléchargez-le en ZIP.
Choisissez le bon format tant que vous y êtes
Si vos images seront servies à des navigateurs modernes, convertir les photos en WebP bat généralement le JPEG de 25 à 35 % supplémentaires à qualité égale. Les graphiques plats restent en PNG (ou WebP). N'enregistrez pas les photographies en PNG — c'est l'erreur de gonflement classique, facilement une pénalité de 5 à 10×.
Un flux de travail réaliste
Pour un article de blog avec cinq photos :
- Redimensionnez chacune à votre largeur de colonne (disons 1200 px).
- Compressez à la qualité 80, ou convertissez en WebP.
- Confirmez que chacune tombe sous ~150 Ko.
- Vérifiez un recadrage à 100 % d'une image pour être sûr que la qualité a tenu.
Cinq photos qui totalisaient 20 Mo au départ atterriront autour de 600 Ko — une page qui se charge en un clin d'œil plutôt qu'en une pause.
Privé et hors ligne
Tout ce qui précède tourne entièrement dans votre navigateur avec Canvas et WebAssembly. Aucune image n'est téléversée sur un serveur, et après votre première visite les outils sont en cache et fonctionnent hors ligne. Vous pouvez optimiser toutes les images d'un article sans connexion et sans que rien ne quitte votre machine.