ご相談・お問い合わせはこちらから

画像を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 より高そうだ。

関連サイト

コメント(0)

名前 必須
メールアドレス
URL
コメント

新しいサービスのアイデアに役立つデベロッパーブログです。IT/Web技術メモや問題解決策、開発に役立つTips、作ったソフトウェアやツールの紹介。

プロフィール

Thingsym (シングスワイエムと発音します)

個人事業・小規模・中小企業のマーケティングやITネット活用、ウェブサイト改善をしています。個別プログラムで経営者の経営課題を戦略・施策実務・技術の面で解決に導くのが主な仕事。ウェブサービスをつくってアイデアをカタチにしているウェブエンジニア・デベロッパーの面も。プログラムを書いたり、設計をしたり、メディアを作ったり。

最近のテーマは、創造性 (creativity)、マーケティング (marketing)、マネジメント (management)

グローバルブログ (英語)

Twitter, GitHub, WordPress

最近のコメント

  • キャッシュ系のプラグインをWordPre (thingsym)
  • いつもお世話になっています。 初めて質問 (岡田)
  • ご報告ありがとうございます。 そうですね (thingsym)
  • こんにちは。Custom Post Ty (Kei)
  • ご報告ありがとうございます。 エラーは (thingsym)
  • こんにちは最近 vagrant を使い始 (enomoto)
  • 切り替えにスマホ用のテーマはインストール (thingsym)
  • はじめまして。WP初心者になります。スマ (野澤)
  • 先ほどupdateして、問題なく動作する (kome)
  • ご報告ありがとうございます。 本日バグ修 (thingsym)
ページの先頭へ