中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

画像をBase64に変換するツール (data URI scheme)

Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。

data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。

ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。

data URI scheme 変換ツール

Support gif, jpeg, png. Limit file size 1MB.

Output Format







別ウインドウで開く

data URI scheme がサポートしている HTML タグは

  • object (images only)
  • img
  • input type=image
  • link

CSSでは

  • background-image
  • background
  • list-style-type
  • list-style

とURLが設定できるところ。

<data> はサイズに制限があって基本 1,024 bytes まで。実装するブラウザでまちまち。

対応ブラウザは

  • Firefox 2+ (100KB)
  • Opera 7.2+ (4,100 characters)
  • Chrome
  • Safari
  • IE 8+ (32 KB)

一枚の画像にアイコンやボタンを配置してCSSのポジション指定で表示させる CSS Sprite がありますが、画像の HTTP リクエストを減らすもう一つの選択肢として使える。メンテナンス性も CSS Sprite より高そうだ。

関連サイト

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

購読