@jjlmoya/utils-converters 1.6.0 → 1.8.0

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

@@ -0,0 +1,182 @@
+import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { PngAWebpLocaleContent } from '../index';
+
+const slug = 'png-to-webp-converter';
+const title = 'PNGをWebPにオンラインで無料で変換しましょう';
+const description =
+  'ブラウザでPNG画像をWebPに変換します。ファイルサイズを最大40%削減。透明度を維持。ファイルのアップロード不要。無料かつプライベート。';
+
+const ui: ImageConverterUI = {
+  dragText: 'PNGファイルをドラッグ...',
+  convertText: '即座にWebPに変換します',
+  selectFiles: 'ファイルを選択',
+  processedFiles: '処理済みファイル',
+  downloadAll: 'すべてダウンロード (.zip)',
+  pending: '保留中',
+  bibliographyTitle: '参考文献',
+  faqTitle: 'よくある質問',
+};
+
+const faq: PngAWebpLocaleContent['faq'] = [
+  {
+    question: 'なぜPNGをWebPに変換する必要があるのですか？',
+    answer:
+      'WebPは同じ品質でPNGよりも最大40%優れた圧縮を提供すると同時に、アルファ透明度もサポートしています。Google PageSpeed Insightsが推奨する形式です。',
+  },
+  {
+    question: '変換過程で透明度は失われますか？',
+    answer:
+      'いいえ。WebPの技術的実装はアルファチャネルをサポートしています。元のPNGの透明度は、新しいWebPファイルでもそのまま維持されます。',
+  },
+  {
+    question: '画像はサーバーに送信されますか？',
+    answer:
+      'いいえ。コードはユーザーのブラウザ（クライアント側）でのみ実行されます。変換された画像を当社が閲覧、記録、または保存することはありません。',
+  },
+];
+
+const howTo: PngAWebpLocaleContent['howTo'] = [
+  {
+    name: 'PNGファイルを挿入',
+    text: '容量の大きいPNGファイルをアップロードエリアにドラッグ＆ドロップするか、従来のインタラクティブなセレクターを使用してください。',
+  },
+  {
+    name: 'チャネル検出',
+    text: 'ローカルレンダリングエンジンがピクセル構成を検出し、最適化されたWebP形式でエクスポートします。',
+  },
+  {
+    name: '直接ダウンロード',
+    text: '高度に圧縮されたWebPファイルを個別にダウンロードするか、ZIPパッケージコンバーターを使用してまとめてダウンロードしてください。',
+  },
+];
+
+const bibliography: PngAWebpLocaleContent['bibliography'] = [
+  {
+    name: 'Google: WebPの実装詳細',
+    url: 'https://developers.google.com/speed/webp/',
+  },
+  {
+    name: 'W3C: Core Web Vitalsガイダンス',
+    url: 'https://web.dev/vitals/',
+  },
+  {
+    name: 'Mozilla Docs: 画像形式',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types',
+  },
+];
+
+const seo: PngAWebpLocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'PNG to WebP 変換機：ウェブのための透明度と最新の圧縮技術',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>PNG</strong>は、ロゴ、アイコン、UI要素、切り抜き背景の商品画像など、透明度が必要なウェブ画像の標準形式でした。問題はファイルサイズです。品質を保証する可逆圧縮は、ファイル容量を大幅に大きくします。Googleの <strong>WebP</strong> はこの矛盾を解決します。アルファチャネル（透明度）をサポートしながら、PNGよりもはるかに効率的に圧縮するため、ウェブサイトでPNGからWebPに切り替えることは、視覚的な品質を犠牲にすることなく適用できる完璧な最適化です。',
+  },
+  {
+    type: 'title',
+    text: 'PNGとWebPの使い分け',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'PhotoshopやFigmaなどのデザインツール、印刷ワークフロー、古いデスクトップアプリケーション、またはWebPサポートが保証されていない環境など、互換性が重要な場合には依然として <strong>PNG</strong> が適切な形式です。また、可逆圧縮によってすべてのピクセルが保持されるため、編集工程で作業レイヤーを保存するのにも理想的な形式です。ただし、ファイル容量がWebPの3〜8倍になる可能性があります。',
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>WebP</strong>は、あらゆるモダンなウェブコンテンツにおいてPNGの自然な後継です。Chrome、Firefox、Safari、およびEdgeはすべてこれをネイティブにサポートしています。可逆WebP画像は、同等のPNGより26%小さく、非可逆モードでは視覚的にほとんど区別がつかない品質を維持しながら最大40%小さくなります。そしてウェブデザインにとって重要なのは、 <strong>WebPがPNGと全く同様にアルファ透明度を保持</strong> し、視覚的な妥協がないことです。',
+  },
+  {
+    type: 'title',
+    text: '比較：ローカル変換 vs クラウド変換',
+    level: 3,
+  },
+  {
+    type: 'comparative',
+    items: [
+      {
+        title: 'クラウド変換器',
+        description: 'リモートサーバーにファイルをアップロードするツールです。',
+        icon: 'mdi:cloud-upload',
+        pointIcon: 'mdi:close-circle-outline',
+        points: [
+          'アップロードおよびダウンロード時にネットワーク遅延が発生',
+          'ロゴや画像がサードパーティのサーバーに保存される',
+          'ファイルサイズ制限や1日の変換回数制限がある',
+          '強制的な広告やサードパーティのトラッカーが含まれる',
+        ],
+      },
+      {
+        title: 'ローカルアーキテクチャ',
+        description: 'Vanilla JS技術を使用し、ユーザーのハードウェア上で直接処理します。',
+        icon: 'mdi:laptop-mac',
+        highlight: true,
+        points: [
+          'ネットワーク遅延のない即座の処理速度',
+          '完全なプライバシー — 外部送信データ0バイト',
+          '容量制限やファイル数の制限なし',
+          '広告や追跡のないクリーンなインターフェース',
+        ],
+      },
+    ],
+  },
+  {
+    type: 'title',
+    text: '技術的な仕組み',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'PNGファイルがローカルで読み込まれ、メモリ上の <strong>HTML5 Canvas</strong> にデコードされます。Canvas APIは元のPNGのアルファチャネルを保持し、すべての透明および半透明のピクセルがRGBAピクセルバッファ内にそのまま維持されます。次に、 <code>toDataURL(\'image/webp\')</code> を呼び出してキャンバスをエクスポートしますが、この際にブラウザのWebPコーデック（Googleのlibwebpベース）が適用され、透明度データを変更することなく、より圧縮されたファイルを生成します。',
+  },
+  {
+    type: 'paragraph',
+    html: 'WebPは2つの圧縮モードを使用します。すべてのピクセルがオリジナルと正確に一致する必要がある画像のための可逆モードと、小さな差異が目立たない写真や要素のための非可逆モードです。可逆モードはPNGより26%小さいファイルを生成し、非可逆モードでは優れた視覚品質を維持しながらPNG比で最大40%の容量削減を達成できます。',
+  },
+  {
+    type: 'tip',
+    title: 'ヒント：ウェブではWebPがPNGとJPGの両方を凌駕します',
+    html: '可逆モードのWebPはPNGより小さいです。非可逆モードのWebPはJPGより小さいです。これにより、WebPはウェブ環境において <strong>両方の形式を代替する唯一の形式</strong> となりました。アップロードする前に透明PNGをWebPに変換してください。Google PageSpeed Insightsはこれを検出し、「次世代フォーマットでの画像の配信」の監査で高い評価を与えます。',
+  },
+  {
+    type: 'title',
+    text: '活用事例と互換性',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      'ウェブサイトやアプリ用の透明背景のロゴやアイコン。',
+      'ECサイトにおける切り抜き背景の商品画像。',
+      'アルファ透明度を持つCSSスプライトやUI要素。',
+      'ランディングページ用のラスタライズされたイラストやベクターグラフィックス。',
+      'ブログやニュースポータルの透明背景の記事サムネイル。',
+    ],
+  },
+  {
+    type: 'title',
+    text: '結論',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'PNGからWebPへの移行は、現在ウェブにおいて利用可能な最も包括的な画像最適化です。視覚的なデザインを変更することなく、ファイル容量を削減し、透明度を維持し、Core Web Vitalsの指標を改善できます。このツールはブラウザで画像を処理し、外部サーバーへ送信しないため、即座に、無料で、かつ完全にプライベートに行えます。',
+  },
+];
+
+
+export const content: PngAWebpLocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
+};

package/src/tool/pngAWebp/i18n/ko.ts

@@ -0,0 +1,182 @@
+import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { PngAWebpLocaleContent } from '../index';
+
+const slug = 'png-to-webp-converter';
+const title = 'PNG를 WebP로 온라인에서 무료로 변환하세요';
+const description =
+  '브라우저에서 PNG 이미지를 WebP로 변환하세요. 파일 크기 최대 40% 감소. 투명도 유지. 파일 업로드 없음. 무료 및 개인 정보 보호.';
+
+const ui: ImageConverterUI = {
+  dragText: 'PNG 파일을 드래그하세요...',
+  convertText: '즉시 WebP로 변환하려면',
+  selectFiles: '파일 선택',
+  processedFiles: '처리된 파일',
+  downloadAll: '모두 다운로드 (.zip)',
+  pending: '대기 중',
+  bibliographyTitle: '참고 문헌',
+  faqTitle: '자주 묻는 질문',
+};
+
+const faq: PngAWebpLocaleContent['faq'] = [
+  {
+    question: '왜 PNG를 WebP로 변환해야 하나요?',
+    answer:
+      'WebP는 동일한 품질에서 PNG보다 최대 40% 더 나은 압축률을 제공하는 동시에 알파 투명도를 지원합니다. Google PageSpeed Insights에서 권장하는 형식입니다.',
+  },
+  {
+    question: '변환 과정에서 투명도가 손실되나요?',
+    answer:
+      '아니요. WebP의 기술적 구현은 알파 채널을 지원합니다. 원본 PNG의 투명도는 새 WebP 파일에서도 그대로 유지됩니다.',
+  },
+  {
+    question: '내 이미지가 서버로 전송되나요?',
+    answer:
+      '아니요. 코드는 사용자의 브라우저(클라이언트 측)에서만 실행됩니다. 당사는 사용자가 변환하는 이미지를 보거나 기록하거나 저장하지 않습니다.',
+  },
+];
+
+const howTo: PngAWebpLocaleContent['howTo'] = [
+  {
+    name: 'PNG 파일 넣기',
+    text: '용량이 큰 PNG 파일을 업로드 영역에 드래그하여 떨어뜨리거나 기존의 인터랙티브 선택기를 사용하세요.',
+  },
+  {
+    name: '채널 감지',
+    text: '로컬 렌더링 엔진이 픽셀 구성을 감지하여 최적화된 WebP 형식으로 내보냅니다.',
+  },
+  {
+    name: '직접 다운로드',
+    text: '고도로 압축된 WebP 파일을 개별적으로 다운로드하거나 ZIP 패키지 변환기를 사용하여 한 번에 묶어서 다운로드하세요.',
+  },
+];
+
+const bibliography: PngAWebpLocaleContent['bibliography'] = [
+  {
+    name: 'Google: WebP 구현 세부 정보',
+    url: 'https://developers.google.com/speed/webp/',
+  },
+  {
+    name: 'W3C: Core Web Vitals 가이드',
+    url: 'https://web.dev/vitals/',
+  },
+  {
+    name: 'Mozilla Docs: 이미지 형식',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types',
+  },
+];
+
+const seo: PngAWebpLocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'PNG to WebP 변환기: 웹을 위한 투명도 및 현대적인 압축 기술',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>PNG</strong>는 로고, 아이콘, UI 요소, 누끼 컷 제품 이미지 등 투명도가 필요한 웹 이미지의 표준 형식이었습니다. 문제는 파일 크기입니다. 품질을 보장하는 무손실 압축은 파일 용량을 상당히 크게 만듭니다. Google의 <strong>WebP</strong>는 이 모순을 해결합니다. 알파 채널(투명도)을 지원하면서도 PNG보다 훨씬 더 효과적으로 압축하므로, 웹사이트에서 PNG를 WebP로 전환하는 것은 시각적 품질을 희생하지 않으면서도 완벽한 최적화를 이루는 방법입니다.',
+  },
+  {
+    type: 'title',
+    text: 'PNG와 WebP 중 무엇을 선택해야 할까요?',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Photoshop이나 Figma와 같은 디자인 도구, 인쇄 작업 흐름, 레거시 데스크톱 애플리케이션 또는 WebP 지원을 보장할 수 없는 환경과 같이 호환성이 중요한 경우에는 여전히 <strong>PNG</strong>가 적합한 형식입니다. 또한 무손실 압축이 모든 픽셀을 보존하므로 편집 파이프라인에서 작업 레이어를 저장하는 데 이상적인 형식입니다. 하지만 파일 용량이 WebP보다 3~8배 더 무거울 수 있다는 단점이 있습니다.',
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>WebP</strong>는 모든 현대적인 웹 콘텐츠에서 PNG를 대체할 수 있는 자연스러운 선택입니다. Chrome, Firefox, Safari 및 Edge는 모두 이를 기본적으로 지원합니다. 무손실 WebP 이미지는 동일한 PNG보다 26% 더 작으며, 손실 모드에서는 시각적으로 거의 차이가 없으면서도 최대 40%까지 더 작아질 수 있습니다. 그리고 웹 디자인에서 중요한 점은 <strong>WebP가 PNG와 똑같이 알파 투명도를 보존</strong>하여 시각적 타협이 없다는 것입니다.',
+  },
+  {
+    type: 'title',
+    text: '비교: 로컬 변환 vs 클라우드 변환',
+    level: 3,
+  },
+  {
+    type: 'comparative',
+    items: [
+      {
+        title: '클라우드 변환기',
+        description: '원격 서버로 파일을 업로드하는 도구입니다.',
+        icon: 'mdi:cloud-upload',
+        pointIcon: 'mdi:close-circle-outline',
+        points: [
+          '업로드 및 다운로드 시 네트워크 지연 발생',
+          '로고와 이미지가 타사 서버에 저장됨',
+          '파일 크기 제한 및 일일 변환 횟수 제한',
+          '강제적인 광고 및 타사 추적 프로그램 포함',
+        ],
+      },
+      {
+        title: '사용자 환경 로컬 아키텍처',
+        description: 'Vanilla JS 기술을 사용하여 하드웨어에서 직접 처리합니다.',
+        icon: 'mdi:laptop-mac',
+        highlight: true,
+        points: [
+          '네트워크 지연 없는 즉각적인 속도',
+          '완벽한 개인 정보 보호 — 외부 전송 데이터 0바이트',
+          '용량 제한이나 파일 개수 제한 없음',
+          '광고나 추적이 없는 깨끗한 인터페이스',
+        ],
+      },
+    ],
+  },
+  {
+    type: 'title',
+    text: '기술적 작동 원리',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'PNG 파일이 로컬에서 로드되어 메모리상 <strong>HTML5 Canvas</strong>에 디코딩됩니다. Canvas API는 원본 PNG의 알파 채널을 보존하여 모든 투명 및 반투명 픽셀이 RGBA 픽셀 버퍼 내에 온전히 유지됩니다. 그런 다음 <code>toDataURL(\'image/webp\')</code>을 호출하여 캔버스를 내보내는데, 이때 브라우저의 WebP 코덱(Google의 libwebp 기반)이 적용되어 투명도 데이터를 변경하지 않고도 더 압축된 파일을 생성합니다.',
+  },
+  {
+    type: 'paragraph',
+    html: 'WebP는 두 가지 압축 모드를 사용합니다. 모든 픽셀이 원본과 정확히 일치해야 하는 이미지를 위한 무손실 모드와 작은 차이가 눈에 띄지 않는 사진 및 요소를 위한 손실 모드입니다. 무손실 모드는 PNG보다 26% 더 작은 파일을 생성하며, 손실 모드는 우수한 시각적 품질을 유지하면서 PNG 대비 최대 40%의 용량 감소를 달성할 수 있습니다.',
+  },
+  {
+    type: 'tip',
+    title: '팁: 웹에서는 WebP가 PNG와 JPG를 모두 능가합니다',
+    html: '무손실 모드의 WebP는 PNG보다 작습니다. 손실 모드의 WebP는 JPG보다 작습니다. 이로 인해 WebP는 웹 환경에서 <strong>두 형식을 모두 대체하는 유일한 형식</strong>이 되었습니다. 업로드하기 전에 투명 PNG를 WebP로 변환하세요. Google PageSpeed Insights는 이를 감지하여 "현대적인 형식으로 이미지 제공하기" 감사에서 긍정적인 점수를 부여합니다.',
+  },
+  {
+    type: 'title',
+    text: '활용 사례 및 호환성',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      '웹사이트 및 앱용 투명 배경 로고 및 아이콘.',
+      '전자상거래 상점의 누끼 컷 배경 제품 이미지.',
+      '알파 투명도가 있는 CSS 스프라이트 및 UI 요소.',
+      '랜딩 페이지용 래스터화된 일러스트레이션 및 벡터 그래픽.',
+      '블로그 및 뉴스 포털의 투명 배경 기사 썸네일.',
+    ],
+  },
+  {
+    type: 'title',
+    text: '결론',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'PNG에서 WebP로의 전환은 가장 완벽한 웹 이미지 최적화 방법입니다. 시각적 디자인을 변경하지 않고도 파일 용량을 줄이고 투명도를 유지하며 Core Web Vitals 지표를 개선할 수 있습니다. 이 도구는 브라우저에서 이미지를 처리하며 외부 서버로 전송하지 않으므로 즉각적이고 무료이며 완벽하게 개인 정보가 보호됩니다.',
+  },
+];
+
+
+export const content: PngAWebpLocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'ko', faq, howTo }),
+};

package/src/tool/pngAWebp/i18n/nl.ts

@@ -0,0 +1,182 @@
+import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
+import { generateSchemas } from '../../../shared/logic/schemas';
+import type { PngAWebpLocaleContent } from '../index';
+
+const slug = 'png-naar-webp-converter';
+const title = 'Converteer PNG naar WebP Online en Gratis';
+const description =
+  'Converteer PNG-afbeeldingen naar WebP in je browser. Tot 40% kleinere bestandsgrootte. Behoudt transparantie. Geen bestandsuploads. Gratis en privé.';
+
+const ui: ImageConverterUI = {
+  dragText: 'Sleep PNG-bestanden...',
+  convertText: 'Om ze direct naar WebP te converteren',
+  selectFiles: 'Bestanden selecteren',
+  processedFiles: 'Verwerkte bestanden',
+  downloadAll: 'Alles downloaden (.zip)',
+  pending: 'In afwachting',
+  bibliographyTitle: 'Bibliografische Referenties',
+  faqTitle: 'Veelgestelde Vragen',
+};
+
+const faq: PngAWebpLocaleContent['faq'] = [
+  {
+    question: 'Waarom PNG naar WebP converteren?',
+    answer:
+      'WebP biedt tot 40% betere compressie dan PNG bij dezelfde kwaliteit, terwijl het ook Alpha-transparantie ondersteunt. Het is het formaat dat wordt aanbevolen door Google PageSpeed Insights.',
+  },
+  {
+    question: 'Gaat transparantie verloren tijdens het proces?',
+    answer:
+      'Nee. De technische implementatie van WebP ondersteunt het alfakanaal. De transparanties van de originele PNG blijven behouden in het nieuwe WebP-bestand.',
+  },
+  {
+    question: 'Gaan mijn afbeeldingen naar een server?',
+    answer:
+      'Nee. De code draait exclusief in je browser (Client-Side). We bekijken, registreren of bewaren de afbeeldingen die je converteert nooit.',
+  },
+];
+
+const howTo: PngAWebpLocaleContent['howTo'] = [
+  {
+    name: 'Voeg je PNG\'s toe',
+    text: 'Sleep je grote PNG-bestanden naar het uploadgedeelte of gebruik de traditionele interactieve kiezer.',
+  },
+  {
+    name: 'Kanaaldetectie',
+    text: 'De lokale rendering-engine detecteert en exporteert de pixelcompositie naar het geoptimaliseerde WebP-formaat.',
+  },
+  {
+    name: 'Directe Download',
+    text: 'Download je sterk gecomprimeerde WebP-bestanden afzonderlijk of bundel ze samen met de ZIP-pakketconverter.',
+  },
+];
+
+const bibliography: PngAWebpLocaleContent['bibliography'] = [
+  {
+    name: 'Google: WebP Implementatiedetails',
+    url: 'https://developers.google.com/speed/webp/',
+  },
+  {
+    name: 'W3C: Core Web Vitals Richtlijnen',
+    url: 'https://web.dev/vitals/',
+  },
+  {
+    name: 'Mozilla Docs: Beeldformaten',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types',
+  },
+];
+
+const seo: PngAWebpLocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'PNG naar WebP Converter: Transparantie en moderne compressie voor het web',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>PNG</strong> is decennialang het referentieformaat geweest voor webafbeeldingen met transparantie — logo\'s, pictogrammen, UI-elementen, productafbeeldingen op uitgesneden achtergronden. Het probleem is de bestandsgrootte: de verliesvrije compressie die kwaliteit garandeert, genereert ook merkbaar grote bestanden. Google\'s <strong>WebP</strong> lost deze tegenstrijdigheid op: het ondersteunt het alfakanaal (transparantie) <em>en</em> comprimeert veel beter dan PNG, waardoor de overstap van PNG naar WebP op je website een perfecte optimalisatie is die niets opoffert.',
+  },
+  {
+    type: 'title',
+    text: 'PNG of WebP? Wanneer je elk formaat moet gebruiken',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>PNG</strong> blijft het juiste formaat wanneer compatibiliteit cruciaal is: ontwerptools zoals Photoshop of Figma, printworkflows, verouderde desktopapplicaties of elke context waarin WebP-ondersteuning niet gegarandeerd is. Het is ook het ideale formaat voor het opslaan van werklagen in bewerkingspipelines, aangezien de verliesvrije compressie elke pixel behoudt. De kosten: bestanden die 3–8 keer meer kunnen wegen dan hun WebP-equivalent.',
+  },
+  {
+    type: 'paragraph',
+    html: '<strong>WebP</strong> is de natuurlijke vervanger van PNG voor alle moderne webinhoud. Chrome, Firefox, Safari en Edge ondersteunen het allemaal standaard. Een verliesvrije WebP-afbeelding is 26% kleiner dan de equivalente PNG; in de lossy-modus kan deze tot 40% kleiner zijn met vrijwel onwaarneembare visuele kwaliteit. En cruciaal voor webdesign: <strong>WebP behoudt alfa-transparantie</strong> precies zoals PNG, zonder visueel compromis.',
+  },
+  {
+    type: 'title',
+    text: 'Vergelijking: Lokale vs Cloud-conversie',
+    level: 3,
+  },
+  {
+    type: 'comparative',
+    items: [
+      {
+        title: 'Cloud Converters',
+        description: 'Tools die je bestanden uploaden naar een externe server.',
+        icon: 'mdi:cloud-upload',
+        pointIcon: 'mdi:close-circle-outline',
+        points: [
+          'Netwerklatentie bij uploaden en downloaden',
+          'Je logo\'s en afbeeldingen opgeslagen op servers van derden',
+          'Limieten voor bestandsgrootte en dagelijkse conversiequota',
+          'Opdringerige advertenties en trackers van derden',
+        ],
+      },
+      {
+        title: 'Onze Lokale Architectuur',
+        description: 'Directe verwerking op je eigen hardware met Vanilla JS-technologie.',
+        icon: 'mdi:laptop-mac',
+        highlight: true,
+        points: [
+          'Onmiddellijke snelheid — geen netwerklatentie',
+          'Volledige privacy — 0 bytes extern verzonden',
+          'Geen MB-limieten of beperkingen op aantal bestanden',
+          'Schone interface, geen advertenties of tracking',
+        ],
+      },
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Hoe het technisch werkt',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'De PNG wordt lokaal geladen en gedecodeerd in een in-memory <strong>HTML5 Canvas</strong>. De Canvas API behoudt het alfakanaal van de originele PNG — alle transparante en semi-transparante pixels blijven intact in de RGBA-pixelbuffer. Het canvas wordt vervolgens geëxporteerd door <code>toDataURL(\'image/webp\')</code> aan te roepen, wat de WebP-codec van de browser (gebaseerd op Google\'s libwebp) toepast om een compacter bestand te genereren zonder de transparantiegegevens te wijzigen.',
+  },
+  {
+    type: 'paragraph',
+    html: 'WebP gebruikt twee compressiemodi: lossless-modus voor afbeeldingen waarbij elke pixel exact trouw aan het origineel moet zijn, en lossy-modus voor foto\'s en elementen waarbij kleine verschillen onmerkbaar zijn. Lossless-modus produceert bestanden die 26% kleiner zijn dan PNG; lossy-modus kan reducties tot 40% bereiken in vergelijking met PNG met behoud van uitstekende visuele kwaliteit.',
+  },
+  {
+    type: 'tip',
+    title: 'Tip: WebP verslaat zowel PNG als JPG op het web',
+    html: 'WebP in lossless-modus is kleiner dan PNG. WebP in lossy-modus is kleiner dan JPG. Dit maakt WebP het <strong>enige formaat dat beide vervangt</strong> in de webcontext. Converteer je transparante PNG\'s naar WebP voordat je ze uploadt: Google PageSpeed Insights detecteert het en scoort het positief in audits voor "Afbeeldingen in moderne formaten aanbieden".',
+  },
+  {
+    type: 'title',
+    text: 'Toepassingen en compatibiliteit',
+    level: 3,
+  },
+  {
+    type: 'list',
+    icon: 'mdi:check-circle',
+    items: [
+      'Logo\'s en pictogrammen met transparante achtergronden voor websites en apps.',
+      'Productafbeeldingen met uitgesneden achtergronden in e-commerce winkels.',
+      'CSS-sprites en UI-elementen met alfa-transparantie.',
+      'Gerasterde illustraties en vectorafbeeldingen voor landingspagina\'s.',
+      'Artikelminiaturen met transparante achtergronden in blogs en nieuwsportalen.',
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Conclusie',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'De overstap van PNG naar WebP is de meest complete webafbeeldingsoptimalisatie die beschikbaar is: je krijgt lichtere bestanden, behoudt transparantie en verbetert Core Web Vitals-metrieken zonder iets aan je visuele ontwerp te veranderen. Deze tool doet het onmiddellijk, gratis en volledig privé — je afbeeldingen worden verwerkt in je browser en gaan nooit naar een externe server.',
+  },
+];
+
+
+export const content: PngAWebpLocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas: generateSchemas({ title, description, inLanguage: 'nl', faq, howTo }),
+};