Base64
Image Data URL
⚠️ Large image may freez the browser
HTML用に画像をBase64エンコード
HTMLプロジェクトに画像を埋め込むために、Base64またはDataURL形式に変換します。画像ファイルをアップロードし、適切なタブを選択して、エンコードされたコードを生成してください。エンコードされた画像をウェブサイトに統合するために、'コピー'ボタンを使用し、外部リンクなしで直接埋め込みます。この方法により、画像をHTMLコンテンツの一部として含めることができ、デプロイを簡素化し、外部リソースへの依存を減らすことができます。
Image → Base64 / Data URL
Click or Drag & Drop an Image
画像をBase64コードに変換する
1
画像をアップロード
指定された領域をクリックするか、ドラッグアンドドロップで画像をアップロードしてください。
2
符号化方式を選択してください
ベース64またはデータURLタブのいずれかを選択して、希望のエンコード形式を選んでください。
3
Base64コードを表示
タブの下にあるテキストエリアに、画像のBase64またはDataURLコードが表示されます。
4
コピーされたコードを生成する
生成されたコードをHTMLプロジェクトで使用するために、すばやくコピーするには、'コピー'ボタンをクリックしてください。
HTMLに画像を直接埋め込む
HTMLに画像を直接埋め込み、Base64またはDataURL文字列に変換することで、外部ファイルを使用せずに画像を表示できます。この方法では、画像をインラインで含めることができ、HTTPリクエストを減らし、ページ読み込み時間を改善する可能性があります。小さなアイコンやサムネイル、装飾的な要素など、ファイル依存性を最小限に抑える場合に便利です。
速やかに符号化された画像データをコピーする
このツールは、Base64またはDataURLでエンコードされた文字列を生成することで、画像をHTMLに直接埋め込むことができます。これにより、外部の画像ファイルの必要性が減り、ファイル管理を簡素化し、読み込み時間を改善できます。画像をアップロードし、エンコードされた文字列を生成して、ウェブページにシームレスに埋め込むコードをコピーしてください。この方法は、最小限のファイル管理や最適化されたリソース読み込みが必要なプロジェクトに役立ちます。
よくある質問
Base64データURLとは何ですか？また、それはなぜ必要になるのでしょうか？
Base64 DataURLを使用すると、画像をHTMLコード内に直接埋め込むことができ、別の画像ファイルを用意する必要がなくなります。これは、小さな画像の場合や、ユーザーがオフラインでも常に画像が利用可能であることを確認したい場合に便利です。
このツールを使ってBase64 DataURLを取得するにはどうすればよいですか？
画像ファイルをアップロードし、'Base64'または'DataURL'のタブを選択すると、ツールがエンコードされた文字列を生成します。生成されたコードを簡単にコピーするには、'コピー'ボタンをクリックしてください。
このツールで大きな画像も使えますか？
変換処理中は、大きな画像があるとコンピューターの速度が大幅に低下する可能性があります。小～中規模の画像に使用するのが最適です。
Base64とData URLの違いは何ですか？
両方とも、画像をHTMLに埋め込まれたテキスト文字列として表現します。DataURLにはMIMEタイプを示すプレフィックスが含まれるのに対し、Base64は単に画像データをエンコードするだけです。
生成されたBase64またはDataURLコードはどこで利用できますか？
HTMLの<img>タグのsrc属性内、またはbackground-imageのようなCSSプロパティ内に、コピーしたコードをそのまま使用できます。