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 disait transparence " ; devient blanc." ; Il est devenu noir, et j'ai passé vingt minutes à supposer que mon code était cassé avant de lire la spécification HTML et d'apprendre que le navigateur faisait exactement ce qu'on lui disait.
C'est le thème honnête de ce guide. le Convertisseur de format d'image sur Toolz.dev est un wrapper fin sur le navigateur' ; propre encodeur de canevas Cela lui donne de réels avantages - rien ne télécharge, it' ; s instant, il fonctionne hors ligne une fois chargé - et des limites réelles que la plupart des " ; convertissent n'importe quelle image à n'importe quel format" ; les pages ne l'admettront pas J'ai construit celui-ci, donc I' ; vous diront 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-là Il n'y a pas de sortie AVIF, GIF, ou SVG, car l'outil utilise le navigateur' ; s encodeur de canevas et c'est ce que le canevas prend en charge Choisissez une cible, faites glisser le curseur de qualité (JPEG et WebP seulement - 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. Ainsi, 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 n'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 une sortie AVIF est soit l'expédition d'un encodeur WebAssembly (des centaines de kilo-octets de téléchargement) ou - bien plus souvent - 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 en matière de confidentialité par accident - convertir une photo de téléphone avant de la publier enlève l'emplacement où elle a été prise - mais si vous et le numéro 39 ; êtes archiviste ou si vous avez besoin du champ de droits d'auteur pour survivre, n'exécutez pas d'originaux via un convertisseur sur 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, donc il préservera votre image parfaitement - 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-de-JPEG ne vaut la peine que comme étape intermédiaire lorsque vous' ; êtes sur le point de faire de nombreuses rondes d'édition et voulez éviter de re-compresser à 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' ; la transformation discrète en cosinus enduit les arêtes vives du bruit visible des moustiques autour du lettrage - elle a été conçue à la fin des années 1980 pour les photographies à tonalité continue (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 moins.
Est-ce un logo ou une icône dont vous contrôlez la source ? Ni l'un ni l'autre - utilisez SVG et don' ; pas du tout de le faire passer par 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, Google' ; sa propre étude de comparaison évalue la perte WebP à environ 25 %, soit 4 % de moins que JPEG à un SSIM équivalent et WebP sans perte à environ 26 % de moins que PNG. Ce sont le fournisseur' ; les numéros sur le corpus du fournisseur' ; les traitent comme un indice fort, pas comme une promesse concernant votre image spécifique. La raison pour laquelle I' ; je suis à l'aise de les citer est qu'ils et n°39 ; ont suffisamment comparé mes résultats sur des captures d'écran réelles et des photos au fil des années. Les vôtres peuvent différer, c'est-ce qui est la raison pour laquelle vous montre la taille de l'outil avant.
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 et n°39 ; verra 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éfinissez la qualité - si elle 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 du contenu. 808 est l'endroit où je travaille réellement - significativement plus petit, toujours propre. En dessous de 60 vous et n°39 ; je le verrai sur les photos et sur tout ce qui contient du texte, vous et n°39 ; je le verrai 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 préservées exactement - le convertisseur fait passer votre image' ; sa propre largeur et hauteur, donc cette étape change l'encodage et rien d'autre.
Convertir ou compresser - De laquelle 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 et n°39 ; jetez 90 % des pixels que le navigateur allait de toute façon réduire et supprimer. Redimensionner d'abord, puis convertir. Le faire dans cet ordre prend régulièrement un PNG de 4 Mo inférieur à 200 Ko, et aucune sélection de format intelligente sur l'original pleine grandeur 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 du contenu It' ; s plus petit que JPEG pour les photos et plus petit que PNG pour les graphiques, il prend en charge la transparence, et chaque navigateur actuel le lit - Safari était le dernier support et le support ajouté dans la version 14. AVIF compresse mieux encore, mais vous pouvez & #39 ; t 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 - tout simplement pas 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 That' ; s utile si vous' ; re-débarrasser les données de localisation avant de poster une photo, et un problème si vous avez besoin des métadonnées, alors gardez un original non converti dans un sens ou dans l'autre.
Puis-je convertir un GIF animé en un WebP animé ?
Pas avec cet outil. Il charge votre image dans un <img> element et capture une seule image sur le canevas, donc un GIF animé sort comme une seule image fixe 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, donc il préserve exactement ce qu'il & #39 ; s donné - y compris les artefacts de compression déjà cuits dans les pixels JPEG& #39 ; s. 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 les ramène.
Y a-t-il une limite de taille de fichier ?
Aucune limite stricte n'est appliquée Le plafond pratique est votre appareil' ; s mémoire, puisque l'image entière est décodée en un bitmap de toile à peu près largeur × hauteur × 4 octets - une photo de 8000×6000 a besoin d'environ 192 Mo de RAM comme pixels bruts avant même le démarrage de l'encodage Les navigateurs de bureau gèrent la sortie typique de l'appareil photo sans se plaindre ; les téléphones plus anciens peuvent avoir du mal 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 voulez 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, puisqu'il est plus petit que les deux JPEG et PNG tout en supportant la transparence et est lu par chaque navigateur actuel.
Mon image est-elle téléchargée sur un serveur ?
Non. Le fichier est lu localement avec une URL d'objet, décodé par votre navigateur, ré-encodé par votre navigateur' ; s canevas, et enregistré par votre navigateur Vous pouvez le vérifier vous-même : ouvrez DevTools, allez dans 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.
