画像をBase64・データURIに
Image to Base64 / Data URI
画像をBase64文字列や、CSS・HTML・JSONにそのまま貼れるデータURIに符号化します。
画像をデータURIとして埋め込むと、リクエストが1つ減り、容量が3分の1増えます。しかも、ページを見るたび永久にです。データURIは、それを載せている文書と別にキャッシュできないからです。このツールはファイルを符号化し、貼り付ける前にその取引の両側を目の前に置きます。
画像を置いてください
このタブ内でエンコードします。Base64 は圧縮ではなく、ファイルを 3 分の 1 ほど大きくします。
使い方
画像を置きます
種類は拡張子ではなくバイト列で判断します。中身がJPEGの.pngはよくありますし、種類が間違っているインライン画像は表示されません。
判定を読みます
およそ4KBまでなら埋め込みは無料です。100KBを超えたあたりからは、並行して取得されキャッシュもされたはずの資源のせいで、最初の描画を遅らせていることになります。
包み方を選びます
CSSならurl()の形、HTMLならimgタグ、JSONなら引用符付きの文字列を、組み立てずにそのまま貼れる形で渡します。
よくある質問
Base64は画像を圧縮しますか
逆です。3バイトを4文字に符号化するので、転送時の圧縮を別にすれば、テキストはファイルよりちょうど33⅓%長くなります。圧縮ではなく符号化です。
SVGもこの方法で埋め込むべきですか
いいえ。SVGはすでにテキストなので、URLエンコードなら33%ではなく10%ほどで済み、読めて差分も取れる形のまま残ります。SVGにBase64を掛けるのはよくある間違いで、このページはそれを見つけると指摘します。
8MBを超えるファイルを、なぜ断るのですか
データURIが1行10MB超のテキストになるからです。多くのエディタと、いくつかのブラウザの開発者ツールは、その大きさで使い物にならなくなります。そもそも8MBのインライン画像が正解だったことはありません。
ここから渡せます
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
ダミー画像生成
Placeholder Image
好きなサイズの単色またはグラデーションのダミー画像を、寸法を焼き込んで作ります。
Base64から画像に復元
Base64 to Image
Base64文字列やデータURIを、表示もダウンロードもできる画像に戻します。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
次の一手
このツールが出したものをそのまま受け取れる道具です。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
Base64から画像に復元
Base64 to Image
Base64文字列やデータURIを、表示もダウンロードもできる画像に戻します。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
SVGをCSSデータURIに
SVG to CSS Data URI
SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。