Redimensionner des images _

Comment fonctionne le redimensionnement d'images dans le navigateur

Chaque redimensionnement est un court pipeline s'exécutant entièrement en JavaScript. Aucune bibliothèque de codec n'est téléchargée et aucun serveur n'est impliqué. L'API Canvas native du navigateur décode le fichier, le redessine à la taille cible et le ré-encode en mémoire, puis vous remet un Blob que la page peut prévisualiser ou compresser dans un ZIP. Comme chaque étape reste dans le bac à sable de l'onglet, les fichiers originaux n'atteignent jamais le réseau.

1. Lit chaque fichier importé en tant que Blob et crée une URL d'objet pour que le navigateur puisse le décoder localement, sans copier d'octets vers un serveur ni les écrire sur disque.
2. Calcule les dimensions cibles à partir du mode choisi — une limite du côté le plus long, une largeur et une hauteur exactes, ou une échelle en pourcentage. Le verrou de ratio maintient les proportions correctes quand vous modifiez un seul champ.
3. Crée un Canvas hors écran à la taille cible et appelle ctx.drawImage(source, 0, 0, width, height) pour redessiner les pixels décodés. Le navigateur gère l'interpolation qui lisse le résultat mis à l'échelle.
4. Appelle canvas.toBlob pour ré-encoder dans le format source. PNG reste sans perte, JPEG et WebP sont ré-encodés en haute qualité. La page affiche ensuite une carte avant/après et propose un téléchargement par image ou un ZIP unique construit en mémoire avec fflate.

Pourquoi redimensionner des images ?

• Les images surdimensionnées sont la cause la plus fréquente des pages lentes. Une photo de téléphone de 4000×3000 insérée directement dans une mise en page de 600 pixels de large envoie environ 40 fois plus de pixels que l'écran ne peut en afficher. Limiter le côté le plus long à 1600 px avant l'envoi réduit fortement le poids de la page et améliore le LCP des Core Web Vitals.
• Les formulaires d'envoi imposent des dimensions strictes. Les espaces d'avatar, les portails de photos d'identité, les annonces sur les marketplaces et les cartes OG pour les réseaux sociaux exigent des tailles exactes en pixels : 1200×630 pour un aperçu Open Graph, 512×512 pour une icône d'appli, 150×150 pour une miniature. Trouver le bon chiffre évite la boucle des envois rejetés.
• Les clients de messagerie et de chat recompressent silencieusement toute grande image, ce qui peut abîmer une capture d'écran nette. Redimensionner soi-même à une largeur raisonnable rend le résultat prévisible au lieu de le confier au pipeline avec pertes de quelqu'un d'autre.
• La cohérence par lot compte pour les galeries et les catalogues. Passer un dossier de photos de tailles variées par une unique cible de 800×800 aligne chaque vignette dans la grille, sans image géante qui brise la mise en page.

Applications courantes

Le redimensionnement est nécessaire chaque fois que les dimensions sources et les attentes de la destination ne correspondent pas. Trois cas de figure reviennent sans cesse.

• Préparer des photos produits pour une boutique Shopify ou WooCommerce. Un dossier d'originaux caméra de 4000 pixels est limité à un côté le plus long de 1600 px pour que la boutique se charge vite, tandis que le ratio reste intact pour que rien ne paraisse étiré.
• Générer des assets pour les réseaux sociaux et les applis à partir d'un fichier maître. Définir un exact 1200×630 pour la carte Open Graph, puis 512×512 pour une icône d'appli, en exportant chacun en quelques clics sans ouvrir un éditeur lourd.
• Réduire un lot de captures QA ou support avant de les joindre à un ticket. Mettre à l'échelle un dossier de 50 images à 50% réduit généralement la taille de l'archive de trois quarts avant de l'intégrer dans un outil de suivi de bugs.

Un exemple concret : photo de 4000 px vers image web de 1600 px

Une photo de 4000×3000 sortie directement d'un téléphone est une charge courante bien trop grande pour n'importe quelle mise en page web. C'est un bon repère pour ce que le redimensionnement permet d'économiser.

Déposez la photo dans la zone d'importation, laissez le mode sur Limiter le côté le plus long et réglez la valeur sur 1600. Le pipeline Canvas redessine l'image à 1600×1200 avec le ratio préservé, puis la ré-encode dans le format original. La carte de sortie affiche les nouvelles dimensions et la taille du fichier, qui pour un JPEG typique passe de plusieurs mégaoctets à quelques centaines de kilooctets. Cliquez sur Télécharger sur la carte pour récupérer le fichier individuel, ou sur Télécharger .zip si vous avez redimensionné plusieurs images en une seule passe. Le cycle complet, du dépôt au téléchargement, s'exécute en une fraction de seconde et consomme zéro bande passante après le chargement initial de la page.

Quels modes de redimensionnement sont disponibles ?

Trois. Limiter le côté le plus long plafonne le plus grand des côtés (largeur ou hauteur) à une valeur en pixels et met l'autre à l'échelle pour correspondre — c'est le réglage par défaut sûr car il ne distord jamais. Largeur × hauteur exactes permet de saisir les deux nombres, avec un verrou de ratio qui recalcule le second champ à partir du ratio source lors de l'édition du premier — désactivez le verrou quand un formulaire exige une taille exacte non proportionnelle. Mettre à l'échelle en pourcentage multiplie les deux dimensions par un seul facteur, pratique pour réduire ou doubler tout un lot d'un coup. Six préréglages en un clic (de 1920×1080 jusqu'à une miniature de 150×150) couvrent les cibles les plus fréquentes.

Est-ce que cela se passe sur mon appareil ?

Oui, entièrement. La page utilise l'API Canvas native du navigateur et l'API Web File pour décoder, redessiner et ré-encoder chaque image en mémoire. Aucune donnée d'image n'est envoyée à un serveur, il n'y a pas d'envoi temporaire et pas d'aller-retour vers le cloud. Vous pouvez le vérifier : ouvrez DevTools, basculez sur le panneau Réseau et lancez un redimensionnement. Les seules requêtes sortantes que vous verrez sont le chargement initial de la page et les appels publicitaires. Rien en forme d'image ne quitte l'onglet, ce qui rend cet outil sûr pour les pièces d'identité scannées, les images médicales et tout autre document que vous ne voudriez jamais envoyer.

Le redimensionnement va-t-il réduire la qualité ?

Réduire une image (downscaling) donne d'excellents résultats — le navigateur fait la moyenne des pixels sources en moins de pixels, le détail reste donc net et le fichier devient beaucoup plus petit. Agrandir au-delà de la résolution source (upscaling) ne peut pas inventer de détails jamais capturés, donc une petite image mise à l'échelle vers le haut paraîtra floue ; c'est une limite de tout redimensionneur, pas de celui-ci en particulier. La sortie conserve le format source : PNG reste sans perte, tandis que JPEG et WebP sont ré-encodés à un paramètre de haute qualité pour que la différence visuelle avec l'original soit difficile à percevoir.

Quels formats de fichier sont pris en charge ?

En entrée, tout format que le navigateur peut décoder est accepté : PNG, JPEG, WebP, GIF et BMP couvrent presque tous les fichiers produits par un téléphone, un appareil photo ou un outil de capture. La sortie préserve le format source quand l'encodeur Canvas le prend en charge — PNG, JPEG et WebP fonctionnent en aller-retour direct. GIF et BMP, que l'API Canvas peut décoder mais pas ré-encoder, sont sauvegardés en PNG sans perte. Le nom du fichier redimensionné inclut les nouvelles dimensions (par exemple photo-1600x1200.jpg) pour qu'un lot reste facile à trier.

Déposez vos images, choisissez une taille, redimensionnez. Tout fonctionne dans votre onglet. Sans envoi, sans compte, sans attendre une file de serveur.