@jjlmoya/utils-converters 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/shared/style.css +2 -2
- package/src/tool/avifAJpg/i18n/en.ts +79 -14
- package/src/tool/avifAJpg/i18n/es.ts +79 -14
- package/src/tool/avifAJpg/i18n/fr.ts +82 -12
- package/src/tool/avifAPng/i18n/en.ts +82 -12
- package/src/tool/avifAPng/i18n/es.ts +79 -14
- package/src/tool/avifAPng/i18n/fr.ts +82 -12
- package/src/tool/avifAWebp/i18n/en.ts +82 -12
- package/src/tool/avifAWebp/i18n/es.ts +79 -14
- package/src/tool/avifAWebp/i18n/fr.ts +82 -12
- package/src/tool/bmpAJpg/i18n/en.ts +79 -14
- package/src/tool/bmpAJpg/i18n/es.ts +79 -14
- package/src/tool/bmpAJpg/i18n/fr.ts +82 -12
- package/src/tool/bmpAPng/i18n/en.ts +79 -14
- package/src/tool/bmpAPng/i18n/es.ts +79 -14
- package/src/tool/bmpAPng/i18n/fr.ts +82 -12
- package/src/tool/bmpAWebp/i18n/en.ts +82 -12
- package/src/tool/bmpAWebp/i18n/es.ts +79 -14
- package/src/tool/bmpAWebp/i18n/fr.ts +82 -12
- package/src/tool/gifAJpg/i18n/en.ts +79 -14
- package/src/tool/gifAJpg/i18n/es.ts +79 -14
- package/src/tool/gifAJpg/i18n/fr.ts +82 -12
- package/src/tool/gifAPng/i18n/en.ts +79 -14
- package/src/tool/gifAPng/i18n/es.ts +79 -14
- package/src/tool/gifAPng/i18n/fr.ts +82 -12
- package/src/tool/gifAWebp/i18n/en.ts +79 -14
- package/src/tool/gifAWebp/i18n/es.ts +79 -14
- package/src/tool/gifAWebp/i18n/fr.ts +82 -12
- package/src/tool/imagenBase64/i18n/en.ts +57 -16
- package/src/tool/imagenBase64/i18n/es.ts +57 -16
- package/src/tool/imagenBase64/i18n/fr.ts +59 -13
- package/src/tool/imagenBase64/style.css +1 -1
- package/src/tool/jpgAIco/i18n/en.ts +79 -14
- package/src/tool/jpgAIco/i18n/es.ts +79 -14
- package/src/tool/jpgAIco/i18n/fr.ts +82 -12
- package/src/tool/jpgAPng/i18n/en.ts +76 -16
- package/src/tool/jpgAPng/i18n/es.ts +76 -16
- package/src/tool/jpgAPng/i18n/fr.ts +79 -14
- package/src/tool/jpgAWebp/i18n/en.ts +82 -12
- package/src/tool/jpgAWebp/i18n/es.ts +79 -14
- package/src/tool/jpgAWebp/i18n/fr.ts +82 -12
- package/src/tool/pngAIco/i18n/en.ts +79 -14
- package/src/tool/pngAIco/i18n/es.ts +79 -14
- package/src/tool/pngAIco/i18n/fr.ts +82 -12
- package/src/tool/pngAWebp/i18n/en.ts +79 -14
- package/src/tool/pngAWebp/i18n/es.ts +76 -16
- package/src/tool/pngAWebp/i18n/fr.ts +82 -12
- package/src/tool/svgAJpg/i18n/en.ts +82 -12
- package/src/tool/svgAJpg/i18n/es.ts +79 -14
- package/src/tool/svgAJpg/i18n/fr.ts +82 -12
- package/src/tool/svgAPng/i18n/en.ts +79 -14
- package/src/tool/svgAPng/i18n/es.ts +76 -16
- package/src/tool/svgAPng/i18n/fr.ts +82 -12
- package/src/tool/webpAIco/i18n/en.ts +79 -14
- package/src/tool/webpAIco/i18n/es.ts +79 -14
- package/src/tool/webpAIco/i18n/fr.ts +82 -12
- package/src/tool/webpAJpg/i18n/en.ts +82 -12
- package/src/tool/webpAJpg/i18n/es.ts +79 -14
- package/src/tool/webpAJpg/i18n/fr.ts +82 -12
- package/src/tool/webpAPng/i18n/en.ts +79 -14
- package/src/tool/webpAPng/i18n/es.ts +76 -16
- package/src/tool/webpAPng/i18n/fr.ts +82 -12
|
@@ -65,37 +65,102 @@ const bibliography: PngAIcoLocaleContent['bibliography'] = [
|
|
|
65
65
|
const seo: PngAIcoLocaleContent['seo'] = [
|
|
66
66
|
{
|
|
67
67
|
type: 'title',
|
|
68
|
-
text: 'Convertidor PNG a ICO
|
|
68
|
+
text: 'Convertidor de PNG a ICO: El Mejor Origen para Favicons con Transparencia Perfecta',
|
|
69
|
+
level: 2,
|
|
69
70
|
},
|
|
70
71
|
{
|
|
71
72
|
type: 'paragraph',
|
|
72
|
-
html:
|
|
73
|
-
|
|
73
|
+
html: 'El <strong>PNG con transparencia</strong> es el material de partida ideal para crear iconos ICO profesionales. A diferencia del JPG (que no tiene canal alfa) o de formatos con pérdida, el PNG te da exactamente lo que el formato ICO necesita: píxeles nítidos, bordes limpios y un canal alfa de 32 bits que permite que el icono se integre perfectamente sobre cualquier fondo — ya sea la barra de favoritos blanca de Safari, la barra oscura de Firefox o el escritorio de Windows 11.',
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
type: 'title',
|
|
77
|
+
text: '¿PNG o ICO? Cuándo usar cada formato',
|
|
78
|
+
level: 3,
|
|
74
79
|
},
|
|
75
80
|
{
|
|
76
81
|
type: 'paragraph',
|
|
77
|
-
html:
|
|
78
|
-
'Nuestro convertidor crea archivos ICO auténticos, no simples renombrados. El proceso incluye: leer el PNG en un canvas HTML5, crear la cabecera ICO binaria estándar de Microsoft con el magic number correcto (00 00 01 00), generar el directorio de imagen y combinar todo en un archivo .ico binario válido. El resultado es reconocido nativamente por Windows, macOS y todos los navegadores web.',
|
|
82
|
+
html: 'El <strong>PNG</strong> es el formato de trabajo: es donde diseñas tu logo, exportas desde Figma o Illustrator y guardas las versiones editables. Sus transparencias, precisión de píxeles y compresión sin pérdida lo hacen insuperable para el proceso de diseño. Pero los navegadores, sistemas operativos y aplicaciones de Windows que buscan un favicon o un icono de aplicación no aceptan PNG directamente — necesitan ICO.',
|
|
79
83
|
},
|
|
80
84
|
{
|
|
81
85
|
type: 'paragraph',
|
|
82
|
-
html:
|
|
83
|
-
'Las transparencias del PNG se preservan completamente en el ICO resultante. Esto es crucial para Favicons donde el icono se muestra sobre diferentes fondos (la barra de favoritos puede ser clara u oscura). Un ICO con canal alfa de 32 bits funciona perfectamente en todos los contextos.',
|
|
86
|
+
html: 'El <strong>ICO</strong> es el formato de distribución para iconos en entornos Microsoft y web. Contiene una estructura binaria específica que permite empaquetar múltiples resoluciones en un solo archivo: el navegador lee el directorio interno del ICO y selecciona automáticamente <strong>16×16</strong> para la pestaña del navegador, <strong>32×32</strong> para accesos directos, <strong>48×48</strong> para el explorador de archivos y <strong>256×256</strong> para pantallas Retina y 4K. Partir de un PNG con transparencia garantiza que todas esas resoluciones tendrán bordes perfectos sin fleco blanco.',
|
|
84
87
|
},
|
|
85
88
|
{
|
|
86
|
-
type: '
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
type: 'title',
|
|
90
|
+
text: 'Comparativa: Conversión Local vs Nube',
|
|
91
|
+
level: 3,
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
type: 'comparative',
|
|
95
|
+
items: [
|
|
96
|
+
{
|
|
97
|
+
title: 'Convertidores Cloud',
|
|
98
|
+
description: 'Herramientas que suben tus archivos a un servidor remoto.',
|
|
99
|
+
icon: 'mdi:cloud-upload',
|
|
100
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
101
|
+
points: [
|
|
102
|
+
'Latencia de red en upload y download',
|
|
103
|
+
'Tu logo corporativo queda en servidores ajenos',
|
|
104
|
+
'Límites de tamaño y conversiones diarias',
|
|
105
|
+
'Publicidad intrusiva y rastreadores de terceros',
|
|
106
|
+
],
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
title: 'Nuestra Arquitectura Local',
|
|
110
|
+
description: 'Procesamiento directo en tu hardware mediante tecnología Vanilla JS.',
|
|
111
|
+
icon: 'mdi:laptop-mac',
|
|
112
|
+
highlight: true,
|
|
113
|
+
points: [
|
|
114
|
+
'Velocidad instantánea — cero latencia de red',
|
|
115
|
+
'Privacidad total — 0 bytes enviados al exterior',
|
|
116
|
+
'Sin límites de MB ni de número de archivos',
|
|
117
|
+
'Interfaz limpia, sin anuncios ni rastreos',
|
|
118
|
+
],
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
type: 'title',
|
|
124
|
+
text: 'Cómo funciona técnicamente',
|
|
125
|
+
level: 3,
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'paragraph',
|
|
129
|
+
html: 'El PNG se decodifica en un <strong>Canvas HTML5</strong> en memoria con soporte completo del canal alfa de 32 bits. El motor construye la cabecera ICO estándar de Microsoft con el número mágico correcto (<code>00 00 01 00</code>), el directorio de imágenes con las dimensiones y el offset de datos, y los píxeles codificados manteniendo la información de transparencia. El resultado es un archivo .ico binario genuino que Windows, macOS y todos los navegadores reconocen de forma nativa.',
|
|
89
130
|
},
|
|
90
131
|
{
|
|
91
132
|
type: 'paragraph',
|
|
92
|
-
html:
|
|
93
|
-
|
|
133
|
+
html: 'La transparencia del PNG se preserva de forma completa en el ICO resultante — los píxeles transparentes siguen siendo transparentes, los semitransparentes mantienen su valor alfa exacto y los opacos conservan su color original. Esto es crítico para logos sobre fondos variables: tu favicon se verá correctamente en modo claro, modo oscuro y cualquier combinación de colores de la interfaz del navegador.',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'tip',
|
|
137
|
+
title: 'Consejo: usa un PNG de 512×512 como fuente',
|
|
138
|
+
html: 'Para el mejor resultado posible, usa un <strong>PNG cuadrado de 512×512 píxeles</strong> como imagen de origen. Esta resolución da al convertidor suficiente información para generar con nitidez todos los tamaños ICO estándar — desde el 16×16 del favicon hasta el 256×256 para pantallas de alta densidad — sin pixelado ni pérdida de detalle en los bordes. Cuanto mayor sea el PNG de partida, mejores serán los iconos pequeños resultantes.',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
type: 'title',
|
|
142
|
+
text: 'Casos de uso y compatibilidad',
|
|
143
|
+
level: 3,
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
type: 'list',
|
|
147
|
+
icon: 'mdi:check-circle',
|
|
148
|
+
items: [
|
|
149
|
+
'Favicon con transparencia para sitios web: funciona en Chrome, Firefox, Safari, Edge e Internet Explorer.',
|
|
150
|
+
'Icono de aplicación PWA: el manifest.json referencia el ICO para la instalación en escritorio.',
|
|
151
|
+
'Personalización de carpetas en Windows 10/11 con logo corporativo sin fondo blanco.',
|
|
152
|
+
'Icono de acceso directo para aplicaciones de escritorio, instaladores y ejecutables.',
|
|
153
|
+
'Icono de extensiones de navegador Chrome y Firefox.',
|
|
154
|
+
],
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
type: 'title',
|
|
158
|
+
text: 'Conclusión',
|
|
159
|
+
level: 3,
|
|
94
160
|
},
|
|
95
161
|
{
|
|
96
162
|
type: 'paragraph',
|
|
97
|
-
html:
|
|
98
|
-
'Convierte PNG a ICO auténtico con cabeceras binarias reales. Gratis, privado y con soporte de transparencias. Perfecto para Favicons web e iconos de Windows.',
|
|
163
|
+
html: 'El PNG con transparencia es, sin duda, el mejor punto de partida para crear iconos ICO de calidad profesional. Con esta herramienta, la conversión es instantánea, los canales alfa se preservan íntegramente y el archivo resultante es un ICO genuino con la estructura binaria correcta. Sin subir tu logo a ningún servidor, sin marcas de agua, sin límites — y con transparencia perfecta en todos los tamaños.',
|
|
99
164
|
},
|
|
100
165
|
];
|
|
101
166
|
|
|
@@ -65,32 +65,102 @@ const bibliography: PngAIcoLocaleContent['bibliography'] = [
|
|
|
65
65
|
const seo: PngAIcoLocaleContent['seo'] = [
|
|
66
66
|
{
|
|
67
67
|
type: 'title',
|
|
68
|
-
text: 'Convertisseur PNG vers ICO
|
|
68
|
+
text: 'Convertisseur PNG vers ICO : La Meilleure Source pour des Favicons à Transparence Parfaite',
|
|
69
|
+
level: 2,
|
|
69
70
|
},
|
|
70
71
|
{
|
|
71
72
|
type: 'paragraph',
|
|
72
|
-
html:
|
|
73
|
-
|
|
73
|
+
html: 'Le <strong>PNG avec transparence</strong> est le matériau de départ idéal pour créer des icônes ICO professionnelles. Contrairement au JPG (qui n\'a pas de canal alpha) ou aux formats avec perte, le PNG vous offre exactement ce dont le format ICO a besoin : des pixels nets, des bords propres et un canal alpha 32 bits qui permet à l\'icône de s\'intégrer parfaitement sur n\'importe quel fond — que ce soit la barre de favoris blanche de Safari, la barre sombre de Firefox ou le bureau Windows 11.',
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
type: 'title',
|
|
77
|
+
text: 'PNG ou ICO ? Quand utiliser chaque format',
|
|
78
|
+
level: 3,
|
|
74
79
|
},
|
|
75
80
|
{
|
|
76
81
|
type: 'paragraph',
|
|
77
|
-
html:
|
|
78
|
-
'Notre convertisseur crée des fichiers ICO authentiques. Le processus inclut : lire le PNG dans un canvas HTML5, créer l\'en-tête ICO binaire standard Microsoft avec le bon magic number (00 00 01 00), générer le répertoire d\'image et combiner le tout en un fichier .ico binaire valide. Le résultat est reconnu nativement par Windows, macOS et tous les navigateurs web.',
|
|
82
|
+
html: 'Le <strong>PNG</strong> est le format de travail : c\'est là que vous concevez votre logo, exportez depuis Figma ou Illustrator, et sauvegardez vos versions éditables. Sa transparence, sa précision de pixels et sa compression sans perte le rendent imbattable pour le processus de design. Mais les navigateurs, systèmes d\'exploitation et applications Windows cherchant un favicon ou une icône d\'application n\'acceptent pas directement le PNG — ils ont besoin de l\'ICO.',
|
|
79
83
|
},
|
|
80
84
|
{
|
|
81
|
-
type: '
|
|
82
|
-
html:
|
|
83
|
-
|
|
85
|
+
type: 'paragraph',
|
|
86
|
+
html: 'L\'<strong>ICO</strong> est le format de distribution pour les icônes dans les environnements Microsoft et le web. Il contient une structure binaire spécifique permettant de regrouper plusieurs résolutions dans un seul fichier : le navigateur lit le répertoire interne du fichier ICO et sélectionne automatiquement <strong>16×16</strong> pour l\'onglet du navigateur, <strong>32×32</strong> pour les raccourcis, <strong>48×48</strong> pour l\'explorateur de fichiers et <strong>256×256</strong> pour les écrans Retina et 4K. Partir d\'un PNG transparent garantit que toutes ces résolutions auront des bords parfaits sans liseré blanc.',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
type: 'title',
|
|
90
|
+
text: 'Comparatif : Conversion locale vs Cloud',
|
|
91
|
+
level: 3,
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
type: 'comparative',
|
|
95
|
+
items: [
|
|
96
|
+
{
|
|
97
|
+
title: 'Convertisseurs Cloud',
|
|
98
|
+
description: 'Outils qui envoient vos fichiers vers un serveur distant.',
|
|
99
|
+
icon: 'mdi:cloud-upload',
|
|
100
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
101
|
+
points: [
|
|
102
|
+
'Latence réseau à l\'envoi et au téléchargement',
|
|
103
|
+
'Votre logo d\'entreprise stocké sur des serveurs tiers',
|
|
104
|
+
'Limites de taille et quota quotidien de conversions',
|
|
105
|
+
'Publicités intrusives et traceurs tiers',
|
|
106
|
+
],
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
title: 'Notre Architecture Locale',
|
|
110
|
+
description: 'Traitement direct sur votre matériel via la technologie Vanilla JS.',
|
|
111
|
+
icon: 'mdi:laptop-mac',
|
|
112
|
+
highlight: true,
|
|
113
|
+
points: [
|
|
114
|
+
'Vitesse instantanée — zéro latence réseau',
|
|
115
|
+
'Confidentialité totale — 0 octet envoyé à l\'extérieur',
|
|
116
|
+
'Aucune limite de taille ni de nombre de fichiers',
|
|
117
|
+
'Interface épurée, sans publicités ni traçage',
|
|
118
|
+
],
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
type: 'title',
|
|
124
|
+
text: 'Comment ça fonctionne techniquement',
|
|
125
|
+
level: 3,
|
|
84
126
|
},
|
|
85
127
|
{
|
|
86
128
|
type: 'paragraph',
|
|
87
|
-
html:
|
|
88
|
-
|
|
129
|
+
html: 'Le PNG est décodé dans un <strong>Canvas HTML5</strong> en mémoire avec une prise en charge complète du canal alpha 32 bits. Le moteur construit l\'en-tête ICO standard de Microsoft avec le bon nombre magique (<code>00 00 01 00</code>), le répertoire d\'images avec les dimensions et le décalage des données, et les données de pixels tout en maintenant les informations de transparence. Le résultat est un vrai fichier binaire .ico reconnu nativement par Windows, macOS et tous les navigateurs.',
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
type: 'paragraph',
|
|
133
|
+
html: 'La transparence du PNG est entièrement préservée dans l\'ICO résultant — les pixels transparents restent transparents, les pixels semi-transparents conservent leur valeur alpha exacte et les pixels opaques gardent leur couleur d\'origine. C\'est crucial pour les logos sur des fonds variables : votre favicon s\'affichera correctement en mode clair, mode sombre et dans toute combinaison de couleurs de l\'interface du navigateur.',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'tip',
|
|
137
|
+
title: 'Conseil : utilisez un PNG de 512×512 comme source',
|
|
138
|
+
html: 'Pour le meilleur résultat possible, utilisez un <strong>PNG carré de 512×512 pixels</strong> comme image source. Cette résolution donne au convertisseur suffisamment d\'informations pour générer toutes les tailles ICO standard avec netteté — du favicon 16×16 jusqu\'au 256×256 pour les écrans haute densité — sans pixelisation ni perte de détail sur les bords. Plus le PNG source est grand, meilleurs seront les petites icônes résultantes.',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
type: 'title',
|
|
142
|
+
text: 'Cas d\'usage et compatibilité',
|
|
143
|
+
level: 3,
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
type: 'list',
|
|
147
|
+
icon: 'mdi:check-circle',
|
|
148
|
+
items: [
|
|
149
|
+
'Favicon transparent pour sites web : fonctionne dans Chrome, Firefox, Safari, Edge et Internet Explorer.',
|
|
150
|
+
'Icône d\'application PWA : le manifest.json référence l\'ICO pour l\'installation sur bureau.',
|
|
151
|
+
'Personnalisation de dossiers Windows 10/11 avec logo d\'entreprise sans fond blanc.',
|
|
152
|
+
'Icône de raccourci pour applications de bureau, installateurs et exécutables.',
|
|
153
|
+
'Icône d\'extension navigateur pour les extensions Chrome et Firefox.',
|
|
154
|
+
],
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
type: 'title',
|
|
158
|
+
text: 'Conclusion',
|
|
159
|
+
level: 3,
|
|
89
160
|
},
|
|
90
161
|
{
|
|
91
162
|
type: 'paragraph',
|
|
92
|
-
html:
|
|
93
|
-
'Convertissez PNG en ICO authentique avec de vrais en-têtes binaires. Gratuit, privé et avec support de transparence. Parfait pour les Favicons web et les icônes Windows.',
|
|
163
|
+
html: 'Le PNG avec transparence est sans conteste le meilleur point de départ pour créer des icônes ICO de qualité professionnelle. Avec cet outil, la conversion est instantanée, les canaux alpha sont entièrement préservés et le fichier résultant est un vrai ICO avec la structure binaire correcte. Sans envoyer votre logo sur aucun serveur, sans filigrane, sans limites — et avec une transparence parfaite à toutes les tailles.',
|
|
94
164
|
},
|
|
95
165
|
];
|
|
96
166
|
|
|
@@ -69,37 +69,102 @@ const bibliography: PngAWebpLocaleContent['bibliography'] = [
|
|
|
69
69
|
const seo: PngAWebpLocaleContent['seo'] = [
|
|
70
70
|
{
|
|
71
71
|
type: 'title',
|
|
72
|
-
text: '
|
|
72
|
+
text: 'PNG to WebP Converter: Transparency and Modern Compression for the Web',
|
|
73
|
+
level: 2,
|
|
73
74
|
},
|
|
74
75
|
{
|
|
75
76
|
type: 'paragraph',
|
|
76
|
-
html:
|
|
77
|
-
|
|
77
|
+
html: '<strong>PNG</strong> has been the reference format for web images with transparency for decades — logos, icons, UI elements, product images on cut-out backgrounds. Its problem is file size: the lossless compression that guarantees quality also generates noticeably large files. Google\'s <strong>WebP</strong> solves this contradiction: it supports the alpha channel (transparency) <em>and</em> compresses far better than PNG, making the switch from PNG to WebP on your website a perfect optimization that sacrifices nothing.',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
type: 'title',
|
|
81
|
+
text: 'PNG or WebP? When to use each format',
|
|
82
|
+
level: 3,
|
|
78
83
|
},
|
|
79
84
|
{
|
|
80
85
|
type: 'paragraph',
|
|
81
|
-
html:
|
|
82
|
-
'A key technical feature of WebP is that it supports both lossy and lossless compression, and also supports the alpha channel for transparency. This means you can convert PNG to WebP without losing the transparent areas of your image, getting a significantly lighter file with the same visual quality.',
|
|
86
|
+
html: '<strong>PNG</strong> remains the right format when compatibility is critical: design tools like Photoshop or Figma, print workflows, legacy desktop applications, or any context where WebP support is not guaranteed. It is also the ideal format for saving working layers in editing pipelines, since its lossless compression preserves every pixel. The cost: files that can weigh 3–8 times more than their WebP equivalent.',
|
|
83
87
|
},
|
|
84
88
|
{
|
|
85
|
-
type: '
|
|
86
|
-
html:
|
|
87
|
-
|
|
89
|
+
type: 'paragraph',
|
|
90
|
+
html: '<strong>WebP</strong> is the natural replacement for PNG for all modern web content. Chrome, Firefox, Safari, and Edge all support it natively. A lossless WebP image is 26% smaller than the equivalent PNG; in lossy mode it can be up to 40% smaller with virtually indistinguishable visual quality. And crucially for web design: <strong>WebP preserves alpha transparency</strong> exactly like PNG, with no visual compromise.',
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: 'title',
|
|
94
|
+
text: 'Comparison: Local vs Cloud Conversion',
|
|
95
|
+
level: 3,
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
type: 'comparative',
|
|
99
|
+
items: [
|
|
100
|
+
{
|
|
101
|
+
title: 'Cloud Converters',
|
|
102
|
+
description: 'Tools that upload your files to a remote server.',
|
|
103
|
+
icon: 'mdi:cloud-upload',
|
|
104
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
105
|
+
points: [
|
|
106
|
+
'Network latency on upload and download',
|
|
107
|
+
'Your logos and images stored on third-party servers',
|
|
108
|
+
'File size limits and daily conversion caps',
|
|
109
|
+
'Intrusive ads and third-party trackers',
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
title: 'Our Local Architecture',
|
|
114
|
+
description: 'Direct processing on your hardware using Vanilla JS technology.',
|
|
115
|
+
icon: 'mdi:laptop-mac',
|
|
116
|
+
highlight: true,
|
|
117
|
+
points: [
|
|
118
|
+
'Instant speed — zero network latency',
|
|
119
|
+
'Complete privacy — 0 bytes sent externally',
|
|
120
|
+
'No MB limits or file count restrictions',
|
|
121
|
+
'Clean interface, no ads or tracking',
|
|
122
|
+
],
|
|
123
|
+
},
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
type: 'title',
|
|
128
|
+
text: 'How it works technically',
|
|
129
|
+
level: 3,
|
|
88
130
|
},
|
|
89
131
|
{
|
|
90
132
|
type: 'paragraph',
|
|
91
|
-
html:
|
|
92
|
-
'According to Google, lossless WebP images are 26% smaller than equivalent PNGs. Lossy WebP images are 25-34% smaller than comparable JPGs at the same visual quality.',
|
|
133
|
+
html: 'The PNG is loaded locally and decoded into an in-memory <strong>HTML5 Canvas</strong>. The Canvas API preserves the alpha channel from the original PNG — all transparent and semi-transparent pixels are maintained intact in the RGBA pixel buffer. The canvas is then exported by calling <code>toDataURL(\'image/webp\')</code>, which applies the browser\'s WebP codec (based on Google\'s libwebp) to generate a more compact file without altering the transparency data.',
|
|
93
134
|
},
|
|
94
135
|
{
|
|
95
136
|
type: 'paragraph',
|
|
96
|
-
html:
|
|
97
|
-
|
|
137
|
+
html: 'WebP uses two compression modes: lossless mode for images where every pixel must be exactly faithful to the original, and lossy mode for photos and elements where small differences are imperceptible. Lossless mode produces files 26% smaller than PNG; lossy mode can achieve reductions of up to 40% compared to PNG while maintaining excellent visual quality.',
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
type: 'tip',
|
|
141
|
+
title: 'Tip: WebP beats both PNG and JPG on the web',
|
|
142
|
+
html: 'WebP in lossless mode is smaller than PNG. WebP in lossy mode is smaller than JPG. This makes WebP the <strong>only format that replaces both</strong> in the web context. Convert your transparent PNGs to WebP before uploading: Google PageSpeed Insights detects it and scores it positively in "Serve images in modern formats" audits.',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
type: 'title',
|
|
146
|
+
text: 'Use cases and compatibility',
|
|
147
|
+
level: 3,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: 'list',
|
|
151
|
+
icon: 'mdi:check-circle',
|
|
152
|
+
items: [
|
|
153
|
+
'Logos and icons with transparent backgrounds for websites and apps.',
|
|
154
|
+
'Product images with cut-out backgrounds in e-commerce stores.',
|
|
155
|
+
'CSS sprites and UI elements with alpha transparency.',
|
|
156
|
+
'Rasterized illustrations and vector graphics for landing pages.',
|
|
157
|
+
'Article thumbnails with transparent backgrounds in blogs and news portals.',
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
type: 'title',
|
|
162
|
+
text: 'Conclusion',
|
|
163
|
+
level: 3,
|
|
98
164
|
},
|
|
99
165
|
{
|
|
100
166
|
type: 'paragraph',
|
|
101
|
-
html:
|
|
102
|
-
'Convert PNG to WebP for free, with transparency support and without sending images to servers. Reduce image weight by up to 40% and improve web performance.',
|
|
167
|
+
html: 'The move from PNG to WebP is the most complete web image optimization available: you get lighter files, preserve transparency, and improve Core Web Vitals metrics without changing anything about your visual design. This tool does it instantly, for free, and completely privately — your images are processed in your browser and never travel to any external server.',
|
|
103
168
|
},
|
|
104
169
|
];
|
|
105
170
|
|
|
@@ -69,42 +69,102 @@ const bibliography: PngAWebpLocaleContent['bibliography'] = [
|
|
|
69
69
|
const seo: PngAWebpLocaleContent['seo'] = [
|
|
70
70
|
{
|
|
71
71
|
type: 'title',
|
|
72
|
-
text: 'Convertidor PNG a WebP
|
|
72
|
+
text: 'Convertidor de PNG a WebP: Transparencia y Compresión Moderna para la Web',
|
|
73
|
+
level: 2,
|
|
73
74
|
},
|
|
74
75
|
{
|
|
75
76
|
type: 'paragraph',
|
|
76
|
-
html:
|
|
77
|
-
|
|
77
|
+
html: 'El <strong>PNG</strong> ha sido el formato de referencia para imágenes web con transparencia durante décadas — logos, iconos, elementos de UI, imágenes de producto sobre fondo recortado. Su problema es el peso: la compresión sin pérdida que garantiza su calidad también genera archivos notablemente grandes. El <strong>WebP</strong> de Google resuelve esta contradicción: soporta canal alfa (transparencias) <em>y</em> comprime mucho mejor que PNG, haciendo que cambiar PNG por WebP en tu web sea la optimización perfecta que no sacrifica nada.',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
type: 'title',
|
|
81
|
+
text: '¿PNG o WebP? Cuándo usar cada formato',
|
|
82
|
+
level: 3,
|
|
78
83
|
},
|
|
79
84
|
{
|
|
80
85
|
type: 'paragraph',
|
|
81
|
-
html:
|
|
82
|
-
'Una característica técnica clave de WebP es que soporta tanto compresión con pérdida como sin pérdida, además de admitir el canal alfa para transparencias. Esto significa que puedes convertir PNG a WebP sin perder las áreas transparentes de tu imagen, obteniendo un archivo significativamente más ligero con la misma calidad visual y sin comprometer las transparencias.',
|
|
86
|
+
html: 'El <strong>PNG</strong> sigue siendo el formato correcto cuando la compatibilidad es crítica: herramientas de diseño como Photoshop o Figma, sistemas de impresión, aplicaciones de escritorio antiguas o cualquier contexto donde no se garantice soporte de WebP. También es el formato ideal para guardar capas de trabajo en flujos de edición, ya que su compresión sin pérdida preserva cada píxel. El coste: archivos que pueden pesar 3-8 veces más que su equivalente WebP.',
|
|
83
87
|
},
|
|
84
88
|
{
|
|
85
89
|
type: 'paragraph',
|
|
86
|
-
html:
|
|
87
|
-
'Nuestro convertidor procesa todo en el lado del cliente. La imagen PNG se carga en el Canvas API de HTML5, se renderiza y se exporta como WebP mediante el método toDataURL del canvas con el tipo MIME correspondiente. No hay transferencia de datos a ningún servidor externo.',
|
|
90
|
+
html: '<strong>WebP</strong> es el reemplazo natural del PNG para todo el contenido web moderno. Chrome, Firefox, Safari y Edge lo soportan de forma nativa. Una imagen WebP en modo sin pérdida es un 26% más pequeña que el PNG equivalente; en modo con pérdida puede ser hasta un 40% más pequeña, con una calidad visual prácticamente indistinguible. Y lo más importante para el diseño web: <strong>WebP conserva las transparencias alfa</strong> igual que PNG, sin ningún compromiso visual.',
|
|
88
91
|
},
|
|
89
92
|
{
|
|
90
|
-
type: '
|
|
91
|
-
|
|
92
|
-
|
|
93
|
+
type: 'title',
|
|
94
|
+
text: 'Comparativa: Conversión Local vs Nube',
|
|
95
|
+
level: 3,
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
type: 'comparative',
|
|
99
|
+
items: [
|
|
100
|
+
{
|
|
101
|
+
title: 'Convertidores Cloud',
|
|
102
|
+
description: 'Herramientas que suben tus archivos a un servidor remoto.',
|
|
103
|
+
icon: 'mdi:cloud-upload',
|
|
104
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
105
|
+
points: [
|
|
106
|
+
'Latencia de red en upload y download',
|
|
107
|
+
'Tus logos e imágenes en servidores ajenos',
|
|
108
|
+
'Límites de tamaño y conversiones diarias',
|
|
109
|
+
'Publicidad intrusiva y rastreadores de terceros',
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
title: 'Nuestra Arquitectura Local',
|
|
114
|
+
description: 'Procesamiento directo en tu hardware mediante tecnología Vanilla JS.',
|
|
115
|
+
icon: 'mdi:laptop-mac',
|
|
116
|
+
highlight: true,
|
|
117
|
+
points: [
|
|
118
|
+
'Velocidad instantánea — cero latencia de red',
|
|
119
|
+
'Privacidad total — 0 bytes enviados al exterior',
|
|
120
|
+
'Sin límites de MB ni de número de archivos',
|
|
121
|
+
'Interfaz limpia, sin anuncios ni rastreos',
|
|
122
|
+
],
|
|
123
|
+
},
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
type: 'title',
|
|
128
|
+
text: 'Cómo funciona técnicamente',
|
|
129
|
+
level: 3,
|
|
93
130
|
},
|
|
94
131
|
{
|
|
95
132
|
type: 'paragraph',
|
|
96
|
-
html:
|
|
97
|
-
'Según Google, las imágenes WebP sin pérdida son un 26% más pequeñas que los PNG equivalentes. Las imágenes WebP con pérdida son un 25-34% más pequeñas que los JPG comparables a la misma calidad visual.',
|
|
133
|
+
html: 'El PNG se carga localmente y se decodifica en un <strong>Canvas HTML5</strong> en memoria. El Canvas API preserva el canal alfa del PNG original — todos los píxeles transparentes y semitransparentes se mantienen intactos en el buffer de píxeles RGBA. A continuación se exporta llamando a <code>toDataURL(\'image/webp\')</code>, que aplica el codec WebP del navegador (basado en libwebp de Google) para generar un archivo más compacto sin alterar la información de transparencia.',
|
|
98
134
|
},
|
|
99
135
|
{
|
|
100
136
|
type: 'paragraph',
|
|
101
|
-
html:
|
|
102
|
-
|
|
137
|
+
html: 'WebP utiliza dos modos de compresión: el modo sin pérdida (<em>lossless</em>) para imágenes donde cada píxel debe ser exactamente fiel al original, y el modo con pérdida (<em>lossy</em>) para fotografías y elementos donde pequeñas diferencias son imperceptibles. El modo sin pérdida produce archivos un 26% más pequeños que PNG; el modo con pérdida puede lograr reducciones de hasta un 40% respecto a PNG manteniendo una calidad visual excelente.',
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
type: 'tip',
|
|
141
|
+
title: 'Consejo: WebP supera a PNG y a JPG en la web',
|
|
142
|
+
html: 'WebP en modo sin pérdida es más pequeño que PNG. WebP en modo con pérdida es más pequeño que JPG. Esto convierte a WebP en el <strong>único formato que reemplaza a ambos</strong> en el contexto web. Convierte tus PNGs con transparencia a WebP antes de subirlos: Google PageSpeed Insights lo detecta y lo puntúa positivamente en las auditorías de "Serve images in modern formats".',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
type: 'title',
|
|
146
|
+
text: 'Casos de uso y compatibilidad',
|
|
147
|
+
level: 3,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: 'list',
|
|
151
|
+
icon: 'mdi:check-circle',
|
|
152
|
+
items: [
|
|
153
|
+
'Logos e iconos con fondo transparente para sitios web y aplicaciones.',
|
|
154
|
+
'Imágenes de producto con fondo recortado en tiendas e-commerce.',
|
|
155
|
+
'Sprites CSS y elementos de interfaz de usuario con transparencia alfa.',
|
|
156
|
+
'Ilustraciones y gráficos vectoriales rasterizados para landing pages.',
|
|
157
|
+
'Miniaturas de artículo con fondo transparente en blogs y portales de noticias.',
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
type: 'title',
|
|
162
|
+
text: 'Conclusión',
|
|
163
|
+
level: 3,
|
|
103
164
|
},
|
|
104
165
|
{
|
|
105
166
|
type: 'paragraph',
|
|
106
|
-
html:
|
|
107
|
-
'Convierte PNG a WebP gratuitamente, con soporte para transparencias y sin enviar imágenes a servidores. Reduce el peso de tus imágenes hasta un 40% y mejora el rendimiento web.',
|
|
167
|
+
html: 'El paso de PNG a WebP es la optimización de imágenes web más completa disponible: consigues archivos más ligeros, preservas las transparencias y mejoras las métricas Core Web Vitals sin cambiar nada del diseño visual. Esta herramienta lo hace de forma instantánea, gratuita y completamente privada — tus imágenes se procesan en tu navegador y no viajan a ningún servidor externo.',
|
|
108
168
|
},
|
|
109
169
|
];
|
|
110
170
|
|
|
@@ -69,32 +69,102 @@ const bibliography: PngAWebpLocaleContent['bibliography'] = [
|
|
|
69
69
|
const seo: PngAWebpLocaleContent['seo'] = [
|
|
70
70
|
{
|
|
71
71
|
type: 'title',
|
|
72
|
-
text: 'Convertisseur PNG vers WebP
|
|
72
|
+
text: 'Convertisseur PNG vers WebP : Transparence et Compression Moderne pour le Web',
|
|
73
|
+
level: 2,
|
|
73
74
|
},
|
|
74
75
|
{
|
|
75
76
|
type: 'paragraph',
|
|
76
|
-
html:
|
|
77
|
-
|
|
77
|
+
html: 'Le <strong>PNG</strong> est le format de référence pour les images web avec transparence depuis des décennies — logos, icônes, éléments d\'interface, images de produits sur fond découpé. Son problème est le poids : la compression sans perte qui garantit sa qualité génère également des fichiers notablement volumineux. Le <strong>WebP</strong> de Google résout cette contradiction : il supporte le canal alpha (transparence) <em>et</em> compresse bien mieux que le PNG, faisant du passage de PNG à WebP l\'optimisation parfaite qui ne sacrifie rien.',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
type: 'title',
|
|
81
|
+
text: 'PNG ou WebP ? Quand utiliser chaque format',
|
|
82
|
+
level: 3,
|
|
78
83
|
},
|
|
79
84
|
{
|
|
80
85
|
type: 'paragraph',
|
|
81
|
-
html:
|
|
82
|
-
'Une caractéristique technique clé de WebP est qu\'il supporte à la fois la compression avec et sans perte, et supporte également le canal alpha pour la transparence. Cela signifie que vous pouvez convertir PNG en WebP sans perdre les zones transparentes de votre image.',
|
|
86
|
+
html: 'Le <strong>PNG</strong> reste le bon format lorsque la compatibilité est critique : outils de design comme Photoshop ou Figma, flux d\'impression, applications de bureau ancienne ou tout contexte où le support WebP n\'est pas garanti. C\'est aussi le format idéal pour sauvegarder les calques de travail dans les pipelines d\'édition, car sa compression sans perte préserve chaque pixel. Le coût : des fichiers qui peuvent peser 3 à 8 fois plus que leur équivalent WebP.',
|
|
83
87
|
},
|
|
84
88
|
{
|
|
85
|
-
type: '
|
|
86
|
-
html:
|
|
87
|
-
|
|
89
|
+
type: 'paragraph',
|
|
90
|
+
html: 'Le <strong>WebP</strong> est le remplacement naturel du PNG pour tout le contenu web moderne. Chrome, Firefox, Safari et Edge le supportent nativement. Une image WebP sans perte est 26 % plus petite que le PNG équivalent ; en mode avec perte, elle peut être jusqu\'à 40 % plus petite avec une qualité visuelle pratiquement indistinguible. Et, point crucial pour le design web : <strong>WebP préserve la transparence alpha</strong> exactement comme le PNG, sans aucun compromis visuel.',
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: 'title',
|
|
94
|
+
text: 'Comparatif : Conversion locale vs Cloud',
|
|
95
|
+
level: 3,
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
type: 'comparative',
|
|
99
|
+
items: [
|
|
100
|
+
{
|
|
101
|
+
title: 'Convertisseurs Cloud',
|
|
102
|
+
description: 'Outils qui envoient vos fichiers vers un serveur distant.',
|
|
103
|
+
icon: 'mdi:cloud-upload',
|
|
104
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
105
|
+
points: [
|
|
106
|
+
'Latence réseau à l\'envoi et au téléchargement',
|
|
107
|
+
'Vos logos et images stockés sur des serveurs tiers',
|
|
108
|
+
'Limites de taille et quota quotidien de conversions',
|
|
109
|
+
'Publicités intrusives et traceurs tiers',
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
title: 'Notre Architecture Locale',
|
|
114
|
+
description: 'Traitement direct sur votre matériel via la technologie Vanilla JS.',
|
|
115
|
+
icon: 'mdi:laptop-mac',
|
|
116
|
+
highlight: true,
|
|
117
|
+
points: [
|
|
118
|
+
'Vitesse instantanée — zéro latence réseau',
|
|
119
|
+
'Confidentialité totale — 0 octet envoyé à l\'extérieur',
|
|
120
|
+
'Aucune limite de taille ni de nombre de fichiers',
|
|
121
|
+
'Interface épurée, sans publicités ni traçage',
|
|
122
|
+
],
|
|
123
|
+
},
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
type: 'title',
|
|
128
|
+
text: 'Comment ça fonctionne techniquement',
|
|
129
|
+
level: 3,
|
|
88
130
|
},
|
|
89
131
|
{
|
|
90
132
|
type: 'paragraph',
|
|
91
|
-
html:
|
|
92
|
-
|
|
133
|
+
html: 'Le PNG est chargé localement et décodé dans un <strong>Canvas HTML5</strong> en mémoire. L\'API Canvas préserve le canal alpha du PNG original — tous les pixels transparents et semi-transparents sont maintenus intacts dans le tampon de pixels RGBA. Le canvas est ensuite exporté en appelant <code>toDataURL(\'image/webp\')</code>, qui applique le codec WebP du navigateur (basé sur libwebp de Google) pour générer un fichier plus compact sans altérer les données de transparence.',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'paragraph',
|
|
137
|
+
html: 'WebP utilise deux modes de compression : le mode sans perte (<em>lossless</em>) pour les images où chaque pixel doit être exactement fidèle à l\'original, et le mode avec perte (<em>lossy</em>) pour les photos et éléments où de petites différences sont imperceptibles. Le mode sans perte produit des fichiers 26 % plus petits que le PNG ; le mode avec perte peut atteindre des réductions jusqu\'à 40 % par rapport au PNG tout en maintenant une excellente qualité visuelle.',
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
type: 'tip',
|
|
141
|
+
title: 'Conseil : WebP surpasse à la fois PNG et JPG sur le web',
|
|
142
|
+
html: 'WebP en mode sans perte est plus petit que le PNG. WebP en mode avec perte est plus petit que le JPG. Cela fait de WebP le <strong>seul format qui remplace les deux</strong> dans le contexte web. Convertissez vos PNG transparents en WebP avant de les mettre en ligne : Google PageSpeed Insights le détecte et le valorise positivement dans les audits "Servir les images dans des formats modernes".',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
type: 'title',
|
|
146
|
+
text: 'Cas d\'usage et compatibilité',
|
|
147
|
+
level: 3,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: 'list',
|
|
151
|
+
icon: 'mdi:check-circle',
|
|
152
|
+
items: [
|
|
153
|
+
'Logos et icônes avec fond transparent pour sites web et applications.',
|
|
154
|
+
'Images de produits avec fond découpé dans les boutiques e-commerce.',
|
|
155
|
+
'Sprites CSS et éléments d\'interface avec transparence alpha.',
|
|
156
|
+
'Illustrations rasterisées et graphiques vectoriels pour landing pages.',
|
|
157
|
+
'Miniatures d\'articles avec fond transparent dans les blogs et portails d\'actualité.',
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
type: 'title',
|
|
162
|
+
text: 'Conclusion',
|
|
163
|
+
level: 3,
|
|
93
164
|
},
|
|
94
165
|
{
|
|
95
166
|
type: 'paragraph',
|
|
96
|
-
html:
|
|
97
|
-
'Convertissez PNG en WebP gratuitement, avec support de transparence et sans envoyer d\'images aux serveurs. Réduisez le poids des images jusqu\'à 40% et améliorez les performances web.',
|
|
167
|
+
html: 'Le passage de PNG à WebP est l\'optimisation d\'images web la plus complète disponible : vous obtenez des fichiers plus légers, vous préservez la transparence et vous améliorez les métriques Core Web Vitals sans rien changer à votre design visuel. Cet outil le fait instantanément, gratuitement et de manière totalement privée — vos images sont traitées dans votre navigateur et ne voyagent jamais vers aucun serveur externe.',
|
|
98
168
|
},
|
|
99
169
|
];
|
|
100
170
|
|