La première fois qu'un client a échoué à un audit Web Vitals, le coupable était une image de héros unique : une PNG de 4,2 Mo d'un designer avait exporté directement de Figma et était tombée dans la bibliothèque de médias WordPress. Il s'affichait à 1 200 px de large et était stocké à 3 800 px. La page a pris onze secondes pour peindre sur une connexion mobile étranglée. Je l'avais expédié.
C'était pendant mes jours WP Adminify, et cela m'a appris quelque chose qui a façonné chaque outil d'image que j'ai construit plus tard pour toolz.dev: La plupart des problèmes d'image ne sont pas des problèmes d'édition, ils sont plomberie problèmes. Mauvaises dimensions, format erroné, pas de compression. Vous n'avez pas besoin de Photoshop pour réparer tout cela. Vous avez besoin de trois ou quatre petits outils qui font une chose bien et fonctionnent rapidement.
Ce guide parcourt chaque opération d'image quotidienne - redimensionnement, compression, conversion de format et suppression d'arrière-plan - avec le raisonnement derrière chacune d'elles et les erreurs que j'ai commises afin que vous puissiez les ignorer. Chaque outil sur Toolz.dev traite les images entièrement dans votre navigateur. Vos photos ne touchent jamais un serveur, ce qui compte plus que les gens ne le pensent une fois qu'ils s'occupent du travail client ou des photos personnelles.
tl;dr : Pour les emplois courants, vous pouvez rester à 100 % dans le navigateur : Redimensionnement d'images Pour fixer les dimensions, Compresse d'images Pour couper la taille du fichier, Convertisseur de format Pour passer entre PNG/JPEG/WEBP/AVIF, et dissolvant d'arrière-plan Pour des produits propres et des photos de profil. Rien ne télécharge - le fichier se déplace de votre disque vers l'onglet du navigateur et y reste. L'ordre d'optimisation correct est presque toujours redimensionné, puis converti, puis compresse.
Pourquoi traiter les images dans le navigateur au lieu de les télécharger ?
La plupart des outils d'image en ligne gratuits fonctionnent de la même manière en dessous : vous téléchargez le fichier, un serveur le traite, vous téléchargez le résultat. La page Web est une peau fine sur une machine louée quelque part. Ce modèle a trois problèmes, et la confidentialité n'est que la plus bruyante.
La vie privée est la préoccupation évidente. Les photos de produits sous embargo, photos d'identité, captures d'écran de tableaux de bord internes, photos personnelles - les images dont les personnes ont le plus besoin de redimensionner ou de compresser sont exactement celles qui ne devraient pas rester dans le répertoire des températures d'un inconnu. "Les fichiers supprimés après une heure" est une promesse que vous ne pouvez pas auditer.
La latence est le coût le plus silencieux. Le téléchargement d'un lot d'images de 20 Mo de caméra sur le Wi-Fi d'Office prend plus de temps que le redimensionnement lui-même. Un outil basé sur un navigateur ignore le trajet aller-retour - le "téléchargement" est instantané car le fichier se déplace simplement dans la mémoire. Lorsque je traite un dossier de photos de produits, cette différence est la différence entre une pause café et un flux continu.
Et puis il y a les murs que personne ne mentionne jusqu'à ce qu'ils en ont atteint un : plafonds de taille de fichiers, limites quotidiennes, "mise à niveau vers Pro pour traiter des images de plus de 10 Mo", filigranes sur le niveau gratuit. Un outil côté client a exactement une limite, et c'est la RAM de votre machine.
La technologie pour faire tout cela dans un onglet est standard depuis des années. le HTML <canvas> Element et son contexte 2D peuvent décoder, rééchantillonner et re-encoder des images raster sans aucun serveur. Le propre navigateur est propre Image Le décodeur gère JPEG, PNG, WebP et de plus en plus AVIF. Il n'y a plus de raison technique pour envoyer une photo sur Internet juste pour faire 800 px de large.
Comment redimensionner une image aux bonnes dimensions ?
Le redimensionnement est l'opération que j'obtiens le plus, et obtenir les dimensions justes en amont empêche la plupart des problèmes de performances en aval. La règle que j'aurais aimé intérioriser plus tôt : ne stockez jamais une image beaucoup plus grande que la plus grande taille qu'il affichera jamais.
Le flux de travail sur le Redimensionnement d'images Outil :
- Faites glisser votre image sur l'outil ou cliquez pour parcourir.
- Entrez la largeur et la hauteur de la cible en pixels.
- Gardez le verrouillé par rapport à l'aspect, sauf si vous souhaitez délibérément vous étirer. Avec lui, la largeur ajuste automatiquement la hauteur afin que rien ne se déforme.
- Choisissez la méthode de rééchantillonnage (Bicubic est le paramètre sûr par défaut pour les photos ; le plus proche voisin pour le pixel art que vous souhaitez garder net).
- Processus et téléchargement.
Le numéro unique qui mérite d'être mémorisé est le multiplicateur de rétine. Un emplacement qui s'affiche à 800 px devrait contenir une image à environ 1 600 px afin qu'il reste net sur les écrans 2 × – et non le monstre de 3 800 px que j'ai livré la première fois. Doublez la taille de l'écran, pas cinq fois.
Voici une feuille de triche d'utilisation que je garde épinglée, car "quelle largeur devrait-elle être" est la question qui se pose sur chaque projet :
| cas d'utilisation | Largeur de la cible | format aspect | format |
|---|---|---|---|
| Héros du site Web | 1920 px | 16:9 | Webp |
| Blog / Image de contenu | 1200 px | 3:2 ou 16:9 | Webp |
| ongle de pouce | 320–400 px | 1:1 ou 4:3 | Webp |
| Publier une publication Instagram | 1080 px | 1:1 | jpeg |
| X / Twitter dans le flux | 1200 px | 16:9 | jpeg |
| En-tête d'e-mail | 600 px | 3:1 | jpeg |
| Produit de commerce électronique | 1 000 à 1 500 px | 1:1 | Webp ou PNG |
Une erreur que je vois encore dans la revue de code constamment : la mise à l'échelle. Création d'une image plus grand que sa source ne peut inventer des détails qui n'ont jamais été capturés - l'outil interpole simplement de nouveaux pixels, et au-delà d'environ 200 %, vous obtenez un résultat doux et pâteux. Si un client envoie un logo de 500 px et en a besoin à 2000 px, la réponse honnête est "réexporter à partir de la source vectorielle", pas "à upscale et espoir".
Comment compresser une image sans la détruire ?
La compression est l'endroit où vivent les véritables économies de poids de page. Les images sont généralement la chose la plus lourde sur une page Web, donc leur diminution est le travail de performance le plus élevé que la plupart des sites peuvent faire.
Il existe deux sortes, et la distinction décide de tout :
Compression avec perte Jette des données que l'œil humain est peu susceptible de manquer - une subtile variation de couleur, une texture à haute fréquence. Un JPEG à 80 % de qualité est souvent 60 à 70 % inférieur à la même image avec une qualité maximale sans différence visible à la taille normale d'affichage. C'est ce que vous voulez pour les photos.
compression sans perte Réorganise les données plus efficacement sans en supprimer aucune, l'image décompressée est identique au pixel pour le pixel. PNG fonctionne de cette façon. Utilisez-le lorsque chaque pixel compte, logos, captures d'écran, diagrammes, tout ce qui contient du texte net ou des bords durs.
le Compresse d'images L'outil vous permet de définir un niveau de qualité, de prévisualiser le résultat et de comparer les tailles de fichiers côte à côte avant de valider. Ma valeur par défaut honnête pour les photos Web est de 80 % de qualité - j'ai testé de plus en plus de pages, et 80 est le point où j'arrête de pouvoir dire la version compressée à partir de l'original à la taille réelle de la vue. Si vous voulez le raisonnement complet, le Guide de compression d'images Va en profondeur pourquoi ce nombre tient le coup.
L'erreur que j'ai commise pour une longue embarrassée : la compression avant Redimensionnement. Si vous compressez une image 3800 px, puis la redimensionnez à 1 200 px, vous avez dépensé tout cet effort de compression sur des pixels que vous êtes sur le point de jeter, et le fichier final est plus gros et pire que si vous le faisiez dans l'autre sens. Redimensionnez d'abord, puis compressez la plus petite image. Toujours.
Quel format d'image devriez-vous réellement utiliser ?
Le paysage de formats a plus de bonnes options qu'il n'en avait l'habitude, ce qui est un bon problème à avoir. Voici comment je décide, sans le gloss marketing.
jpeg est le format universel de perte - pris en charge partout, idéal pour les photographies, sans transparence. C'est le repli sûr et toujours le bon appel pour le courrier électronique, où le support client pour les nouveaux formats est un retournement de pièces.
png est sans perte avec une transparence totale. C'est le bon choix pour les captures d'écran, les logos et tout ce qui contient du texte ou des arêtes vives. c'est le injuste Choix de photos — une photo enregistrée en tant que PNG peut être plusieurs fois plus grande que la même photo que JPEG sans avantage visible.
Webp est ma valeur par défaut pour le Web en 2026. Il fait à la fois des pertes et des pertes sans perte, prend en charge la transparence et fonctionne à peu près 25 à 35 % moins que JPEG à une qualité comparable. Le support du navigateur est effectivement universel à ce stade. Si je devais choisir un format pour les images d'un nouveau site, c'est bien celui-là.
avif Comprend plus fort, généralement environ 50 % plus petit que JPEG, avec une excellente manipulation des gradients et de la texture fine. Les compromis sont plus lents et le support est plus lent et ce n'est pas tout à fait bon mais pas tout à fait partout. Je l'utilise comme le meilleur choix dans un <picture> Élément avec WebP en dessous.
SVG N'est-ce pas un format raster du tout - c'est un vecteur, il s'adapte donc à n'importe quelle taille sans un seul pixel flou. Utilisez-le pour les logos, les icônes et les illustrations. N'essayez pas de convertir une photo.
La conversion entre ces derniers est une tâche en deux clics sur le Convertisseur de format: Déposez l'image, choisissez le format cible, ajustez la qualité si elle est avec perte, téléchargez. Le modèle que j'expédie sur des sites réels utilise la propre négociation de format du navigateur :
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>
Le navigateur choisit le premier format qu'il comprend, de sorte qu'un téléphone moderne obtient un avif, un plus ancien obtient un WebP et tout ce qui est ancien obtient toujours un JPEG fonctionnel. Notez l'explicite width et height — Ce ne sont pas des décorations, ils réservent de l'espace de mise en page et empêchent la page de sauter au fur et à mesure que les images se chargent, ce qui est un décalage de mise en page cumulé.
Comment supprimer un arrière-plan d'image dans le navigateur ?
La suppression de l'arrière-plan signifiait autrefois un outil d'abonnement ou vingt minutes avec l'outil Plume dans Photoshop. Désormais, un modèle d'apprentissage automatique suffisamment petit pour s'exécuter dans un onglet de navigateur traite les cas courants en quelques secondes.
le dissolvant d'arrière-plan Analyse l'image, construit un masque de pixels séparant le sujet de l'arrière-plan et produit un PNG avec un canal alpha transparent. Téléchargez, attendez un instant, vérifiez les bords, téléchargez. Le tout reste local - le modèle fonctionne sur votre machine, donc même les photos de produits sensibles ne le quittent jamais.
Cela fonctionne mieux lorsque vous lui donnez une chance de combattre : un éclairage uniforme, un contraste décent entre le sujet et ce qui se cache derrière, et une source de résolution raisonnablement élevée. Les cheveux, la fourrure et les bords vaporeux sont toujours là où ces modèles ont du mal – si le résultat a un halo autour de la tête de quelqu'un, c'est le mode de défaillance auquel vous attendre, pas un bogue que vous pouvez configurer. Les sujets propres comme les produits emballés sont presque parfaits.
Quel est le bon ordre pour optimiser les images pour le Web ?
Chaque fois que j'ai sauté cette commande ou que je l'ai fait dans l'ordre, j'ai payé pour cela. Faites-le dans cet ordre et la sortie est à la fois plus petite et plus belle :
Étape 1 — Redimensionnez pour afficher les dimensions. Déterminez la plus grande taille sur laquelle l'image sera rendue, doublez-la pour la rétine et redimensionner à ça. Cette étape unique fait généralement plus pour la taille du fichier qu'autre chose, car vous supprimez des pixels qui n'allaient jamais être vus.
Étape 2 — Convertissez au bon format. convertir Photos sur Webp (ou AVIF avec un repli). Conservez les logos et les captures d'écran en tant que png. Gardez l'art vectoriel authentique comme SVG.
Étape 3 — Compressez la qualité cible. compresser À environ 80 % pour les images Web avec perte, puis le résultat est le résultat à la taille réelle.
Étape 4 : Servez de manière responsable en HTML. manier srcset Ainsi, les navigateurs téléchargent une taille appropriée à l'appareil et ajoutent loading="lazy" À tout ce qui se trouve sous le pli afin qu'il ne bloque pas la peinture initiale.
Un budget de performances lâche qui vaut la peine d'être conservé : des images de héros sous 200 Ko (ils génèrent de la peinture la plus importante, donc ils comptent le plus), des images de contenu régulières inférieures à 100 ko, des vignettes inférieures à 30 ko et des logos de moins de 10 ko. Utilisez SVG et vous le battrez généralement sans essayer. Ce ne sont pas des lois, ce sont des tests d'odeur. Si une seule image passe au-delà de son seau, cela vaut un second regard.
Questions fréquentes
Quel est le meilleur outil d'image en ligne gratuit ?
Cela dépend du travail, c'est pourquoi Toolz.dev les divise en outils ciblés plutôt qu'en un éditeur gonflé. Pour les dimensions, utilisez Redimensionnement d'images. Pour la taille du fichier, utilisez Compresse d'images. Pour changer de format, utilisez le Convertisseur de format. Pour isoler les sujets, utilisez le dissolvant d'arrière-plan. Les quatre sont gratuits, n'ont besoin d'aucune inscription et traitent les images entièrement dans votre navigateur.
Comment redimensionner une image sans perdre de qualité ?
Réduction de l'échelle - simplifiant une image - ne coûte pratiquement aucune qualité car la source a plus de détails que les besoins de taille plus petite. Utilisez le rééchantillonnage bicubique pour un résultat le plus fluide. La mise à l'échelle est la direction risquée : l'outil doit inventer des pixels, de sorte que la qualité baisse et dépasse environ 200 % de la taille d'origine. Lorsque vous avez besoin d'une version beaucoup plus grande, revenez au fichier source d'origine plutôt que d'agrandir une petite copie.
Quel format d'image dois-je utiliser pour mon site Web ?
Utilisez WebP pour les photographies et la plupart des images de contenu, c'est environ 25 à 35 % plus petit que le JPEG avec une prise en charge quasi universelle en 2026. Utilisez SVG pour les logos et les icônes afin qu'ils restent nets à n'importe quelle taille. Utilisez la PNG uniquement lorsque vous avez besoin d'une qualité sans perte avec une transparence. Atteignez l'AVIF lorsque vous souhaitez une compression maximale et pouvez l'associer à un repli WebP dans un <picture> élément.
Dois-je redimensionner avant ou après la compression ?
Redimensionnez d'abord, puis compressez. La compression d'une grande image, puis sa rétrécissement, gaspille des efforts sur les pixels qui sont rejetés pendant le redimensionnement, et le fichier final finit par être de plus grande et de moindre qualité que si vous le faisiez dans le bon ordre. Le redimensionnement signifie d'abord que le compresseur fonctionne sur la plus petite image, produisant le plus petit et le plus propre des résultats.
Est-il sécuritaire d'utiliser des outils d'image en ligne avec des photos personnelles ou clientes ?
La plupart des outils d'image en ligne téléchargent vos photos sur leurs serveurs pour les traiter, ce qui est un véritable souci pour tout ce qui est privé ou sous NDA. Les outils d'image sur Toolz.dev traitent tout ce qui est client dans votre navigateur à l'aide de l'API Canvas et, pour la suppression de l'arrière-plan, un modèle ML intégré. Vos images ne quittent jamais votre appareil, elles sont donc sûres pour les images personnelles, le travail des clients et les photos de produits confidentielles.
Quelle est la différence entre WebP et AVIF ?
Les deux battent JPEG et PNG en compression. WebP est environ 25 à 35 % plus petit que le JPEG avec une prise en charge efficace du navigateur universel, ce qui en fait le défaut pratique. AVIF pousse la compression plus loin - généralement environ 50 % plus petit que le JPEG - et gère mieux les dégradés et la texture, mais il encode plus lentement et le support n'est pas encore tout à fait partout. L'approche courante consiste à servir d'abord Avif avec WebP comme solution de secours afin que chaque navigateur obtienne le meilleur format qu'il puisse décoder.
Comment supprimer l'arrière-plan d'une image gratuitement ?
Ouvrez le dissolvant d'arrière-plan, déposez votre image et un modèle dans le navigateur détecte le sujet et remplace l'arrière-plan par la transparence, vous donnant un PNG par un canal alpha. Il fonctionne mieux avec un éclairage uniforme et un contraste clair entre le sujet et l'arrière-plan. Les détails fins comme les cheveux flyaway sont toujours le boîtier dur pour tout outil automatique, alors vérifiez les bords avant de vous fier au résultat.
Pourquoi mes images de sites Web ralentissent-elles la page ?
Presque toujours, c'est l'une des trois choses : l'image est stockée beaucoup plus grande qu'elle n'affiche, elle est dans un ancien format comme une photo PNG non compressée, ou elle n'a jamais été passée à travers une passe de compression. Corrigez-les dans l'ordre - redimensionnez pour afficher les dimensions, convertissez-les en WebP, puis compressez à environ 80 % de qualité - et vous réduirez généralement le poids total de l'image de plus de la moitié, ce qui apparaît directement dans votre plus grand score de peinture.
Comment obtenir une image de moins de 100 Ko ?
Travaillez dans cet ordre et arrêtez-vous dès que vous êtes sous la limite : redimensionnez aux dimensions auxquelles l'image affiche réellement, convertissez-vous en WebP, puis compressez à 80 % de qualité. Pour une photo typique de 1600px à l'échelle, cette combinaison se situe entre 60 et 120 Ko. Si vous avez fini, baissez la qualité à 70 % avant de réduire davantage les dimensions – la perte de qualité à 70 % est beaucoup moins visible qu'une image visiblement plus petite.
Puis-je convertir des photos HEIC de mon iPhone en JPG ?
Oui. Déposez le fichier .heic dans le Convertisseur de format Et exportez-le en tant que JPG, PNG ou WebP. HEIC est le format enregistré par défaut sur les iPhones, et bien qu'il comprenne bien, la plupart des applications Windows, des navigateurs plus anciens et des systèmes de gestion de contenu refusent toujours de l'ouvrir, c'est pourquoi la conversion en JPG ou WebP avant de les télécharger n'importe où est généralement la sécurité.

