J'ai expédié une fois un logo converti sur un site client et il est revenu avec un rectangle noir où se trouvait le fond transparent. J'avais converti un PNG en JPEG sans y penser. La partie étrange était que je attendu Blanc - Chaque article que j'avais lu a dit que "la transparence devient blanche", et j'ai passé vingt minutes à supposer que mon code était interrompu avant de lire la spécification HTML et de découvrir que le navigateur faisait exactement ce qu'il avait été dit.
C'est le thème honnête de ce guide. le Convertisseur de format d'image Sur Toolz.dev est un emballage fin sur le propre encodeur de canevas du navigateur. Cela lui donne de réels avantages - rien ne télécharge, c'est instantané, cela fonctionne hors ligne une fois chargé - et des limites réelles que la plupart des pages "convertissent n'importe quelle image dans n'importe quel format" ne seront pas admises. J'ai construit celui-ci, donc je vous dirai les deux moitiés.
tl;dr : le Convertisseur de format d'image Prend n'importe quelle image que votre navigateur peut ouvrir et la ré-encode comme PNG, JPEG ou WebP — Ces trois-là, et seulement ces trois. Il n'y a pas de sortie AVIF, GIF ou SVG, car l'outil utilise l'encodeur Canvas du navigateur et c'est ce que prend en charge le canevas. Choisissez une cible, faites glisser le curseur de qualité (JPEG et WebP uniquement — PNG l'ignore), téléchargez. Deux choses à savoir avant de convertir : Transparence Composites sur le noir lorsque vous ciblez JPEG, par spécification et Les métadonnées EXIF sont supprimées À chaque conversion, car un réencodage de canevas ne contient que des pixels. Pour réduire les fichiers, associez-le à Compresseur d'images et le Redimensionnement d'images outil.
Qu'est-ce que ce convertisseur prend réellement en charge ?
Obtenons la portée de la première, car c'est là que la plupart des guides de format sont sur la survente.
Entrée : Le sélecteur de fichiers accepte image/*, et le fichier est chargé dans un plain <img> élément. Donc, si votre navigateur peut l'afficher, l'outil peut le lire — PNG, JPEG, WebP, GIF, BMP, AVIF et dans la plupart des navigateurs modernes, SVG.
Sortie : PNG, JPEG, WebP. Trois boutons. C'est la liste.
La raison n'est pas la paresse, c'est la plate-forme. L'outil dessine votre image dans un <canvas> et les appels canvas.toBlob(callback, type, quality). Le niveau de vie HTML nécessite chaque navigateur pour prendre en charge image/png Pour cet appel et laisse d'autres formats facultatifs ; en pratique, image/jpeg et image/webp sont pris en charge partout et image/avif L'encodage ne l'est pas. Il n'y a pas d'API de navigateur pour écrire un AVIF ou un GIF à partir d'un canevas. Un site qui vous offre la sortie AVIF est soit expédié un encodeur WebAssembly (des centaines de kilo-octets de téléchargement) ou, bien plus souvent, que le téléchargement de votre image sur un serveur. Ce n'est pas non plus ce que fait cet outil.
Voici donc le tableau de comparaison honnête, d'abord :
| tu veux | Cet outil | pourquoi |
|---|---|---|
| PNG → JPEG | oui | CODES ENCORE image/jpeg |
| PNG → WebP | oui | CODES ENCORE image/webp |
| JPEG → WebP | oui | La conversion la plus utile ici |
| Webp → PNG/JPEG | oui | Pour les outils qui ne peuvent toujours pas lire WebP |
| AVIF → WebP | Oui (AVIF à seulement) | Le navigateur décode AVIF; ne peut pas l'encoder |
| Tout → AVIF | non | Aucun encodeur AVIF de Canvas n'existe |
| GIF animé → WebP animé | non | un <img> Donne au canevas un cadre |
| Tout → SVG | non | SVG est vecteur; il s'agit d'un pipeline raster |
| Lot de 200 fichiers | non | Un fichier à la fois |
Si vous avez besoin d'Avif ou d'un WebP animé, utilisez squoosh localement, cwebp/avifenc à partir de la ligne de commande ou de l'étape d'image de votre pipeline de construction. Je préfère vous envoyer quelque part utile que de faire semblant.
Pourquoi JPEG rend-il mon arrière-plan transparent noir ?
Parce que la spécification le dit, et je n'ai appris cela qu'après l'e-mail client.
JPEG n'a pas de canal alpha. Lorsque vous demandez à un canevas de sérialiser dans un format qui ne prend pas en charge l'alpha, le niveau de vie HTML est explicite : le bitmap doit être composé sur un Fond noir solide avant l'encodage. Pas blanc. Noir. Chrome, Firefox et Safari suivent tous ceci, c'est pourquoi le comportement est cohérent et pourquoi il surprend tout le monde exactement une fois.
Alors : Convertir un logo PNG transparent en JPEG vous donnera une boîte noire derrière. A chaque fois. Ce n'est pas un bogue dans l'outil, c'est la plate-forme qui est cohérente, et aucune quantité de glisser du curseur de qualité ne le corrige.
Que faire à la place :
- Gardez la transparence ? cible png ou Webp. Les deux portent alpha. Webp sera généralement le plus petit des deux.
- Besoin de JPEG spécifiquement ? Aplatissez l'image sur la couleur d'arrière-plan que vous souhaitez d'abord dans un éditeur, à ce moment- convertir.
- Ne convertir que une photo ? Les photos n'ont aucune transparence, donc cela ne se présente jamais. convertir.
C'est la façon la plus courante pour les gens d'endommager une image avec un convertisseur, et cela vaut la peine d'être intériorisé : Alpha est une propriété du format, et non de votre fichier. Choisir JPEG, c'est choisir de jeter le canal alpha.
Quoi d'autre se perd dans un réencodage de toile ?
Une toile contient des pixels. Juste des pixels. Tout le reste de votre fichier d'origine est supprimé lorsque le navigateur ré-encode, ce qui attrape les gens :
Exif est parti. Marque et modèle de l'appareil photo, objectif, exposition, date de capture, champs de droits d'auteur et Coordonnées GPS Tout disparaît. Il s'agit d'une victoire par accident à la confidentialité - convertir une photo de téléphone avant de publier une suppression de l'emplacement où il a été pris - mais si vous êtes un archiviste ou que vous avez besoin du champ de droits d'auteur pour survivre, n'exécutez pas les originaux via un convertisseur basé sur une toile. Convertir une copie.
Les profils de couleur sont aplatis. Une image taguée avec un profil large comme Display P3 ou Adobe RGB est dessinée sur une toile qui, dans la pratique, la traite comme sRGB. Pour les images Web, c'est ce que vous voulez de toute façon. Pour les travaux d'impression, ce n'est pas.
L'animation se réduit à une seule image. un <img> L'élément remet à la toile quel que soit le cadre. Déposez un GIF animé de douze secondes et vous obtiendrez un seul encore. L'outil ne vous avertit pas de cela, ce que je considère comme un véritable aspect brut plutôt qu'une fonctionnalité.
Tout le reste ré-encode à partir de pixels décodés. Ce qui nous amène à la seule règle qui compte le plus.
Qu'est-ce que la perte de génération et comment puis-je l'éviter ?
Chaque fois que vous enregistrez un format avec perte, l'encodeur jette les données. Jetez des données, décodez-les et jetez-en plus, et les dégâts sont aggravés. Il s'agit de la perte de génération, et c'est la raison pour laquelle vos modèles de mèmes semblent avoir été faxés.
La règle est courte : Convertissez toujours du meilleur original que vous ayez, jamais à partir d'une copie convertie.
Concrètement, JPEG → WebP → JPEG est pire que le JPEG d'origine, deux fois plus. Les premiers artefacts d'encodage sont traités comme un détail d'image réel par le deuxième encodage, qui dépense fidèlement les bits à les préserver. Si vous avez un fichier RAW ou une exportation PNG, commencez par là.
Il y a un corollaire qui fait trébucher les gens : La conversion de JPEG en PNG ne restaure pas la qualité. PNG est sans perte, il préservera donc parfaitement votre image, y compris chaque artefact de compression déjà cuit dans les pixels. Vous obtenez la même image endommagée dans un fichier trois ou quatre fois plus grand. PNG-FROM-JPEG n'en vaut la peine que lorsque vous êtes sur le point de faire de nombreuses séries de montages et que vous souhaitez éviter de recompresser à chaque sauvegarde.
Quel format dois-je réellement choisir ?
Sauter le format taxonomie; voici la décision dans l'ordre que je le prends.
Est-ce une photographie ? Webp à 80–85. Si quelque chose dans votre pipeline ne peut pas lire WebP, JPEG à 80–85.
A-t-il de la transparence ? Webp.ng PNG si vous avez besoin d'une compatibilité maximale.
S'agit-il d'une capture d'écran, d'une simulation d'interface utilisateur, d'un graphique ou de tout ce qui contient du texte et de la couleur plate ? PNG, ou Webp. JPEG's Discret Cosinus Transformer les frottis tranchants en bruit de moustique visible autour du lettrage - Il a été conçu à la fin des années 1980 pour les photographies en tons continus (le format est normalisé comme ITU-T T.81 / ISO/IEC 10918-1) et le texte est exactement le contenu qu'il gère le plus.
Est-ce un logo ou une icône dont vous contrôlez la source ? Ni l'un ni l'autre - n'utilisez SVG et ne le mettez pas du tout dans un convertisseur raster.
Pour les spécifications derrière ces informations : PNG est ISO/CEI 15948, et WebP a finalement été publié sous le nom de RFC 9649 En 2024, quatorze ans après que Google l'a expédié. Sur la taille, la propre étude comparative de Google place WebP avec une perte d'environ 25 à 34 % que JPEG à un SSIM équivalent et WebP sans perte à environ 26 % de moins que la PNG. Ce sont les numéros des fournisseurs sur le corpus du fournisseur - les traitent comme un indice fort, pas une promesse sur votre image spécifique. La raison pour laquelle je suis à l'aise de les citer est qu'ils ont suffisamment bien correspondu mes résultats sur de véritables captures d'écran et des photos au fil des ans. Le vôtre peut différer, c'est pourquoi l'outil vous indique la taille de la source avant de convertir.
Comment convertir une image sur toolz.dev ?
Étape 1 : Ouvrir le convertisseur
aller au Convertisseur de format d'image. Rien à installer, aucun compte.
Étape 2 : Téléchargez votre image
Cliquez sur la zone de téléchargement et choisissez un fichier. Il se charge dans votre navigateur via une URL d'objet - le fichier n'est jamais envoyé nulle part. Vous verrez le nom de fichier et sa taille.
Étape 3 : Vérifiez la lecture du format
L'outil montre Actuel → Cible. "Current" est lu à partir du type de fichier MIME, donc un .jpg Fichiers de rapports sous forme JPEG. Check utile sur la santé mentale lorsque quelqu'un a renommé une extension de fichier sans le convertir réellement, ce qui se produit plus que vous ne le pensez.
Étape 4 : Choisissez votre cible
PNG, JPEG ou WebP.
Étape 5 : Définir la qualité - si cela s'applique
Le curseur de qualité (1 à 100, par défaut à 90) N'apparaît que pour JPEG et WebP. C'est délibéré : la PNG est sans perte et canvas.toBlob ignore entièrement l'argument de la qualité pour image/png, donc montrer un curseur qui ne fait rien ne serait un mensonge.
Pour savoir où le définir : 90 est la valeur par défaut et est presque impossible à distinguer de l'original pour la plupart des contenus. C'est là que je travaille réellement - nettement plus petit, toujours propre. En dessous de 60, vous le verrez sur des photos et sur tout ce qui contient du texte, vous le verrez beaucoup plus tôt.
Étape 6 : Convertir et télécharger
choquer Convertir et télécharger. L'encodage se produit sur votre ordinateur et le fichier est enregistré sous converted_<original-name>.<ext>. Les dimensions sont conservées exactement - le convertisseur passe la largeur et la hauteur de votre image, de sorte que cette étape modifie l'encodage et rien d'autre.
Convertir ou compresser - Lequel ai-je besoin ?
Les gens recherchent un convertisseur lorsqu'ils veulent un fichier plus petit, et souvent ce n'est pas le mauvais outil. Trois emplois différents, trois outils différents :
| but | outil | Ce qui change |
|---|---|---|
| Modifier l'encodage | Convertisseur de format | Format, qualité |
| Même format, fichier plus petit | Compresseur d'images | Qualité seulement |
| Moins de pixels | Redimensionnement d'images | dimensions |
Et la plus grande victoire est presque toujours celle que les gens sautent. Si vous servez une photo 4000×3000 dans une mise en page de 1 200 px, Redimensionner les temps de chaque choix de format combiné — Vous jetez 90% des pixels que le navigateur allait réduire et supprimer de toute façon. Redimensionnez d'abord, puis convertissez. Le faire dans cet ordre prend régulièrement un PNG de 4 Mo sous 200 Ko, et aucune sélection de format intelligent sur l'original en taille réelle ne se rapproche.
Une habitude de plus qui vaut la peine d'être construite : gardez vos originaux. Archiver les maîtres sans perte, génèrent des dérivés avec perte pour la distribution. Lorsque AVIF-Everywhere arrive enfin ou le prochain format après, vous allez réexporter à partir de sources propres au lieu de le regretter.
Questions fréquentes
Quel format d'image convient le mieux aux sites Web ?
WebP, pour la plupart des contenus. Il est plus petit que le JPEG pour les photos et plus petit que la PNG pour les graphiques, il prend en charge la transparence et chaque navigateur actuel le lit - Safari était le dernier référent et la prise en charge ajoutée dans la version 14. Avif compresse mieux encore, mais vous ne pouvez pas le produire dans un canevas de navigateur, vous avez besoin d'une étape de construction ou d'un encodeur de bureau.
Cet outil peut-il convertir mon image en AVIF ?
non . Le convertisseur ne produit que PNG, JPEG et WebP, car il utilise l'encodeur Canvas du navigateur et aucun navigateur ne peut coder AVIF à partir d'un canevas. Votre navigateur peut décoder AVIF, vous pouvez donc convertir un fichier AVIF à Webp ou PNG ici - mais pas dans l'autre sens. Pour la sortie AVIF, utilisez un encodeur de ligne de commande comme avifenc ou le pipeline d'images de votre framework.
Pourquoi mon PNG transparent a-t-il obtenu un fond noir après la conversion en JPEG ?
Parce que JPEG n'a pas de canal alpha et la spécification HTML indique qu'une sérialisation de canevas dans un format sans prise en charge alpha doit compositer l'image sur un fond noir solide. C'est un comportement mandaté par spécification, pas un bogue, et c'est la même chose dans tous les navigateurs. Convertissez-vous en PNG ou WebP à la place si vous avez besoin de la transparence préservée.
La conversion d'une image supprime-t-elle ses données EXIF ?
Oui, tout cela, y compris les coordonnées GPS, les paramètres de la caméra et la date de capture. L'outil dessine votre image sur un canevas et ré-encode les pixels, et un canevas ne contient aucune métadonnée. C'est utile si vous supprimez les données de localisation avant de publier une photo, et un problème si vous avez besoin des métadonnées, alors conservez un original non converti dans les deux cas.
Puis-je convertir un GIF animé en un WebP animé ?
Pas avec cet outil. Il charge votre image dans un <img> Élément et capture un seul cadre sur le canevas, de sorte qu'un GIF animé ressort comme une image fixe. Le WebP animé nécessite un véritable encodeur multi-images — Utilisation gif2webp des outils WebP de Google, ou convertissez l'animation en MP4, qui sera considérablement plus petite que l'un ou l'autre.
La conversion de JPEG en PNG améliorera-t-elle la qualité ?
non PNG est sans perte, il conserve donc exactement ce qu'il est donné, y compris les artefacts de compression déjà enfoncés dans les pixels du JPEG. Vous vous retrouvez avec une image d'apparence identique dans un fichier beaucoup plus grand. Les données perdues sont perdues, aucun changement de format ne le ramène.
Y a-t-il une limite de taille de fichier ?
Aucune limite stricte n'est appliquée. Le plafond pratique est la mémoire de votre appareil, puisque l'image entière est décodée en un bitmap de toile à environ 1,25 Mo de RAM, une photo de 8 000 × 6 000 nécessite environ 192 Mo de RAM. Les navigateurs de bureau gèrent la sortie de caméra typique sans plainte ; les téléphones plus anciens peuvent avoir des problèmes avec des fichiers très volumineux.
Quelle est la différence entre PNG et JPEG ?
JPEG est avec une perte de poids et est conçu pour les photographies : il élimine les détails pour atteindre les petits fichiers, et il n'a aucune transparence. PNG est sans perte et conçu pour les graphiques, les captures d'écran et les logos : il conserve exactement chaque pixel et prend en charge un arrière-plan transparent, au prix de fichiers volumineux pour les photos. Vous pouvez convertir entre eux ici, mais rappelez-vous qu'un PNG transparent enregistré au format JPEG obtient un arrière-plan solide, car JPEG n'a pas de canal alpha.
Comment convertir une image en webp gratuitement ?
Chargez votre PNG ou JPEG, choisissez WebP comme format de sortie, définissez la qualité si vous souhaitez un fichier plus petit et téléchargez - il est gratuit et s'exécute entièrement dans votre navigateur. Webp est généralement la conversion qui vaut la peine d'être faite pour le Web, car elle est plus petite que JPEG et PNG tout en prenant en charge la transparence et est lu par tous les navigateurs actuels.
Mon image est-elle téléchargée sur un serveur ?
non . Le fichier est lu localement avec une URL d'objet, décodée par votre navigateur, réencodée par la toile de votre navigateur et enregistrée par votre navigateur. Vous pouvez vérifier cela vous-même : ouvrez DevTools, accédez à l'onglet Réseau et convertissez une image - vous ne verrez aucun téléchargement. Une fois la page chargée, la conversion fonctionne avec votre Wi-Fi désactivé.
la version courte
Un canevas de navigateur est un bon convertisseur d'images honnête pour trois formats et un mauvais pour tout le reste. Dans PNG, JPEG et WebP, c'est instantané, privé et gratuit, et il couvre la conversion qui compte réellement pour le Web : amener vos photos sur Webp. En dehors de ces trois-là, cela ne peut pas aider, et je préfère le dire plutôt que de vous laisser découvrir avec un rectangle noir sur la page d'accueil d'un client.
Avant de convertir quoi que ce soit, demandez-vous si vous avez besoin de transparence (alors pas JPEG), si vous avez besoin des métadonnées (alors conservez l'original) et si l'image est simplement trop de pixels (alors redimensionner premier). Obtenez les trois bons et le choix de format est la partie la plus facile.
le Convertisseur de format d'image est ici. Pour le reste du flux de travail d'image, il y a le Compresseur d'images, le Redimensionnement d'images outil, et — pour les découpes à fond plat — le dissolvant d'arrière-plan. L'image plus large est dans le Guide des outils d'image et le Guide de compression d'images.
