[提供終了]画像を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 がサポートしている 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 より高そうだ。

関連サイト

コメントを残す

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

最近の投稿

カテゴリー

アーカイブ