ブラウザ内で完結するプライベートな画像ワークスペース
画像をData URIに変換
JPG、PNG、WebPなどブラウザで読み込める画像を、HTML、CSS、ウェブ開発用のData URIに変換します。
画像をData URIに変換
ブラウザ内でのローカル処理
実際の作業で役立つ場面
- • 小さなアイコンや画像をHTMLやCSSに直接埋め込む。
- • 開発やテスト用に自己完結したテストデータを作る。
- • 元画像をアップロードせずに、ブラウザで生成したData URIをコピーする。
ダウンロード前に確認すること
- • Base64/Data URIエンコードでは、前後の記述を除いてもデータ量がおよそ三分の一増えます。
- • 大きな画像は通常のファイルのままにして、個別にキャッシュできるようにしましょう。
「画像をData URIに変換」の使い方
- 1. 元画像を選ぶ： 手元にあるいちばん鮮明な元画像から始めましょう。
- 2. 用途を決める： 実際に求められるピクセル、形式、レイアウト、ファイルサイズに関係する設定だけを使いましょう。
- 3. 処理して確認する： ローカルで新しいコピーを作成し、見た目の結果と表示される情報を確認します。
- 4. ダウンロードして確認する： 完成したコピーを保存し、提出先のフォーム、ウェブサイト、ワークフローの要件と照らし合わせましょう。
制限事項
- • Data URIは圧縮形式ではありません。
- • 非常に長い埋め込み文字列は、HTMLやCSSの保守を難しくすることがあります。
ブラウザ内でのプライベート処理
処理はブラウザ内で実行されます。元のファイルは保管し、ダウンロードしたコピーが提出先の最新要件を満たしているか確認してください。
よくあるご質問
Data URIにすると画像は小さくなりますか？
いいえ。Base64エンコードは通常テキスト量を増やします。小さな素材を手軽に扱うためのもので、圧縮には使えません。
画像はアップロードされますか？
いいえ。ブラウザが選択したファイルを読み込み、ローカルでData URIを作成します。