タイトル

画像ファイルの読込み方法

  1. 画像ファイルをドロップ
  2. 画像を貼り付ける
  3. 画像URLから読込む

または

貼り付けエリア、クリップボードの画像を貼り付けられます。WEB上の画像コピーでも可能。

Base64変換

ここに画像が表示されます

縦

×

横

画像Base64変換ツールの使い方

ツールについて

このツールは、画像ファイルをBase64にエンコードします。A–Z,a–z, 0–9までの英数字と、記号(+, /)に変換されます。

Googleが画像検索で大量の画像を表示している手法と同じで、画像のＵＲＬと同じように使用出来ます、html,css,jsで利用できます。

ツールの使い方

  • 画像読込み方法
  • HTML/CSSでの使用例

画像読込み方法

3種類の読込み方法を用意しています。

  1. 画像ファイルのドロップは破線の内側にドロップします。
  2. クリップボードの画像をストライプ線の上で貼り付け可能。
  3. 外部サイトの画像ＵＲＬを読み込みます。（JPG,PNG,GIF)

HTML/CSSでの使用例

▼HTMLで使用する例

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPUjogZv.....">

▼cssで使用する例

sample { background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPUjogZv....."); }

メリットは、画像ファイルにアクセスする必要がないので表示が高速です。デメリットは、文字列が長くなる、画像ファイルと比べてデータ量が1.3倍になります。

デメリットを考慮すると、画像容量が小さい時に使用すると容量が抑えられ画像アクセスを減らせて事が出来ます。数kbのアイコンなどには積極的に活用していきたい所です。

画像をbase64に変換するツール

base64に変換するツールは、色々あります。結構需要があり画像の表示速度を軽く出来るようなので、上記の様なサイトに刺激を受けて自分でも作ってみました。

似ているツールを作る時は、デザインや機能面でより使いやすくなるように心がけています。今回は、ファイルの読込み方法を増やしました。

Base64とは

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。

参考文献：wikipedia