画像から Base64 エンコーダへ – 画像を埋め込みデータ URI に変換

開発者統合ガイド: Base64 のコーディング

インライン データ URI は、外部リンクがブロックされる可能性がある単一ページ アプリケーションや HTML 電子メール テンプレートに対して非常に強力です。開発者は、異なるスタック間で Base64 バイナリ ブロックを簡単にエンコードおよびデコードできます。

// Node.js - ローカル画像ファイルを Base64 文字列に変換する
const fs = require('fs');

関数 encodeLocalFile(filePath) {
    const fileBuffer = fs.readFileSync(filePath);
    constbase64String = fileBuffer.toString('base64');
    `data:image/png;base64,${base64String}`を返します。
}

// Node.js - Base64 文字列をデコードして物理イメージに戻す
関数 saveBase64AsFile(dataURI、outputPath) {
    constbase64Data = dataURI.replace(/^data:image\/\w+;base64,/, "");
    const fileBuffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(outputPath, fileBuffer);
}

Linux/macOS bash シェル内で作業している場合は、組み込みシステム base64 ターミナル ユーティリティを使用してファイルを変換できます。

# ローカル logo.png を Base64 テキスト ファイルにエンコードします
Base64 logo.png > logo_string.txt

# Base64 テキスト ファイルをデコードして生のビジュアル イメージに戻す
base64 -d logo_string.txt > Output_restored.png

プロのクリエイターのための意図の高いベスト プラクティス

グラフィック アセットを最大限に活用するには、次の業界のベスト プラクティスを採用することをお勧めします。

• プライバシーを優先する: 当社のツールは 100% 安全です。すべての処理は HTML5 API を使用してブラウザのタブ内でローカルに実行されるため、プライベートな写真がインターネット経由で送信されることはありません。
• 常に元のバックアップを保持する: 空間調整、フィルタ、または変換を実行する前に、ソース ファイルのクリーンな高解像度コピーを必ず保持してください。これにより、デザインを変更する必要がある場合に、後でパラメータを再調整できます。
• コンテキストに応じた形式: 常に写真の位置に応じて変換および圧縮します。一般的なウェブサイトのデザインには WebP を使用し、透明性が必要なロゴやアイコンには PNG を使用し、標準的な印刷またはアーカイブ ストレージには高品質の JPG を使用します。