@jjlmoya/utils-converters 1.7.0 → 1.8.0

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

@@ -0,0 +1,168 @@
+import type { ImagenBase64LocaleContent } from '../index';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'konverter-gambar-ke-base64';
+const title = 'Konverter Gambar ke Base64 Online';
+const description =
+  'Konversi gambar apa pun ke kode Base64 dan Data URI langsung di browser Anda. Tanpa pengunggahan file. Gratis, privat, dan instan.';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'Tarik gambar Anda ke sini',
+  dragSubtext: 'atau klik untuk menelusuri file Anda',
+  formatBadge: 'Mendukung JPG, PNG, WEBP, SVG, GIF',
+  dataUriLabel: 'Data URI (Siap untuk CSS / HTML src="")',
+  base64Label: 'Hanya Base64 (Teks terenkripsi biasa)',
+  copyBtn: 'Salin',
+  dataUriPlaceholder: 'Unggah gambar untuk melihat kode Data URI...',
+  base64Placeholder: 'Unggah gambar untuk melihat kode Base64 murni...',
+  toastMessage: 'Kode disalin ke papan klip!',
+  invalidImageAlert: 'Silakan unggah file gambar yang valid.',
+  bibliographyTitle: 'Referensi Bibliografi',
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: 'Apa itu Base64 dan apa kegunaannya dalam pengembangan web?',
+    answer:
+      'Base64 adalah sistem pengkodean yang mengubah data biner menjadi string teks ASCII. Dalam pengembangan web, ini digunakan untuk menyematkan gambar langsung di dalam file HTML atau CSS melalui Data URI, sehingga mengurangi jumlah permintaan HTTP ke server.',
+  },
+  {
+    question: 'Apakah aman mengonversi gambar saya ke Base64 di sini?',
+    answer:
+      'Sangat aman dan privat. Alat kami bekerja 100% secara lokal di browser Anda. Gambar Anda tidak pernah diunggah atau diproses di server eksternal mana pun.',
+  },
+  {
+    question: 'Format gambar apa saja yang didukung oleh konverter Base64?',
+    answer:
+      'Alat ini kompatibel dengan file JPG, PNG, GIF, WebP, dan bahkan file vektor SVG. Saat memuat gambar, alat ini akan secara otomatis mendeteksi tipe MIME-nya untuk menghasilkan kode Data URI yang tepat.',
+  },
+  {
+    question: 'Kapan saya sebaiknya TIDAK menggunakan gambar Base64?',
+    answer:
+      'Anda harus menghindari penggunaan gambar Base64 untuk foto besar atau gambar beresolusi tinggi. Kode Base64 memakan ruang sekitar 33% lebih banyak daripada file biner aslinya, yang dapat membuat stylesheet CSS atau dokumen HTML Anda membengkak secara berlebihan.',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: 'Tarik atau Pilih Gambar Anda',
+    text: 'Pindahkan gambar apa pun (JPG, PNG, WebP, SVG, GIF) ke area unggah untuk memulai konversi.',
+  },
+  {
+    name: 'Salin Kode yang Dihasilkan',
+    text: 'Anda akan melihat dua area teks: Data URI lengkap (siap digunakan di src="" atau CSS) dan Base64 murni untuk kegunaan lain.',
+  },
+  {
+    name: 'Gunakan Kode dalam Proyek Anda',
+    text: 'Tempelkan Data URI secara langsung ke src dari tag img atau di CSS Anda sebagai background-image tanpa memerlukan file eksternal.',
+  },
+];
+
+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: 'Konverter Gambar ke Base64: Sematkan Gambar Tanpa Permintaan HTTP',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: 'Base64 adalah teknik pengkodean yang mengubah data biner — seperti gambar — menjadi string teks ASCII murni. Hasilnya adalah Data URI: URL mandiri yang dimulai dengan <code>data:image/png;base64,...</code> dan berisi seluruh gambar yang dikodekan. Dengan menyematkan kode ini langsung di HTML, CSS, atau JSON Anda, gambar akan dimuat tanpa permintaan HTTP tambahan ke server — nol latensi jaringan, pemuatan instan.',
+  },
+  {
+    type: 'title',
+    text: 'Kapan menggunakan gambar Base64',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Argumen utama untuk Base64 adalah penghapusan permintaan jaringan. Setiap gambar pada halaman web berarti permintaan HTTP dengan overhead koneksi, DNS, jabat tangan TLS, dan latensi. Untuk gambar kritis yang sangat kecil — logo aplikasi utama, favicon, ikon UI — menyematkannya dalam Base64 di CSS atau HTML akan menghapus biaya tersebut dan menjamin gambar ditampilkan secara instan bahkan sebelum browser menyimpan apa pun di cache.',
+  },
+  {
+    type: 'paragraph',
+    html: 'Teknik ini sangat ampuh dalam aplikasi SPA (Single Page Application) di mana bundle JavaScript dan CSS dibuat pada saat build: menyematkan gambar kecil dalam bundle menjamin gambar dimuat bersama dengan kode tanpa permintaan tambahan. Ini juga sangat penting untuk email HTML, di mana klien email memblokir gambar eksternal tetapi hampir selalu menampilkan Data URI yang disematkan.',
+  },
+  {
+    type: 'title',
+    text: 'Kasus penggunaan untuk gambar Base64',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      'HTML inline: <code>&lt;img src="data:image/png;base64,..."&gt;</code> untuk ikon kritis.',
+      'CSS background: <code>background-image: url("data:image/svg+xml;base64,...")</code> untuk SVG UI.',
+      'JSON dan API REST: kirim gambar sebagai data teks dalam payload JSON.',
+      'Email HTML: gambar yang disematkan yang ditampilkan bahkan ketika klien memblokir URL eksternal.',
+      'Penyematan SVG: sematkan gambar raster di dalam file SVG sebagai data inline.',
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Cara kerja konversi di browser',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Saat Anda memilih atau menarik gambar, API <code>FileReader</code> browser membacanya langsung dari disk sebagai data biner di RAM. Metode <code>readAsDataURL()</code> mengubah byte biner tersebut menjadi representasi Base64 menggunakan algoritme RFC 4648 — setiap 3 byte data asli direpresentasikan sebagai 4 karakter ASCII dari alfabet Base64. Hasilnya mencakup tipe MIME yang benar yang dideteksi secara otomatis.',
+  },
+  {
+    type: 'tip',
+    title: 'Gunakan hanya untuk gambar kecil (di bawah 10 KB)',
+    html: 'Base64 meningkatkan ukuran file sekitar 33%: gambar 10 KB menjadi teks ~13,3 KB. Untuk ikon dan logo kecil, biaya ini minimal dan penghapusan permintaan HTTP mengimbanginya. Untuk foto atau gambar besar, overhead ukurannya signifikan — selalu gunakan CDN untuk gambar besar.',
+  },
+  {
+    type: 'title',
+    text: 'Kapan TIDAK menggunakan Base64',
+    level: 3,
+  },
+  {
+    type: 'tip',
+    title: 'Hindari Base64 untuk gambar besar — gunakan CDN sebagai gantinya',
+    html: 'Jika Anda memiliki gambar yang lebih besar dari 10-20 KB, Base64 merusak kinerja: ia membengkakkan ukuran HTML/CSS, mencegah browser menyimpan gambar secara independen di cache, dan memblokir rendering saat parser memproses string raksasa tersebut. Untuk gambar besar, selalu sajikan dari CDN dengan header cache yang sesuai.',
+  },
+  {
+    type: 'title',
+    text: 'Kompatibilitas dan privasi',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Data URI kompatibel dengan 100% browser modern dan sebagian besar klien email. Alat kami memproses semuanya secara lokal melalui API FileReader — gambar Anda tidak pernah meninggalkan perangkat Anda. Hal ini membuatnya cocok untuk gambar perusahaan, tangkapan layar pribadi, atau konten visual rahasia apa pun yang perlu Anda konversi ke Base64.',
+  },
+  {
+    type: 'title',
+    text: 'Kesimpulan: Alat penyematan tercepat dan paling privat',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Mengonversi gambar ke Base64 adalah teknik yang ditargetkan namun sangat ampuh jika diterapkan dengan benar. Gunakan untuk gambar kecil dan kritis di mana nol permintaan HTTP membuat perbedaan, dan hindari untuk gambar besar di mana CDN selalu menang. Dengan alat kami, Anda mendapatkan Data URI dalam sekejap, tanpa mengunggah apa pun ke server mana pun.',
+  },
+];
+
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'id', faq, howTo }),
+};

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

@@ -0,0 +1,168 @@
+import type { ImagenBase64LocaleContent } from '../index';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'convertitore-immagine-in-base64';
+const title = 'Convertitore da Immagine a Base64 Online';
+const description =
+  'Converti qualsiasi immagine in codice Base64 e Data URI direttamente nel tuo browser. Nessun caricamento di file. Gratuito, privato e istantaneo.';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'Trascina qui la tua immagine',
+  dragSubtext: 'o clicca per sfogliare i tuoi file',
+  formatBadge: 'Supporta JPG, PNG, WEBP, SVG, GIF',
+  dataUriLabel: 'Data URI (Pronto per CSS / HTML src="")',
+  base64Label: 'Solo Base64 (Testo codificato semplice)',
+  copyBtn: 'Copia',
+  dataUriPlaceholder: 'Carica un\'immagine per vedere il codice Data URI...',
+  base64Placeholder: 'Carica un\'immagine per vedere il codice Base64 puro...',
+  toastMessage: 'Codice copiato negli appunti!',
+  invalidImageAlert: 'Per favore carica un file immagine valido.',
+  bibliographyTitle: 'Riferimenti Bibliografici',
+  faqTitle: 'Domande Frequenti',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: 'Cos\'è Base64 e a cosa serve nello sviluppo web?',
+    answer:
+      'Base64 è un sistema di codifica che converte i dati binari in una stringa di testo ASCII. Nello sviluppo web, viene utilizzato per incorporare le immagini direttamente all\'interno di file HTML o CSS tramite Data URI, riducendo il numero di richieste HTTP al server.',
+  },
+  {
+    question: 'È sicuro convertire le mie immagini in Base64 qui?',
+    answer:
+      'Assolutamente sicuro e privato. Il nostro strumento funziona al 100% localmente nel tuo browser. Le tue immagini non vengono mai caricate o elaborate su alcun server esterno.',
+  },
+  {
+    question: 'Quali formati di immagine supporta il convertitore Base64?',
+    answer:
+      'Lo strumento è compatibile con file JPG, PNG, GIF, WebP e persino file vettoriali SVG. Al caricamento dell\'immagine, rileverà automaticamente il suo tipo MIME per generare l\'esatto codice Data URI.',
+  },
+  {
+    question: 'Quando NON dovrei usare immagini Base64?',
+    answer:
+      'Dovresti evitare di usare immagini Base64 per fotografie di grandi dimensioni o immagini ad alta risoluzione. Il codice Base64 occupa circa il 33% di spazio in più rispetto al file binario originale, il che può gonfiare eccessivamente i tuoi fogli di stile CSS o documenti HTML.',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: 'Trascina o Seleziona la tua Immagine',
+    text: 'Sposta qualsiasi immagine (JPG, PNG, WebP, SVG, GIF) nell\'area di caricamento per avviare la conversione.',
+  },
+  {
+    name: 'Copia il Codice Generato',
+    text: 'Vedrai due aree di testo: il Data URI completo (pronto per l\'uso in src="" o CSS) e il Base64 puro per altri usi.',
+  },
+  {
+    name: 'Usa il Codice nel tuo Progetto',
+    text: 'Incolla il Data URI direttamente nel src di un tag img o nel tuo CSS come background-image senza bisogno di file esterni.',
+  },
+];
+
+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: 'Convertitore da Immagine a Base64: Incorpora Immagini Senza Richieste HTTP',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: 'Base64 è una tecnica di codifica che trasforma i dati binari — come un\'immagine — in una stringa di testo ASCII pura. Il risultato è un Data URI: un URL autonomo che inizia con <code>data:image/png;base64,...</code> e contiene l\'intera immagine codificata. Incorporando questo codice direttamente nel tuo HTML, CSS o JSON, l\'immagine viene caricata senza alcuna richiesta HTTP aggiuntiva al server — latenza di rete zero, caricamento istantaneo.',
+  },
+  {
+    type: 'title',
+    text: 'Quando usare immagini Base64',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'L\'argomento principale a favore di Base64 è l\'eliminazione delle richieste di rete. Ogni immagine su una pagina web significa una richiesta HTTP con il suo overhead di connessione, DNS, handshake TLS e latenza. Per immagini critiche molto piccole — il logo principale dell\'applicazione, la favicon, un\'icona dell\'interfaccia utente — incorporarle in Base64 nel CSS o nell\'HTML elimina quel costo e garantisce che vengano visualizzate istantaneamente anche prima che il browser abbia memorizzato qualcosa in cache.',
+  },
+  {
+    type: 'paragraph',
+    html: 'Questa tecnica è particolarmente potente nelle app SPA (Single Page Application) in cui il bundle JavaScript e CSS viene generato al momento della build: incorporare piccole immagini nel bundle garantisce che vengano caricate insieme al codice senza richieste aggiuntive. È anche indispensabile per le e-mail HTML, dove i client di posta bloccano le immagini esterne ma visualizzano quasi sempre i Data URI incorporati.',
+  },
+  {
+    type: 'title',
+    text: 'Casi d\'uso per le immagini Base64',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      'HTML inline: <code>&lt;img src="data:image/png;base64,..."&gt;</code> per icone critiche.',
+      'CSS background: <code>background-image: url("data:image/svg+xml;base64,...")</code> per SVG della UI.',
+      'JSON e API REST: invia immagini come dati di testo nei payload JSON.',
+      'Email HTML: immagini incorporate che vengono visualizzate anche quando il client blocca gli URL esterni.',
+      'Incorporamento SVG: incorpora immagini raster all\'interno di file SVG come dati inline.',
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Come funziona la conversione nel browser',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Quando selezioni o trascini un\'immagine, l\'API <code>FileReader</code> del browser la legge direttamente dal disco come dati binari nella RAM. Il metodo <code>readAsDataURL()</code> converte quei byte binari nella loro rappresentazione Base64 utilizzando l\'algoritmo RFC 4648 — ogni 3 byte di dati originali sono rappresentati come 4 caratteri ASCII dall\'alfabeto Base64. Il risultato include il tipo MIME corretto rilevato automaticamente.',
+  },
+  {
+    type: 'tip',
+    title: 'Usalo solo per immagini piccole (sotto i 10 KB)',
+    html: 'Base64 aumenta la dimensione del file di circa il 33%: un\'immagine da 10 KB diventa circa 13,3 KB di testo. Per icone e logo piccoli questo costo è minimo e l\'eliminazione della richiesta HTTP lo compensa. Per fotografie o immagini di grandi dimensioni, il sovrapprezzo dimensionale è significativo — usa sempre una CDN per le immagini grandi.',
+  },
+  {
+    type: 'title',
+    text: 'Quando NON usare Base64',
+    level: 3,
+  },
+  {
+    type: 'tip',
+    title: 'Evita Base64 per immagini grandi — usa invece una CDN',
+    html: 'Se hai immagini più grandi di 10-20 KB, Base64 danneggia le prestazioni: gonfia la dimensione di HTML/CSS, impedisce al browser di memorizzare l\'immagine in cache in modo indipendente e blocca il rendering mentre il parser elabora la stringa gigante. Per le immagini grandi, servi sempre da una CDN con intestazioni di cache appropriate.',
+  },
+  {
+    type: 'title',
+    text: 'Compatibilità e privacy',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'I Data URI sono compatibili con il 100% dei browser moderni e la maggior parte dei client di posta elettronica. Il nostro strumento elabora tutto localmente tramite l\'API FileReader: le tue immagini non lasciano mai il tuo dispositivo. Questo lo rende adatto per immagini aziendali, screenshot privati o qualsiasi contenuto visivo riservato che hai bisogno di convertire in Base64.',
+  },
+  {
+    type: 'title',
+    text: 'Conclusione: Lo strumento di incorporamento più rapido e privato',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Convertire le immagini in Base64 è una tecnica mirata ma molto potente se applicata correttamente. Usala per immagini piccole e critiche dove l\'assenza di richieste HTTP fa la differenza, ed evitala per immagini grandi dove una CDN vince sempre. Con il nostro strumento, ottieni il Data URI in un istante, senza caricare nulla su alcun server.',
+  },
+];
+
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'it', faq, howTo }),
+};

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

@@ -0,0 +1,168 @@
+import type { ImagenBase64LocaleContent } from '../index';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { ImageToBase64UI } from '../index';
+
+const slug = 'image-to-base64-converter';
+const title = '画像Base64変換器オンライン';
+const description =
+  'ブラウザ上で直接、画像をBase64コードとData URIに変換します。ファイルのアップロード不要。無料、安全、そして即座に処理されます。';
+
+const ui: ImageToBase64UI = {
+  dragTitle: 'ここに画像をドラッグ',
+  dragSubtext: 'またはクリックしてファイルを参照',
+  formatBadge: 'JPG, PNG, WEBP, SVG, GIFに対応',
+  dataUriLabel: 'Data URI（CSS / HTML src=""用）',
+  base64Label: 'Base64のみ（純粋なエンコードテキスト）',
+  copyBtn: 'コピー',
+  dataUriPlaceholder: '画像をアップロードしてData URIコードを表示...',
+  base64Placeholder: '画像をアップロードして純粋なBase64コードを表示...',
+  toastMessage: 'コードをクリップボードにコピーしました！',
+  invalidImageAlert: '有効な画像ファイルをアップロードしてください。',
+  bibliographyTitle: '参考文献',
+  faqTitle: 'よくある質問',
+};
+
+const faq: ImagenBase64LocaleContent['faq'] = [
+  {
+    question: 'Base64とは何ですか？Web開発で何に使用されますか？',
+    answer:
+      'Base64は、バイナリデータをASCIIテキスト文字列に変換するエンコード方式です。Web開発では、Data URIを使用してHTMLやCSSファイル内に画像を直接埋め込むために使用され、サーバーへのHTTPリクエスト数を減らすことができます。',
+  },
+  {
+    question: 'ここで画像をBase64に変換するのは安全ですか？',
+    answer:
+      '完全に安全でプライバシーが守られています。当ツールはブラウザ内で100%ローカルに動作します。画像が外部サーバーにアップロードされたり、処理されたりすることはありません。',
+  },
+  {
+    question: 'Base64変換器はどの画像形式をサポートしていますか？',
+    answer:
+      '当ツールは、JPG、PNG、GIF、WebP、さらにはSVGベクトルファイルに対応しています。画像を読み込む際、MIMEタイプを自動的に検出して、正確なData URIコードを生成します。',
+  },
+  {
+    question: 'Base64画像をどのような場合に使用すべきではありませんか？',
+    answer:
+      '大きな写真や高解像度の画像にBase64画像を使用することは避けてください。Base64コードは元のバイナリファイルよりも約33%容量が増えるため、CSSスタイルシートやHTMLドキュメントが不必要に肥大化する可能性があります。',
+  },
+];
+
+const howTo: ImagenBase64LocaleContent['howTo'] = [
+  {
+    name: '画像をドラッグまたは選択',
+    text: '画像（JPG, PNG, WebP, SVG, GIF）をアップロードエリアに移動して変換を開始します。',
+  },
+  {
+    name: '生成されたコードをコピー',
+    text: '2つのテキストエリアが表示されます。完全なData URI（src=""やCSSで使用可能）と、他の用途向けの純粋なBase64です。',
+  },
+  {
+    name: 'プロジェクトでコードを使用',
+    text: '外部ファイルを必要とせず、Data URIをimgタグのsrcやCSSのbackground-imageに直接貼り付けます。',
+  },
+];
+
+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: '画像Base64変換器：HTTPリクエストなしで画像を埋め込む',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: 'Base64は、画像のようなバイナリデータを純粋なASCIIテキスト文字列に変換するエンコード手法です。その結果がData URIであり、<code>data:image/png;base64,...</code>で始まる自己完結型のURLで、エンコードされた画像全体が含まれます。このコードをHTML、CSS、またはJSONに直接埋め込むことで、サーバーへの追加のHTTPリクエストなしで画像が読み込まれます。ネットワーク遅延はゼロで、即座に表示されます。',
+  },
+  {
+    type: 'title',
+    text: 'Base64画像を使用すべき場合',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Base64を使用する最大のメリットは、ネットワークリクエストの排除です。Webページ上のすべての画像は、接続、DNS、TLSハンドシェイク、および遅延を伴うHTTPリクエストを意味します。アプリケーションのメインロゴ、ファビコン、UIアイコンなどの非常に小さな重要な画像の場合、CSSやHTMLにBase64で埋め込むことで、そのコストを排除し、ブラウザがキャッシュする前であっても即座に表示されることを保証します。',
+  },
+  {
+    type: 'paragraph',
+    html: 'この技術は、ビルド時にJavaScriptとCSSのバンドルが生成されるSPA（シングルページアプリケーション）で特に強力です。小さな画像をバンドルに埋め込むことで、追加のリクエストなしにコードと一緒に読み込まれることが保証されます。また、メールクライアントが外部画像をブロックしても、埋め込まれたData URIはほとんどの場合表示されるHTMLメールでも不可欠です。',
+  },
+  {
+    type: 'title',
+    text: 'Base64画像の活用事例',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      'HTMLインライン：重要なアイコン用の <code>&lt;img src="data:image/png;base64,..."&gt;</code>。',
+      'CSS背景：UI用SVGの <code>background-image: url("data:image/svg+xml;base64,...")</code>。',
+      'JSONとREST API：JSONペイロード内にテキストデータとして画像を送信。',
+      'HTMLメール：クライアントが外部URLをブロックしても表示される埋め込み画像。',
+      'SVG埋め込み：インラインデータとしてSVGファイル内にラスター画像を埋め込む。',
+    ],
+  },
+  {
+    type: 'title',
+    text: 'ブラウザでの変換の仕組み',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: '画像を選択またはドラッグすると、ブラウザの <code>FileReader</code> APIがディスクからRAMへバイナリデータとして直接読み込みます。 <code>readAsDataURL()</code> メソッドは、RFC 4648アルゴリズムを使用して、そのバイナリバイトをBase64表現に変換します。元のデータの3バイトごとに、Base64アルファベットの4つのASCII文字で表現されます。結果には、自動的に検出された正しいMIMEタイプが含まれます。',
+  },
+  {
+    type: 'tip',
+    title: '小さな画像（10 KB未満）にのみ使用してください',
+    html: 'Base64はファイルサイズを約33%増加させます。10 KBの画像は約13.3 KBのテキストになります。小さなアイコンやロゴの場合、このコストはわずかであり、HTTPリクエストの排除によって十分に相殺されます。写真や大きな画像の場合、容量のオーバーヘッドが大きいため、常にCDNを使用してください。',
+  },
+  {
+    type: 'title',
+    text: 'Base64を使用すべきではない場合',
+    level: 3,
+  },
+  {
+    type: 'tip',
+    title: '大きな画像にはBase64を避け、代わりにCDNを使用してください',
+    html: '画像が10〜20 KBを超える場合、Base64はパフォーマンスを低下させます。HTML/CSSのサイズを肥大化させ、ブラウザが画像を個別にキャッシュするのを妨げ、パサーが巨大な文字列を処理している間レンダリングをブロックします。大きな画像については、常に適切なキャッシュヘッダーを設定したCDNから提供してください。',
+  },
+  {
+    type: 'title',
+    text: '互換性とプライバシー',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Data URIはすべての現代的なブラウザおよびほとんどのメールクライアントと互換性があります。当ツールはFileReader APIを介してローカルですべてを処理するため、画像がデバイス外に出ることはありません。これにより、企業内画像、プライベートなスクリーンショット、またはBase64に変換する必要がある機密性の高いビジュアルコンテンツに適しています。',
+  },
+  {
+    type: 'title',
+    text: '結論：最も高速でプライベートな埋め込みツール',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: '画像をBase64に変換することは、正しく適用されれば非常に強力な技術です。ゼロHTTPリクエストが効果を発揮する小さな重要な画像に使用し、CDNが常に優位に立つ大きな画像には使用を避けてください。当ツールを使用すれば、サーバーへのアップロードなしで、瞬時にData URIを取得できます。',
+  },
+];
+
+
+export const content: ImagenBase64LocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
+};