@jjlmoya/utils-converters 1.1.0

package/src/tool/gifAWebp/index.ts

@@ -0,0 +1,29 @@
+import type { ConvertersToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import type { ImageConverterUI } from '../../shared/ImageConverter.astro';
+import GifAWebpCalculator from './component.astro';
+import GifAWebpSEO from './seo.astro';
+import GifAWebpBibliography from './bibliography.astro';
+
+export type GifAWebpLocaleContent = ToolLocaleContent<ImageConverterUI>;
+
+export const gifAWebp: ConvertersToolEntry<ImageConverterUI> = {
+  id: 'gif-a-webp',
+  icons: {
+    bg: 'mdi:file-image',
+    fg: 'mdi:file-export',
+  },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { GifAWebpCalculator, GifAWebpSEO, GifAWebpBibliography };
+
+export const GIF_A_WEBP_TOOL: ToolDefinition = {
+  entry: gifAWebp,
+  Component: GifAWebpCalculator,
+  SEOComponent: GifAWebpSEO,
+  BibliographyComponent: GifAWebpBibliography,
+};

package/src/tool/gifAWebp/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { gifAWebp } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await gifAWebp.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/imagenBase64/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { imagenBase64 } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await imagenBase64.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} title={content.ui.bibliographyTitle} />}

package/src/tool/imagenBase64/component.astro

@@ -0,0 +1,159 @@
+---
+import type { ImageToBase64UI } from './index';
+
+interface Props { ui: ImageToBase64UI }
+const { ui } = Astro.props;
+---
+
+<style is:global>
+  @import './style.css';
+</style>
+
+<div class="base64-container animate-in">
+  <div class="base64-card">
+    <div class="card-section upload-section">
+      <div class="drop-zone" id="b64-drop-zone">
+        <div class="drop-content">
+          <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <h3>{ui.dragTitle}</h3>
+          <p>{ui.dragSubtext}</p>
+          <input type="file" id="b64-file-input" class="file-input-native" accept="image/*" />
+          <span class="format-badge">{ui.formatBadge}</span>
+        </div>
+        <div class="preview-container hidden" id="b64-preview-container">
+          <button class="clear-btn" id="b64-clear-btn" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+          <img id="b64-image-preview" src="" alt="preview" />
+          <div class="image-info">
+            <span class="info-pill name-pill" id="b64-file-name"></span>
+            <span class="info-pill size-pill" id="b64-file-size"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-section result-section">
+      <div class="output-group">
+        <div class="output-header">
+          <label>{ui.dataUriLabel}</label>
+          <button class="copy-btn" id="copy-data-uri">{ui.copyBtn}</button>
+        </div>
+        <div class="code-wrapper">
+          <textarea id="output-data-uri" readonly placeholder={ui.dataUriPlaceholder}></textarea>
+        </div>
+      </div>
+
+      <div class="output-group">
+        <div class="output-header">
+          <label>{ui.base64Label}</label>
+          <button class="copy-btn" id="copy-base64">{ui.copyBtn}</button>
+        </div>
+        <div class="code-wrapper">
+          <textarea id="output-base64" readonly placeholder={ui.base64Placeholder}></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="b64-toast">
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+  </svg>
+  <span id="b64-toast-msg">{ui.toastMessage}</span>
+</div>
+
+<script define:vars={{ toastMessage: ui.toastMessage, invalidImageAlert: ui.invalidImageAlert }}>
+  const dropZone = document.getElementById('b64-drop-zone');
+  const fileInput = document.getElementById('b64-file-input');
+  const previewContainer = document.getElementById('b64-preview-container');
+  const imagePreview = document.getElementById('b64-image-preview');
+  const clearBtn = document.getElementById('b64-clear-btn');
+  const fileNameEl = document.getElementById('b64-file-name');
+  const fileSizeEl = document.getElementById('b64-file-size');
+  const outputDataUri = document.getElementById('output-data-uri');
+  const outputBase64 = document.getElementById('output-base64');
+  const copyDataUriBtn = document.getElementById('copy-data-uri');
+  const copyBase64Btn = document.getElementById('copy-base64');
+  const toast = document.getElementById('b64-toast');
+  const toastMsg = document.getElementById('b64-toast-msg');
+
+  function formatBytes(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+  }
+
+  function showToast(message) {
+    if (toastMsg) toastMsg.textContent = message;
+    toast?.classList.add('show');
+    setTimeout(() => toast?.classList.remove('show'), 2500);
+  }
+
+  function updateOutputs(dataUri, fileName, fileSize) {
+    const base64 = dataUri.split(',')[1] || '';
+    if (outputDataUri) outputDataUri.value = dataUri;
+    if (outputBase64) outputBase64.value = base64;
+    if (imagePreview) imagePreview.src = dataUri;
+    if (fileNameEl) fileNameEl.textContent = fileName;
+    if (fileSizeEl) fileSizeEl.textContent = formatBytes(fileSize);
+    previewContainer?.classList.remove('hidden');
+  }
+
+  function handleFile(file) {
+    if (!file.type.startsWith('image/')) {
+      alert(invalidImageAlert);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const dataUri = e.target?.result;
+      if (typeof dataUri === 'string') updateOutputs(dataUri, file.name, file.size);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  dropZone?.addEventListener('click', () => fileInput?.click());
+  dropZone?.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('dragover');
+  });
+  dropZone?.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+  dropZone?.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('dragover');
+    const file = e.dataTransfer?.files[0];
+    if (file) handleFile(file);
+  });
+  fileInput?.addEventListener('change', (e) => {
+    const file = e.target?.files?.[0];
+    if (file) handleFile(file);
+  });
+
+  clearBtn?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    previewContainer?.classList.add('hidden');
+    if (outputDataUri) outputDataUri.value = '';
+    if (outputBase64) outputBase64.value = '';
+    if (fileInput) fileInput.value = '';
+  });
+
+  copyDataUriBtn?.addEventListener('click', () => {
+    const val = outputDataUri?.value;
+    if (val) {
+      navigator.clipboard.writeText(val).then(() => showToast(toastMessage));
+    }
+  });
+
+  copyBase64Btn?.addEventListener('click', () => {
+    const val = outputBase64?.value;
+    if (val) {
+      navigator.clipboard.writeText(val).then(() => showToast(toastMessage));
+    }
+  });
+</script>

package/src/tool/imagenBase64/i18n/en.ts

@@ -0,0 +1,137 @@
+import type { WithContext, SoftwareApplication } from 'schema-dts';
+import type { ImagenBase64LocaleContent } from '../index';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'image-to-base64-converter';
+const title = 'Image to Base64 Converter Online - Free and 100% Private';
+const description =
+  'Convert any image to Base64 code and Data URI directly in your browser. No file uploads. Free, private and instant.';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'Drag your image here',
+  dragSubtext: 'or click to browse your files',
+  formatBadge: 'Supports JPG, PNG, WEBP, SVG, GIF',
+  dataUriLabel: 'Data URI (Ready for CSS / HTML src="")',
+  base64Label: 'Base64 only (Plain encoded text)',
+  copyBtn: 'Copy',
+  dataUriPlaceholder: 'Upload an image to see the Data URI code...',
+  base64Placeholder: 'Upload an image to see the pure Base64 code...',
+  toastMessage: 'Code copied to clipboard!',
+  invalidImageAlert: 'Please upload a valid image file.',
+  bibliographyTitle: 'Bibliographic References',
+  faqTitle: 'Frequently Asked Questions',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: 'What is Base64 and what is it used for in web development?',
+    answer:
+      'Base64 is an encoding system that converts binary data into an ASCII text string. In web development, it is used to embed images directly within HTML or CSS files via Data URIs, reducing the number of HTTP requests to the server.',
+  },
+  {
+    question: 'Is it safe to convert my images to Base64 here?',
+    answer:
+      'Absolutely safe and private. Our tool works 100% locally in your browser. Your images are never uploaded or processed on any external server.',
+  },
+  {
+    question: 'What image formats does the Base64 converter support?',
+    answer:
+      'The tool is compatible with JPG, PNG, GIF, WebP, and even SVG vector files. When loading the image, it will automatically detect its MIME type to generate the exact Data URI code.',
+  },
+  {
+    question: 'When should I NOT use Base64 images?',
+    answer:
+      'You should avoid using Base64 images for large photographs or high-resolution images. Base64 code takes up approximately 33% more weight than the original binary file, which can excessively inflate your CSS stylesheets or HTML documents.',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: 'Drag or Select your Image',
+    text: 'Move any image (JPG, PNG, WebP, SVG, GIF) to the upload area to start the conversion.',
+  },
+  {
+    name: 'Copy the Generated Code',
+    text: 'You will see two textareas: the complete Data URI (ready to use in src="" or CSS) and the pure Base64 for other uses.',
+  },
+  {
+    name: 'Use the Code in your Project',
+    text: 'Paste the Data URI directly into the src of an img tag or in your CSS as background-image without needing external files.',
+  },
+];
+
+const bibliography: ImagenBase64LocaleContent['bibliography'] = [
+  {
+    name: 'MDN Web Docs: Data URIs',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs',
+  },
+  {
+    name: 'Base64 Encoding RFC 4648',
+    url: 'https://datatracker.ietf.org/doc/html/rfc4648',
+  },
+];
+
+const seo: ImagenBase64LocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'Online Image to Base64 Converter',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Base64 encoding is a fundamental technique in modern web development. It allows representing binary data (like images) as ASCII text, making it possible to embed images directly in HTML, CSS or JavaScript code without separate files. This is done through what are called Data URIs (Data Uniform Resource Identifiers).',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'A Data URI for an image follows the format: data:[MIME type];base64,[encoded data]. Our tool automatically generates the correct MIME type based on the image format you upload, whether it is PNG, JPG, WebP, GIF or SVG.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Main use cases for Base64 images include: SVG icons in CSS, small logos in SPA (Single Page Application) apps, critical images for initial page load that should not cause additional network requests, and image data in JSON or REST APIs.',
+  },
+  {
+    type: 'tip',
+    html:
+      'Base64 code is approximately 33% larger than the original file. For small images (icons, logos, small sprites) it is efficient. For large photographs, it is better to use separate files and take advantage of browser caching.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'A 1KB PNG image converts to approximately 1.37KB of Base64. A 100KB image would result in about 137KB of Base64 text. This 1.33x factor is constant for any file type.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Our tool processes everything locally. The image is read via the browser\'s FileReader API, which converts it directly to Base64 without any data being sent to external servers. This guarantees complete privacy for your images, whether personal or corporate.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Convert images to Base64 and Data URI for free and privately. Support for JPG, PNG, WebP, SVG and GIF. Immediate result in your browser without server-side processing.',
+  },
+];
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: [appSchema as any],
+};

package/src/tool/imagenBase64/i18n/es.ts

@@ -0,0 +1,137 @@
+import type { WithContext, SoftwareApplication } from 'schema-dts';
+import type { ImagenBase64LocaleContent } from '../index';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'convertidor-imagen-base64';
+const title = 'Convertidor de Imagen a Base64 Online - Gratis y 100% Privado';
+const description =
+  'Convierte cualquier imagen a código Base64 y Data URI directamente en tu navegador. Sin subir archivos. Gratis, privado e instantáneo.';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'Arrastra tu imagen aquí',
+  dragSubtext: 'o haz clic para explorar tus archivos',
+  formatBadge: 'Soporta JPG, PNG, WEBP, SVG, GIF',
+  dataUriLabel: 'Data URI (Listo para CSS / HTML src="")',
+  base64Label: 'Solo Base64 (Texto plano codificado)',
+  copyBtn: 'Copiar',
+  dataUriPlaceholder: 'Sube una imagen para ver el código Data URI...',
+  base64Placeholder: 'Sube una imagen para ver el código Base64 puro...',
+  toastMessage: '¡Código copiado al portapapeles!',
+  invalidImageAlert: 'Por favor sube un archivo de imagen válido.',
+  bibliographyTitle: 'Referencias Bibliográficas',
+  faqTitle: 'Preguntas Frecuentes',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: '¿Qué es Base64 y para qué sirve en el desarrollo web?',
+    answer:
+      'Base64 es un sistema de codificación que convierte datos binarios en una cadena de texto ASCII. En desarrollo web, se utiliza para incrustar imágenes directamente dentro de los archivos HTML o CSS mediante Data URIs, reduciendo el número de peticiones HTTP al servidor.',
+  },
+  {
+    question: '¿Es seguro convertir mis imágenes a Base64 aquí?',
+    answer:
+      'Absolutamente seguro y privado. Nuestra herramienta funciona 100% de manera local en tu navegador. Tus imágenes nunca se suben ni se procesan en ningún servidor externo.',
+  },
+  {
+    question: '¿Qué formatos de imagen soporta el convertidor a Base64?',
+    answer:
+      'La herramienta es compatible con JPG, PNG, GIF, WebP, e incluso archivos vectoriales SVG. Al cargar la imagen, automáticamente detectará su tipo MIME para generar el código Data URI exacto.',
+  },
+  {
+    question: '¿Cuándo NO debería usar imágenes en Base64?',
+    answer:
+      'Debes evitar usar imágenes en Base64 para fotografías grandes o imágenes de alta resolución. El código Base64 ocupa aproximadamente un 33% más de peso que el archivo binario original, lo que puede inflar excesivamente tus hojas de estilo CSS o documentos HTML.',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: 'Arrastra o Selecciona tu Imagen',
+    text: 'Mueve cualquier imagen (JPG, PNG, WebP, SVG, GIF) al área de carga para iniciar la conversión.',
+  },
+  {
+    name: 'Copia el Código Generado',
+    text: 'Verás dos textareas: el Data URI completo (listo para usar en src="" o CSS) y el Base64 puro para otros usos.',
+  },
+  {
+    name: 'Usa el Código en tu Proyecto',
+    text: 'Pega directamente el Data URI en el src de una etiqueta img o en tu CSS como background-image sin necesidad de archivos externos.',
+  },
+];
+
+const bibliography: ImagenBase64LocaleContent['bibliography'] = [
+  {
+    name: 'MDN Web Docs: Data URIs',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs',
+  },
+  {
+    name: 'Base64 Encoding RFC 4648',
+    url: 'https://datatracker.ietf.org/doc/html/rfc4648',
+  },
+];
+
+const seo: ImagenBase64LocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'Convertidor de Imagen a Base64 Online',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'La codificación Base64 es una técnica fundamental en el desarrollo web moderno. Permite representar datos binarios (como imágenes) como texto ASCII, lo que hace posible incrustar imágenes directamente en código HTML, CSS o JavaScript sin necesidad de archivos separados. Esto se realiza mediante los llamados Data URIs (Uniform Resource Identifiers de datos).',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Un Data URI para una imagen sigue el formato: data:[tipo MIME];base64,[datos codificados]. Por ejemplo, una imagen PNG pequeña podría representarse como data:image/png;base64,iVBORw0KGgo... Nuestra herramienta genera automáticamente el tipo MIME correcto según el formato de la imagen que subas.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Los principales casos de uso para imágenes en Base64 incluyen: iconos SVG en CSS, logotipos pequeños en aplicaciones SPA (Single Page Applications), imágenes críticas para carga inicial que no deben causar peticiones adicionales de red, y datos de imagen en JSON o APIs REST.',
+  },
+  {
+    type: 'tip',
+    html:
+      'El código Base64 es aproximadamente un 33% más grande que el archivo original. Para imágenes pequeñas (iconos, logos, pequeños sprites) es eficiente. Para fotografías grandes, es mejor usar archivos separados y aprovechar la caché del navegador.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Una imagen PNG de 1KB se convierte en aproximadamente 1.37KB de Base64. Una imagen de 100KB resultaría en unos 137KB de texto Base64. Este factor de 1.33x es constante para cualquier tipo de archivo.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Nuestra herramienta procesa todo localmente. La imagen se lee mediante la API FileReader del navegador, que la convierte directamente a Base64 sin ningún envío de datos a servidores externos. Esto garantiza la privacidad total de tus imágenes, sean personales o corporativas.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Convierte imágenes a Base64 y Data URI de forma gratuita y privada. Soporte para JPG, PNG, WebP, SVG y GIF. Resultado inmediato en tu navegador sin procesamiento en servidores.',
+  },
+];
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: [appSchema as any],
+};

package/src/tool/imagenBase64/i18n/fr.ts

@@ -0,0 +1,132 @@
+import type { WithContext, SoftwareApplication } from 'schema-dts';
+import type { ImagenBase64LocaleContent } from '../index';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'convertisseur-image-base64';
+const title = 'Convertisseur Image vers Base64 en Ligne - Gratuit et 100% Privé';
+const description =
+  'Convertissez n\'importe quelle image en code Base64 et Data URI directement dans votre navigateur. Sans téléchargement. Gratuit, privé et instantané.';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'Faites glisser votre image ici',
+  dragSubtext: 'ou cliquez pour parcourir vos fichiers',
+  formatBadge: 'Supporte JPG, PNG, WEBP, SVG, GIF',
+  dataUriLabel: 'Data URI (Prêt pour CSS / HTML src="")',
+  base64Label: 'Base64 uniquement (Texte encodé en clair)',
+  copyBtn: 'Copier',
+  dataUriPlaceholder: 'Téléchargez une image pour voir le code Data URI...',
+  base64Placeholder: 'Téléchargez une image pour voir le code Base64 pur...',
+  toastMessage: 'Code copié dans le presse-papiers !',
+  invalidImageAlert: 'Veuillez télécharger un fichier image valide.',
+  bibliographyTitle: 'Références Bibliographiques',
+  faqTitle: 'Questions Fréquentes',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: 'Qu\'est-ce que Base64 et à quoi sert-il dans le développement web ?',
+    answer:
+      'Base64 est un système d\'encodage qui convertit des données binaires en une chaîne de texte ASCII. Dans le développement web, il est utilisé pour intégrer des images directement dans les fichiers HTML ou CSS via des Data URIs, réduisant le nombre de requêtes HTTP vers le serveur.',
+  },
+  {
+    question: 'Est-il sûr de convertir mes images en Base64 ici ?',
+    answer:
+      'Absolument sûr et privé. Notre outil fonctionne à 100% localement dans votre navigateur. Vos images ne sont jamais téléchargées ni traitées sur un serveur externe.',
+  },
+  {
+    question: 'Quels formats d\'image le convertisseur Base64 supporte-t-il ?',
+    answer:
+      'L\'outil est compatible avec JPG, PNG, GIF, WebP et même les fichiers vectoriels SVG. Lors du chargement de l\'image, il détectera automatiquement son type MIME pour générer le code Data URI exact.',
+  },
+  {
+    question: 'Quand NE devrais-je PAS utiliser des images en Base64 ?',
+    answer:
+      'Vous devriez éviter d\'utiliser des images en Base64 pour de grandes photographies ou des images haute résolution. Le code Base64 occupe environ 33% de poids en plus que le fichier binaire original, ce qui peut excessivement gonfler vos feuilles de style CSS ou documents HTML.',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: 'Faites glisser ou sélectionnez votre image',
+    text: 'Déplacez n\'importe quelle image (JPG, PNG, WebP, SVG, GIF) vers la zone de téléchargement pour démarrer la conversion.',
+  },
+  {
+    name: 'Copiez le code généré',
+    text: 'Vous verrez deux zones de texte : le Data URI complet (prêt à utiliser dans src="" ou CSS) et le Base64 pur pour d\'autres utilisations.',
+  },
+  {
+    name: 'Utilisez le code dans votre projet',
+    text: 'Collez directement le Data URI dans le src d\'une balise img ou dans votre CSS comme background-image sans avoir besoin de fichiers externes.',
+  },
+];
+
+const bibliography: ImagenBase64LocaleContent['bibliography'] = [
+  {
+    name: 'MDN Web Docs: Data URIs',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs',
+  },
+  {
+    name: 'Base64 Encoding RFC 4648',
+    url: 'https://datatracker.ietf.org/doc/html/rfc4648',
+  },
+];
+
+const seo: ImagenBase64LocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'Convertisseur d\'Image vers Base64 en Ligne',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'L\'encodage Base64 est une technique fondamentale dans le développement web moderne. Il permet de représenter des données binaires (comme des images) sous forme de texte ASCII, rendant possible l\'intégration d\'images directement dans le code HTML, CSS ou JavaScript sans fichiers séparés. Cela se fait via ce qu\'on appelle les Data URIs (Uniform Resource Identifiers de données).',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Un Data URI pour une image suit le format : data:[type MIME];base64,[données encodées]. Notre outil génère automatiquement le bon type MIME selon le format de l\'image que vous téléchargez, que ce soit PNG, JPG, WebP, GIF ou SVG.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Les principaux cas d\'utilisation pour les images Base64 incluent : les icônes SVG en CSS, les petits logos dans les applications SPA, les images critiques pour le chargement initial de page qui ne devraient pas causer de requêtes réseau supplémentaires, et les données d\'image en JSON ou APIs REST.',
+  },
+  {
+    type: 'tip',
+    html:
+      'Le code Base64 est environ 33% plus grand que le fichier original. Pour les petites images (icônes, logos, petits sprites) c\'est efficace. Pour les grandes photographies, il vaut mieux utiliser des fichiers séparés et profiter du cache du navigateur.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Une image PNG de 1Ko se convertit en environ 1,37Ko de Base64. Une image de 100Ko donnerait environ 137Ko de texte Base64. Ce facteur de 1,33x est constant pour tout type de fichier.',
+  },
+  {
+    type: 'paragraph',
+    html:
+      'Convertissez des images en Base64 et Data URI gratuitement et en toute confidentialité. Support JPG, PNG, WebP, SVG et GIF. Résultat immédiat dans votre navigateur sans traitement côté serveur.',
+  },
+];
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: [appSchema as any],
+};

package/src/tool/imagenBase64/index.ts

@@ -0,0 +1,43 @@
+import type { ConvertersToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ImagenBase64Calculator from './component.astro';
+import ImagenBase64SEO from './seo.astro';
+import ImagenBase64Bibliography from './bibliography.astro';
+
+export interface ImageToBase64UI {
+  [key: string]: string;
+  dragTitle: string;
+  dragSubtext: string;
+  formatBadge: string;
+  dataUriLabel: string;
+  base64Label: string;
+  copyBtn: string;
+  dataUriPlaceholder: string;
+  base64Placeholder: string;
+  toastMessage: string;
+  invalidImageAlert: string;
+  bibliographyTitle: string;
+}
+
+export type ImagenBase64LocaleContent = ToolLocaleContent<ImageToBase64UI>;
+
+export const imagenBase64: ConvertersToolEntry<ImageToBase64UI> = {
+  id: 'imagen-base64',
+  icons: {
+    bg: 'mdi:file-image',
+    fg: 'mdi:code-tags',
+  },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { ImagenBase64Calculator, ImagenBase64SEO, ImagenBase64Bibliography };
+
+export const IMAGEN_BASE64_TOOL: ToolDefinition = {
+  entry: imagenBase64,
+  Component: ImagenBase64Calculator,
+  SEOComponent: ImagenBase64SEO,
+  BibliographyComponent: ImagenBase64Bibliography,
+};