Convertisseur texte → image, gratuit

Pourquoi vous devez transformer un texte en image

Le texte et les images voyagent très différemment sur internet. Le texte est reformaté par chaque plateforme qui le touche, les polices changent, les sauts de ligne changent, l'indentation s'effondre, les caractères spéciaux sont mutilés. Les images sont atomiques : chaque pixel survit. Donc chaque fois que la mise en forme compte, transformer le texte en image est le moyen le plus simple de s'assurer que ce que vous avez écrit est ce que les gens voient. Scénarios courants : extraits de code partagés sur Twitter/X (qui supprime l'indentation et les sauts de ligne des publications textuelles mais rend volontiers les images) ; graphiques de citation pour Instagram (les légendes Instagram n'autorisent aucun formatage de police, chaque publication typographique esthétique est une image de texte) ; signatures et bannières de forum sur phpBB ou Discourse où les images téléversées survivent mais la typographie exotique en BBCode ne survit pas ; capture d'écran-sans-l'interface quand vous voulez partager un morceau de texte comme si vous aviez pris une capture d'écran mais sans le chrome de navigateur environnant ; images de bouton personnalisées pour les sites web à l'ancienne ou les e-mails HTML où la licence des webfonts pose problème ; WhatsApp Status et superpositions Snapchat où le texte image stylisé se lit mieux que les outils de légende propres des plateformes ; signatures d'e-mail pour les clients qui dépouillent le formatage riche (les anciennes versions d'Outlook sont notoires, une signature à base d'image est le contournement). Le fil commun : quand vous ne pouvez pas faire confiance à la destination pour rendre le texte comme vous le voulez, rendez-le vous-même en image d'abord.

Comment l'API Canvas rend le texte

L'élément HTML <canvas> expose un contexte de rendu 2D qui gère le texte via trois méthodes centrales. ctx.font accepte la même notation abrégée que CSS ("bold 32px Helvetica, Arial, sans-serif"), graisse de police, taille de police et famille de police en une seule chaîne. ctx.fillStyle définit la couleur (toute valeur de couleur CSS : hex, rgb, hsl, nommée). ctx.fillText(text, x, y) rend le texte à la position donnée en utilisant la police et le remplissage actuels. Deux méthodes de support comptent : ctx.measureText(text) renvoie un objet TextMetrics contenant la width rendue et (dans les navigateurs modernes) actualBoundingBoxAscent et actualBoundingBoxDescent pour le calcul de la boîte englobante verticale ; ctx.textAlign contrôle l'alignement horizontal (left, right, center, start, end) par rapport à la coordonnée x ; ctx.textBaseline contrôle l'alignement vertical (top, middle, alphabetic, hanging, ideographic) par rapport à la coordonnée y. La ligne de base alphabetic par défaut place la coordonnée y à la ligne de base des lettres minuscules, ce qui est la convention typographique mais contre-intuitive pour la mise en page, la plupart du code de rendu bascule vers top pour un positionnement y prévisible. Le texte multiligne n'est pas auto-enveloppé : fillText rend une ligne à une seule position. L'enveloppement manuel mot par mot en utilisant measureText dans une boucle est le motif standard.

Pourquoi seulement sept polices

Les sept choix de polices ici, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, sont les « polices web-safe » canoniques qui sont livrées par défaut sur essentiellement toutes les installations de bureau Windows, macOS et la plupart des Linux. La liste a émergé du projet Core Fonts for the Web de Microsoft (1996-2002), qui distribuait Impact, Verdana, Georgia, Trebuchet MS et d'autres en tant que téléchargements TrueType gratuits pour semer la cohérence multiplateforme. Choisir uniquement des polices système signifie que l'image rendue a la même apparence indépendamment de l'appareil qui la génère ; utiliser une Google Font nécessiterait de charger d'abord le fichier de police via la Promise document.fonts.ready avant tout rendu de texte Canvas, un chemin viable mais plus lourd. Pour les outils dont le travail spécifique est la « typographie sophistiquée », charger des polices personnalisées est essentiel. Pour un générateur texte-vers-image utilitaire rapide, les sept choix web-safe couvrent essentiellement chaque registre typographique courant : Arial / Helvetica (sans-serif neutre, le cheval de bataille), Verdana (sans-serif à grande hauteur d'x conçu pour la lecture à l'écran), Georgia / Times New Roman (serif pour l'élégance / la formalité), Courier New (monospace pour le contenu de type code), Impact (la face d'affichage gras condensée canonique des mèmes). Pour une typographie délibérément excentrique ou marquée, utilisez un outil dédié qui charge des polices personnalisées.

Netteté haute-DPI / Retina

Une implémentation Canvas naïve produit une sortie floue sur les écrans haute densité. Les téléphones, tablettes et ordinateurs portables « Retina » modernes ont un window.devicePixelRatio de 2 (parfois 3), ce qui signifie que chaque pixel CSS correspond à 2 (ou 3) pixels physiques. Un Canvas rendu à ses dimensions CSS n'a qu'un pixel de détail par pixel CSS, qui est étiré 2x pour l'affichage, produisant une douceur visible. La solution consiste à définir les dimensions de stockage du Canvas (canvas.width et canvas.height) aux dimensions CSS multipliées par devicePixelRatio, puis à utiliser CSS pour verrouiller la taille affichée aux dimensions CSS originales, puis à appeler ctx.scale(devicePixelRatio, devicePixelRatio) afin que toutes les opérations de dessin suivantes utilisent le système de coordonnées CSS original. Cet outil applique automatiquement la correction haute-DPI, le PNG téléchargé est net à la résolution retina et s'imprime proprement aux tailles de document typiques.

Extraits de code en images, utilisez plutôt Carbon

Pour partager des extraits de code en tant qu'images, le cas d'usage le plus courant pour « texte-vers-image », il existe des outils dédiés qui gèrent la coloration syntaxique, la détection de langue, les préréglages de thème et la décoration de chrome de fenêtre bien mieux qu'un générateur générique texte-vers-image ne pourrait le faire. Carbon (Dawn Labs, lancé 2017, carbon.now.sh) est l'option canonique : collez le code, choisissez une langue et un thème, déposez la sortie rendue pour Twitter/Slack/articles de blog. Ray.so (Raycast, lancé 2022) est le concurrent moderne de Carbon avec une esthétique par défaut légèrement plus propre et une meilleure gestion du thème sombre. Codeimg.io, Chalk.ist, Snappify et CodeSnap concurrencent dans le même créneau avec divers différenciateurs (modèles, dispositions multi-fenêtres, arrière-plans de marque). Pour de la prose simple, des titres, des citations et des signatures, ce générateur est la bonne forme ; pour du code, utilisez Carbon.

PNG vs JPEG vs WebP pour les images de texte

Pour les images qui contiennent principalement du texte (ce que cet outil produit), PNG est presque toujours le bon format. Le texte a des bords nets et de grandes zones de couleur plate, exactement ce que JPEG gère le moins bien. La transformée en cosinus discrète de JPEG étale les bords nets avec des artéfacts de sonnerie (« bruit de moustique ») qui paraissent particulièrement mauvais autour des formes de lettres. La compression DEFLATE sans perte de PNG gère efficacement les zones de couleur plate et garde le texte net à n'importe quel niveau de zoom. PNG prend aussi en charge la transparence, utile lorsqu'on superpose du texte sur des images existantes plus tard. JPEG n'a de sens que pour les images de texte avec des arrière-plans photographiques (une citation sur une photo de paysage, par exemple) où le contenu photographique domine la taille du fichier. WebP (mode sans perte) donne une qualité équivalente à PNG à une taille de fichier typiquement 26% plus petite et est pris en charge dans 97% des navigateurs en 2026. Cet outil exporte en PNG pour une compatibilité maximale, déposez dans n'importe quelle application sans vous soucier du support de format.

Note d'accessibilité : le texte-en-image perd la recherchabilité

Chaque fois que vous transformez du texte en image, vous perdez trois choses : l'accessibilité au lecteur d'écran (les utilisateurs malvoyants utilisant la technologie d'assistance ne peuvent pas lire le texte à l'intérieur d'une image sans OCR), la recherchabilité (les moteurs de recherche et outils de recherche de texte indexent la légende environnante ou le texte alternatif mais pas le contenu de l'image elle-même), et le copier-coller (les utilisateurs ne peuvent pas sélectionner et copier du texte à partir d'un PNG). Pour les publications sociales où le compromis image-en-tant-que-texte est intentionnel, cela convient. Pour tout ce qui doit être découvrable, indexable ou accessible, préférez du vrai texte HTML stylisé avec CSS et réservez l'approche image-de-texte aux contextes où la plateforme vous force la main. Les directives WCAG recommandent de fournir un texte alternatif significatif pour tout texte-en-image, au minimum, en transcrivant le texte visible dans l'attribut alt afin que les lecteurs d'écran puissent l'annoncer.

Confidentialité : pourquoi le tout-navigateur compte ici

Le texte que vous transformez en image est exactement le genre de contenu où la confidentialité compte : brouillons de publications sociales, mémos internes, captures d'écran-de-texte de documents confidentiels, citations de travaux non publiés. Les générateurs texte-vers-image côté serveur téléversent votre texte vers un serveur distant, où il reste dans les logs. Cet outil s'exécute entièrement dans votre navigateur via l'API Canvas, vérifiez dans l'onglet Réseau de DevTools pendant que vous générez, ou mettez la page hors ligne (mode avion) après son chargement et l'outil fonctionne toujours. Sûr pour les brouillons confidentiels, le contenu client sous NDA, les communications internes ou tout texte que vous ne voudriez pas voir copié sur le disque dur d'un étranger.

Questions fréquentes