画像を Base64 に変換する方法.

「Image to Base64 Converter」を開きます。画像を選択するか、「サンプルを試す」を選択してください。この例では 202,491 バイトを含む 512 × 512 ピクセルの favicon-orbit.png を使用しています。エディタはコードの上に画像を表示するため、意図したアセットを選択したことを確認できます。

ブラウザがプレビュー用にデコードできる場合、PNG、JPG、WebP、GIF、BMP、AVIF がサポートされます。最大ファイルサイズは 25 MB で、制限は 60 メガピクセル、一辺あたり 16,000 ピクセルです。SVG マークアップはこのラスターコンバーターでは受け付けられません。

このツールは元のファイルバイトを読み取ります。プレビューを使用して画像を再構築、サイズ変更、再圧縮することはありません。したがって、既存のメタデータと GIF アニメーションはエンコードされたデータ内に保持されます。

「設定」を開き、この例ではコード形式の下で HTML 画像を選択します。結果は Base64 Data URL を含む img タグになります。alt 属性は最初は空です。画像が情報を伝達する場合は、有用な代替テキストを記述してください。

Data URL は data:image/png;base64 のようなプレフィックスで始まり、その後にエンコードされたデータが続きます。プレーン Base64 にはデータのみが含まれます。CSS 背景は Data URL を background-image 宣言でラップします。これらの表現はそれぞれ異なる用途に使用されるため、ファイル名だけを変更するのではなく、アプリケーションが要求する形式をコピーしてください。

コードパネルは、コード形式を変更した直後に更新されます。コピーアイコンは現在の表現をコピーし、共有されたコピー完了の確認を表示します。クリップボードへのアクセスがブロックされている場合は、手動でコピーできるようにコードが選択状態になります。

「開始」を選択してから「ダウンロード」を選択します。この例では HTML の画像コードを含む favicon-orbit-base64.txt が保存されます。その 270,029 バイトは 202,491 バイトのソースよりも大きくなります。記事の比較では、読みやすさのために短縮されたダウンロード済みテキストの冒頭部分を示しています。

Base64は通常、3バイトのソースを4文字のテキストに変換し、小さなラッパーの前に約3分の1を追加します。小さなアイコンを埋め込むとドキュメントを自己完結型にできますが、大きな画像文字列を HTML や CSS 内に配置するとドキュメントが肥大化し、画像が個別のファイルとしてキャッシュされなくなります。

エンコードは暗号化ではありません。完全なBase64文字列を持つ人は誰でも元の画像を復元できます。個人情報が含まれている場合は、ソースと同様にコードを慎重に扱ってください。