@jjlmoya/utils-converters 1.15.0 → 1.18.0

package/src/tool/imagenBase64/component.astro

@@ -5,307 +5,6 @@ interface Props { ui: ImageToBase64UI }
 const { ui } = Astro.props;
 ---
 
-<style>
-  .base64-container {
-    width: 100%;
-    margin-bottom: 2rem;
-  }
-
-  .base64-card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border-base);
-    border-radius: 20px;
-
-    --card-shadow: rgba(0, 0, 0, 0.04);
-    --card-shadow-blur: 20px;
-    --card-shadow-y: 4px;
-
-    box-shadow: 0 var(--card-shadow-y) var(--card-shadow-blur) var(--card-shadow);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  @media (min-width: 800px) {
-    .base64-card {
-      flex-direction: row;
-      min-height: 550px;
-    }
-
-    .upload-section {
-      width: 40%;
-      border-right: 1px solid var(--border-base);
-      background: var(--bg-muted);
-      padding: 3rem 2rem;
-    }
-
-    .result-section {
-      flex: 1;
-      padding: 3rem 2rem;
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-  }
-
-  .upload-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 2rem;
-  }
-
-  .result-section {
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .drop-zone {
-    position: relative;
-    border: 2px dashed var(--border-base);
-    border-radius: 16px;
-    background: var(--bg-surface);
-    padding: 2rem 1rem;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 300px;
-    height: 100%;
-  }
-
-  .drop-zone:hover {
-    border-color: var(--accent);
-    background: var(--bg-muted);
-  }
-
-  .drop-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    pointer-events: none;
-  }
-
-  .upload-icon {
-    width: 40px;
-    height: 40px;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-  }
-
-  .drop-content h3 {
-    margin: 0;
-    font-size: 1.05rem;
-    font-weight: 700;
-    color: var(--text-base);
-  }
-
-  .drop-content p {
-    margin: 0;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-  }
-
-  .file-input-native {
-    margin-top: 1.5rem;
-    padding: 0.5rem;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    background: var(--bg-surface);
-    border: 1px solid var(--border-base);
-    border-radius: 8px;
-    max-width: 100%;
-    cursor: pointer;
-  }
-
-  .drop-zone .file-input-native {
-    pointer-events: auto;
-  }
-
-  .preview-container {
-    position: absolute;
-    inset: 0;
-    background: var(--bg-surface);
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1.25rem;
-  }
-
-  .preview-container.hidden {
-    display: none;
-  }
-
-  #b64-image-preview {
-    max-width: 100%;
-    max-height: 250px;
-    object-fit: contain;
-    border-radius: 8px;
-  }
-
-  .clear-btn {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-base);
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  .image-info {
-    position: absolute;
-    bottom: 1rem;
-    display: flex;
-    background: var(--bg-muted);
-    padding: 0.4rem 0.8rem;
-    border-radius: 8px;
-    border: 1px solid var(--border-base);
-  }
-
-  .info-pill {
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: var(--text-muted);
-  }
-
-  .name-pill {
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-right: 0.5rem;
-  }
-
-  .size-pill {
-    color: var(--accent);
-    padding-left: 0.5rem;
-    border-left: 1px solid var(--border-base);
-  }
-
-  .output-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .output-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .output-header label {
-    font-weight: 700;
-    color: var(--text-base);
-    font-size: 0.95rem;
-  }
-
-  .copy-btn {
-    background: var(--bg-surface);
-    border: 1px solid var(--border-base);
-    color: var(--text-base);
-    padding: 0.35rem 0.75rem;
-    border-radius: 6px;
-    font-size: 0.8rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .copy-btn:hover {
-    background: var(--accent);
-    color: var(--text-on-primary);
-  }
-
-  .code-wrapper {
-    background: var(--bg-muted);
-    border: 1px solid var(--border-base);
-    border-radius: 12px;
-    padding: 1rem;
-  }
-
-  textarea {
-    width: 100%;
-    min-height: 120px;
-    background: transparent;
-    border: none;
-    color: var(--text-base);
-    font-size: 0.85rem;
-    line-height: 1.5;
-    resize: none;
-    outline: none;
-    word-break: break-all;
-  }
-
-  .toast {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%) translateY(20px);
-    background: var(--text-base);
-    color: var(--bg-surface);
-    padding: 0.75rem 1.5rem;
-    border-radius: 50px;
-    font-weight: 700;
-    font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    --toast-shadow: rgba(0, 0, 0, 0.2);
-    --toast-shadow-y: 10px;
-    --toast-shadow-blur: 30px;
-
-    box-shadow: 0 var(--toast-shadow-y) var(--toast-shadow-blur) var(--toast-shadow);
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.2s;
-    z-index: 100;
-  }
-
-  .toast.show {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-
-  @media (max-width: 600px) {
-    .card-section {
-      padding: 1rem;
-    }
-
-    .drop-zone {
-      min-height: 280px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .card-section {
-      padding: 1.5rem;
-    }
-
-    .drop-zone {
-      min-height: 250px;
-    }
-
-    textarea {
-      height: 120px;
-    }
-  }
-</style>
 
 <div class="base64-container animate-in">
   <div class="base64-card">

package/src/tool/imagenBase64/entry.ts

@@ -41,3 +41,5 @@ export const imagenBase64: ConvertersToolEntry<ImageToBase64UI> = {
     zh: () => import('./i18n/zh').then((m) => m.content),
   },
 };
+
+export { bibliography } from './bibliography';

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImagenBase64LocaleContent } from '../index';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { ImageToBase64UI } from '../index';
@@ -60,17 +61,6 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
 ];
 
-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 Kodierung RFC 4648',
-    url: 'https://datatracker.ietf.org/doc/html/rfc4648',
-  },
-];
-
 const seo: ImagenBase64LocaleContent['seo'] = [
   {
     type: 'title',
@@ -79,7 +69,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Base64 ist eine Kodierungstechnik, die Binärdaten – wie ein Bild – in eine reine ASCII-Textzeichenfolge transformiert. Das Ergebnis ist eine Data URI: eine in sich geschlossene URL, die mit <code>data:image/png;base64,...</code> beginnt und das gesamte kodierte Bild enthält. Durch das direkte Einbetten dieses Codes in Ihr HTML, CSS oder JSON wird das Bild ohne zusätzliche HTTP-Anfrage an den Server geladen – null Netzwerklatenz, sofortiges Laden.',
+    html: 'Base64 ist eine Kodierungstechnik, die Binärdaten - wie ein Bild - in eine reine ASCII-Textzeichenfolge transformiert. Das Ergebnis ist eine Data URI: eine in sich geschlossene URL, die mit <code>data:image/png;base64,...</code> beginnt und das gesamte kodierte Bild enthält. Durch das direkte Einbetten dieses Codes in Ihr HTML, CSS oder JSON wird das Bild ohne zusätzliche HTTP-Anfrage an den Server geladen - null Netzwerklatenz, sofortiges Laden.',
   },
   {
     type: 'title',
@@ -88,7 +78,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Das Hauptargument für Base64 ist die Eliminierung von Netzwerkanfragen. Jedes Bild auf einer Webseite bedeutet eine HTTP-Anfrage mit dem entsprechenden Overhead für Verbindung, DNS, TLS-Handshake und Latenz. Bei sehr kleinen, kritischen Bildern – dem Hauptlogo der Anwendung, dem Favicon oder einem UI-Icon – eliminiert das Einbetten in Base64 in CSS oder HTML diese Kosten und garantiert eine sofortige Anzeige, noch bevor der Browser etwas zwischengespeichert hat.',
+    html: 'Das Hauptargument für Base64 ist die Eliminierung von Netzwerkanfragen. Jedes Bild auf einer Webseite bedeutet eine HTTP-Anfrage mit dem entsprechenden Overhead für Verbindung, DNS, TLS-Handshake und Latenz. Bei sehr kleinen, kritischen Bildern - dem Hauptlogo der Anwendung, dem Favicon oder einem UI-Icon - eliminiert das Einbetten in Base64 in CSS oder HTML diese Kosten und garantiert eine sofortige Anzeige, noch bevor der Browser etwas zwischengespeichert hat.',
   },
   {
     type: 'paragraph',
@@ -117,12 +107,12 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Wenn Sie ein Bild auswählen oder ziehen, liest die <code>FileReader</code>-API des Browsers es direkt von der Festplatte als Binärdaten in den RAM. Die Methode <code>readAsDataURL()</code> konvertiert diese Binärbytes mithilfe des RFC 4648-Algorithmus in ihre Base64-Darstellung – alle 3 Bytes der Originaldaten werden als 4 ASCII-Zeichen aus dem Base64-Alphabet dargestellt. Das Ergebnis enthält den automatisch erkannten korrekten MIME-Typ.',
+    html: 'Wenn Sie ein Bild auswählen oder ziehen, liest die <code>FileReader</code>-API des Browsers es direkt von der Festplatte als Binärdaten in den RAM. Die Methode <code>readAsDataURL()</code> konvertiert diese Binärbytes mithilfe des RFC 4648-Algorithmus in ihre Base64-Darstellung - alle 3 Bytes der Originaldaten werden als 4 ASCII-Zeichen aus dem Base64-Alphabet dargestellt. Das Ergebnis enthält den automatisch erkannten korrekten MIME-Typ.',
   },
   {
     type: 'tip',
     title: 'Nur für kleine Bilder verwenden (unter 10 KB)',
-    html: 'Base64 erhöht die Dateigröße um etwa 33 %: Ein 10 KB großes Bild wird zu ca. 13,3 KB Text. Bei kleinen Icons und Logos ist dieser Aufwand minimal, und die Eliminierung der HTTP-Anfrage gleicht dies aus. Bei Fotos oder großen Bildern ist der Größen-Overhead signifikant – verwenden Sie für große Bilder immer ein CDN.',
+    html: 'Base64 erhöht die Dateigröße um etwa 33 %: Ein 10 KB großes Bild wird zu ca. 13,3 KB Text. Bei kleinen Icons und Logos ist dieser Aufwand minimal, und die Eliminierung der HTTP-Anfrage gleicht dies aus. Bei Fotos oder großen Bildern ist der Größen-Overhead signifikant - verwenden Sie für große Bilder immer ein CDN.',
   },
   {
     type: 'title',
@@ -131,7 +121,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'tip',
-    title: 'Vermeiden Sie Base64 für große Bilder – nutzen Sie ein CDN',
+    title: 'Vermeiden Sie Base64 für große Bilder: nutzen Sie ein CDN',
     html: 'Wenn Sie Bilder haben, die größer als 10-20 KB sind, schadet Base64 der Performance: Es bläht die HTML/CSS-Größe auf, verhindert, dass der Browser das Bild unabhängig zwischenspeichert, und blockiert das Rendering, während der Parser den riesigen String verarbeitet. Für große Bilder sollten Sie immer ein CDN mit entsprechenden Cache-Headern verwenden.',
   },
   {
@@ -141,7 +131,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Data URIs sind mit 100 % der modernen Browser und den meisten E-Mail-Clients kompatibel. Unser Tool verarbeitet alles lokal über die FileReader-API – Ihre Bilder verlassen niemals Ihr Gerät. Damit eignet es sich für Unternehmensbilder, private Screenshots oder alle vertraulichen visuellen Inhalte, die Sie in Base64 konvertieren müssen.',
+    html: 'Data URIs sind mit 100 % der modernen Browser und den meisten E-Mail-Clients kompatibel. Unser Tool verarbeitet alles lokal über die FileReader-API - Ihre Bilder verlassen niemals Ihr Gerät. Damit eignet es sich für Unternehmensbilder, private Screenshots oder alle vertraulichen visuellen Inhalte, die Sie in Base64 konvertieren müssen.',
   },
   {
     type: 'title',

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImagenBase64LocaleContent } from '../index';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { ImageToBase64UI } from '../index';
@@ -60,17 +61,6 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
 ];
 
-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',
@@ -79,7 +69,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Base64 is an encoding technique that transforms binary data — like an image — into a pure ASCII text string. The result is a Data URI: a self-contained URL that starts with <code>data:image/png;base64,...</code> and contains the entire encoded image. By embedding this code directly in your HTML, CSS or JSON, the image loads without any additional HTTP request to the server — zero network latency, instant loading.',
+    html: 'Base64 is an encoding technique that transforms binary data - like an image - into a pure ASCII text string. The result is a Data URI: a self-contained URL that starts with <code>data:image/png;base64,...</code> and contains the entire encoded image. By embedding this code directly in your HTML, CSS or JSON, the image loads without any additional HTTP request to the server - zero network latency, instant loading.',
   },
   {
     type: 'title',
@@ -88,7 +78,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'The main argument for Base64 is the elimination of network requests. Every image on a web page means an HTTP request with its overhead of connection, DNS, TLS handshake and latency. For very small critical images — the main application logo, favicon, a UI icon — embedding them in Base64 in the CSS or HTML eliminates that cost and guarantees they display instantly even before the browser has cached anything.',
+    html: 'The main argument for Base64 is the elimination of network requests. Every image on a web page means an HTTP request with its overhead of connection, DNS, TLS handshake and latency. For very small critical images - the main application logo, favicon, a UI icon - embedding them in Base64 in the CSS or HTML eliminates that cost and guarantees they display instantly even before the browser has cached anything.',
   },
   {
     type: 'paragraph',
@@ -117,12 +107,12 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'When you select or drag an image, the browser\'s <code>FileReader</code> API reads it directly from disk as binary data in RAM. The <code>readAsDataURL()</code> method converts those binary bytes to their Base64 representation using the RFC 4648 algorithm — every 3 bytes of original data are represented as 4 ASCII characters from the Base64 alphabet. The result includes the automatically detected correct MIME type.',
+    html: 'When you select or drag an image, the browser\'s <code>FileReader</code> API reads it directly from disk as binary data in RAM. The <code>readAsDataURL()</code> method converts those binary bytes to their Base64 representation using the RFC 4648 algorithm - every 3 bytes of original data are represented as 4 ASCII characters from the Base64 alphabet. The result includes the automatically detected correct MIME type.',
   },
   {
     type: 'tip',
     title: 'Use it only for small images (under 10 KB)',
-    html: 'Base64 increases file size by approximately 33%: a 10 KB image becomes ~13.3 KB of text. For small icons and logos this cost is minimal and the elimination of the HTTP request compensates for it. For photographs or large images, the size overhead is significant — always use a CDN for large images.',
+    html: 'Base64 increases file size by approximately 33%: a 10 KB image becomes ~13.3 KB of text. For small icons and logos this cost is minimal and the elimination of the HTTP request compensates for it. For photographs or large images, the size overhead is significant - always use a CDN for large images.',
   },
   {
     type: 'title',
@@ -131,7 +121,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'tip',
-    title: 'Avoid Base64 for large images — use a CDN instead',
+    title: 'Avoid Base64 for large images: use a CDN instead',
     html: 'If you have images larger than 10-20 KB, Base64 hurts performance: it inflates HTML/CSS size, prevents the browser from caching the image independently, and blocks rendering while the parser processes the giant string. For large images, always serve from a CDN with appropriate cache headers.',
   },
   {
@@ -141,7 +131,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Data URIs are compatible with 100% of modern browsers and most email clients. Our tool processes everything locally via the FileReader API — your images never leave your device. This makes it suitable for corporate images, private screenshots or any confidential visual content that you need to convert to Base64.',
+    html: 'Data URIs are compatible with 100% of modern browsers and most email clients. Our tool processes everything locally via the FileReader API - your images never leave your device. This makes it suitable for corporate images, private screenshots or any confidential visual content that you need to convert to Base64.',
   },
   {
     type: 'title',

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImagenBase64LocaleContent } from '../index';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { ImageToBase64UI } from '../index';
@@ -60,17 +61,6 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
 ];
 
-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',
@@ -79,7 +69,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Base64 es una técnica de codificación que transforma datos binarios — como una imagen — en una cadena de texto ASCII puro. El resultado es un Data URI: una URL auto-contenida que empieza por <code>data:image/png;base64,...</code> y contiene toda la imagen codificada. Al incrustar este código directamente en tu HTML, CSS o JSON, la imagen se carga sin ninguna petición HTTP adicional al servidor — cero latencia de red, carga instantánea.',
+    html: 'Base64 es una técnica de codificación que transforma datos binarios - como una imagen - en una cadena de texto ASCII puro. El resultado es un Data URI: una URL auto-contenida que empieza por <code>data:image/png;base64,...</code> y contiene toda la imagen codificada. Al incrustar este código directamente en tu HTML, CSS o JSON, la imagen se carga sin ninguna petición HTTP adicional al servidor - cero latencia de red, carga instantánea.',
   },
   {
     type: 'title',
@@ -88,7 +78,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'El principal argumento a favor de Base64 es la eliminación de peticiones de red. Cada imagen en una página web supone una petición HTTP con su overhead de conexión, DNS, handshake TLS y latencia. Para imágenes críticas muy pequeñas — el logo principal de la aplicación, el favicon, un icono de UI — incrustarlas en Base64 en el CSS o HTML elimina ese coste y garantiza que se muestren de forma instantánea incluso antes de que el navegador haya cacheado nada.',
+    html: 'El principal argumento a favor de Base64 es la eliminación de peticiones de red. Cada imagen en una página web supone una petición HTTP con su overhead de conexión, DNS, handshake TLS y latencia. Para imágenes críticas muy pequeñas - el logo principal de la aplicación, el favicon, un icono de UI - incrustarlas en Base64 en el CSS o HTML elimina ese coste y garantiza que se muestren de forma instantánea incluso antes de que el navegador haya cacheado nada.',
   },
   {
     type: 'paragraph',
@@ -117,12 +107,12 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Cuando seleccionas o arrastras una imagen, la API <code>FileReader</code> del navegador la lee directamente desde el disco como datos binarios en memoria RAM. El método <code>readAsDataURL()</code> convierte esos bytes binarios a su representación Base64 usando el algoritmo de RFC 4648 — cada 3 bytes de datos originales se representan como 4 caracteres ASCII del alfabeto Base64. El resultado incluye el tipo MIME correcto detectado automáticamente.',
+    html: 'Cuando seleccionas o arrastras una imagen, la API <code>FileReader</code> del navegador la lee directamente desde el disco como datos binarios en memoria RAM. El método <code>readAsDataURL()</code> convierte esos bytes binarios a su representación Base64 usando el algoritmo de RFC 4648 - cada 3 bytes de datos originales se representan como 4 caracteres ASCII del alfabeto Base64. El resultado incluye el tipo MIME correcto detectado automáticamente.',
   },
   {
     type: 'tip',
     title: 'Úsalo solo para imágenes pequeñas (menos de 10 KB)',
-    html: 'Base64 aumenta el tamaño del archivo en aproximadamente un 33%: una imagen de 10 KB se convierte en ~13.3 KB de texto. Para iconos y logos pequeños este coste es mínimo y la eliminación de la petición HTTP lo compensa. Para fotografías o imágenes grandes, el overhead de tamaño es significativo — usa siempre un CDN para imágenes grandes.',
+    html: 'Base64 aumenta el tamaño del archivo en aproximadamente un 33%: una imagen de 10 KB se convierte en ~13.3 KB de texto. Para iconos y logos pequeños este coste es mínimo y la eliminación de la petición HTTP lo compensa. Para fotografías o imágenes grandes, el overhead de tamaño es significativo - usa siempre un CDN para imágenes grandes.',
   },
   {
     type: 'title',
@@ -131,7 +121,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'tip',
-    title: 'Evita Base64 para imágenes grandes — usa un CDN',
+    title: 'Evita Base64 para imágenes grandes: usa un CDN',
     html: 'Si tienes imágenes de más de 10-20 KB, Base64 perjudica el rendimiento: infla el tamaño del HTML/CSS, impide que el navegador cachee la imagen de forma independiente, y bloquea el render mientras el parser procesa el string gigante. Para imágenes grandes, sirve siempre desde un CDN con headers de caché apropiados.',
   },
   {
@@ -141,7 +131,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Los Data URIs son compatibles con el 100% de los navegadores modernos y la mayoría de clientes de email. Nuestra herramienta procesa todo localmente mediante la API FileReader — tus imágenes nunca salen de tu dispositivo. Esto la hace adecuada para imágenes corporativas, capturas de pantalla privadas o cualquier contenido visual confidencial que necesites convertir a Base64.',
+    html: 'Los Data URIs son compatibles con el 100% de los navegadores modernos y la mayoría de clientes de email. Nuestra herramienta procesa todo localmente mediante la API FileReader - tus imágenes nunca salen de tu dispositivo. Esto la hace adecuada para imágenes corporativas, capturas de pantalla privadas o cualquier contenido visual confidencial que necesites convertir a Base64.',
   },
   {
     type: 'title',

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImagenBase64LocaleContent } from '../index';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { ImageToBase64UI } from '../index';
@@ -52,7 +53,7 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
   {
     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.',
+    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',
@@ -60,26 +61,15 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
 ];
 
-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 Image vers Base64 : Intégrez des Images Sans Requêtes HTTP',
+    text: 'Convertisseur Image vers Base64: Intégrez des Images Sans Requêtes HTTP',
     level: 2,
   },
   {
     type: 'paragraph',
-    html: 'Base64 est une technique d\'encodage qui transforme des données binaires — comme une image — en une chaîne de texte ASCII pur. Le résultat est un Data URI : une URL auto-contenue qui commence par <code>data:image/png;base64,...</code> et contient l\'image entière encodée. En intégrant ce code directement dans votre HTML, CSS ou JSON, l\'image se charge sans aucune requête HTTP supplémentaire au serveur — zéro latence réseau, chargement instantané.',
+    html: 'Base64 est une technique d\'encodage qui transforme des données binaires - comme une image - en une chaîne de texte ASCII pur. Le résultat est un Data URI: une URL auto-contenue qui commence par <code>data:image/png;base64,...</code> et contient l\'image entière encodée. En intégrant ce code directement dans votre HTML, CSS ou JSON, l\'image se charge sans aucune requête HTTP supplémentaire au serveur - zéro latence réseau, chargement instantané.',
   },
   {
     type: 'title',
@@ -88,11 +78,11 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Le principal argument en faveur de Base64 est l\'élimination des requêtes réseau. Chaque image sur une page web représente une requête HTTP avec son overhead de connexion, DNS, handshake TLS et latence. Pour les très petites images critiques — le logo principal de l\'application, le favicon, une icône d\'interface — les intégrer en Base64 dans le CSS ou HTML élimine ce coût et garantit leur affichage instantané même avant que le navigateur n\'ait rien mis en cache.',
+    html: 'Le principal argument en faveur de Base64 est l\'élimination des requêtes réseau. Chaque image sur une page web représente une requête HTTP avec son overhead de connexion, DNS, handshake TLS et latence. Pour les très petites images critiques - le logo principal de l\'application, le favicon, une icône d\'interface - les intégrer en Base64 dans le CSS ou HTML élimine ce coût et garantit leur affichage instantané même avant que le navigateur n\'ait rien mis en cache.',
   },
   {
     type: 'paragraph',
-    html: 'Cette technique est particulièrement puissante dans les applications SPA (Single Page Applications) où le bundle JavaScript et CSS est généré au moment de la compilation : intégrer de petites images dans le bundle garantit qu\'elles se chargent avec le code sans requêtes supplémentaires. Elle est aussi indispensable pour les emails HTML, où les clients de messagerie bloquent les images externes mais affichent toujours les Data URIs intégrés.',
+    html: 'Cette technique est particulièrement puissante dans les applications SPA (Single Page Applications) où le bundle JavaScript et CSS est généré au moment de la compilation: intégrer de petites images dans le bundle garantit qu\'elles se chargent avec le code sans requêtes supplémentaires. Elle est aussi indispensable pour les emails HTML, où les clients de messagerie bloquent les images externes mais affichent toujours les Data URIs intégrés.',
   },
   {
     type: 'title',
@@ -103,11 +93,11 @@ const seo: ImagenBase64LocaleContent['seo'] = [
     type: 'list',
     icon: 'mdi:check-circle',
     items: [
-      'HTML inline : <code>&lt;img src="data:image/png;base64,..."&gt;</code> pour les icônes critiques.',
-      'CSS background : <code>background-image: url("data:image/svg+xml;base64,...")</code> pour les SVGs d\'interface.',
-      'JSON et APIs REST : envoi d\'images comme données texte dans les payloads JSON.',
-      'Emails HTML : images intégrées qui s\'affichent même quand le client bloque les URLs externes.',
-      'Intégration SVG : intégrer des images raster dans des fichiers SVG comme données inline.',
+      'HTML inline: <code>&lt;img src="data:image/png;base64,..."&gt;</code> pour les icônes critiques.',
+      'CSS background: <code>background-image: url("data:image/svg+xml;base64,...")</code> pour les SVGs d\'interface.',
+      'JSON et APIs REST: envoi d\'images comme données texte dans les payloads JSON.',
+      'Emails HTML: images intégrées qui s\'affichent même quand le client bloque les URLs externes.',
+      'Intégration SVG: intégrer des images raster dans des fichiers SVG comme données inline.',
     ],
   },
   {
@@ -117,12 +107,12 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Lorsque vous sélectionnez ou faites glisser une image, l\'API <code>FileReader</code> du navigateur la lit directement depuis le disque comme données binaires en RAM. La méthode <code>readAsDataURL()</code> convertit ces octets binaires en leur représentation Base64 selon l\'algorithme RFC 4648 — chaque 3 octets de données originales sont représentés par 4 caractères ASCII de l\'alphabet Base64. Le résultat inclut le type MIME correct détecté automatiquement.',
+    html: 'Lorsque vous sélectionnez ou faites glisser une image, l\'API <code>FileReader</code> du navigateur la lit directement depuis le disque comme données binaires en RAM. La méthode <code>readAsDataURL()</code> convertit ces octets binaires en leur représentation Base64 selon l\'algorithme RFC 4648 - chaque 3 octets de données originales sont représentés par 4 caractères ASCII de l\'alphabet Base64. Le résultat inclut le type MIME correct détecté automatiquement.',
   },
   {
     type: 'tip',
     title: 'Utilisez',
-    html: 'Base64 augmente la taille du fichier d\'environ 33% : une image de 10 Ko devient ~13,3 Ko de texte. Pour les petites icônes et logos, ce coût est minimal et l\'élimination de la requête HTTP le compense. Pour les photographies ou grandes images, le surcoût de taille est significatif — utilisez toujours un CDN pour les grandes images.',
+    html: 'Base64 augmente la taille du fichier d\'environ 33%: une image de 10 Ko devient ~13,3 Ko de texte. Pour les petites icônes et logos, ce coût est minimal et l\'élimination de la requête HTTP le compense. Pour les photographies ou grandes images, le surcoût de taille est significatif - utilisez toujours un CDN pour les grandes images.',
   },
   {
     type: 'title',
@@ -131,8 +121,8 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'tip',
-    title: 'Évitez Base64 pour les grandes images — utilisez un CDN',
-    html: 'Si vous avez des images de plus de 10-20 Ko, Base64 nuit aux performances : il gonfle la taille du HTML/CSS, empêche le navigateur de mettre l\'image en cache de façon indépendante, et bloque le rendu pendant que le parseur traite la chaîne géante. Pour les grandes images, servez toujours depuis un CDN avec des en-têtes de cache appropriés.',
+    title: 'Évitez Base64 pour les grandes images: utilisez un CDN',
+    html: 'Si vous avez des images de plus de 10-20 Ko, Base64 nuit aux performances: il gonfle la taille du HTML/CSS, empêche le navigateur de mettre l\'image en cache de façon indépendante, et bloque le rendu pendant que le parseur traite la chaîne géante. Pour les grandes images, servez toujours depuis un CDN avec des en-têtes de cache appropriés.',
   },
   {
     type: 'title',
@@ -141,11 +131,11 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Les Data URIs sont compatibles avec 100% des navigateurs modernes et la plupart des clients de messagerie. Notre outil traite tout localement via l\'API FileReader — vos images ne quittent jamais votre appareil. Cela le rend adapté aux images d\'entreprise, aux captures d\'écran privées ou à tout contenu visuel confidentiel que vous devez convertir en Base64.',
+    html: 'Les Data URIs sont compatibles avec 100% des navigateurs modernes et la plupart des clients de messagerie. Notre outil traite tout localement via l\'API FileReader - vos images ne quittent jamais votre appareil. Cela le rend adapté aux images d\'entreprise, aux captures d\'écran privées ou à tout contenu visuel confidentiel que vous devez convertir en Base64.',
   },
   {
     type: 'title',
-    text: 'Conclusion : L\'outil d\'intégration le plus rapide et le plus privé',
+    text: 'Conclusion: L\'outil d\'intégration le plus rapide et le plus privé',
     level: 3,
   },
   {