Macで画像をBase64に変換
画像をBase64データURIに変換します。HTML、CSS、JSONにそのまま貼り付けられます。
Macで画像をBase64に
サンプルファイルを使ったアプリのスクリーンショット。
画像をBase64にの使い方
- 1
画像をドロップ
SVGを含む画像を1つ以上追加します。
- 2
コピーする内容を選択
データURI、CSSのbackgroundルール、HTMLの<img>タグ、またはプレーンなBase64。
- 3
「エンコード」をクリック
各画像はそのまま、1バイトも変えずにエンコードされます。
- 4
貼り付ける
「クリップボードにコピー」をオンにすると、結果をすぐにペーストできます。各画像のテキストも、名前に「base64」が付いたファイルとして「ダウンロード › OneMacTools」内の日付入りフォルダに保存されます。
画像をBase64にでできること
各画像のデータURI、CSSのbackgroundルール、HTMLの<img>タグ、またはプレーンなBase64を取得し、クリップボードにコピーしてテキストとして保存します。バイトはそのままエンコードされるので、品質は一切落ちません。データURIは小さな画像向けのため、画像が大きいときは警告が表示されます。
こんなときに
- CSSに小さなアイコンを埋め込む
- HTMLメールに画像を埋め込む
- 画像をJSONや設定ファイルに入れる
オプションの説明
- コピー形式
- データURI、CSS背景、HTML <img>、プレーンBase64。データURIは汎用的な形式です。CSS背景はそれをbackground-imageルールで包み、HTML <img>はファイル名を代替テキストにした画像タグで包みます。プレーンBase64はエンコードされたデータそのものです。
- クリップボードにコピー
- デフォルトはオン。結果をコピーするので、すぐに貼り付けられます。複数の画像の場合は、空行で区切ってまとめてコピーされます。
おすすめの使い方
- データURIは小さな画像だけに使いましょう。目安は約10 KB未満です。大きいとHTMLやCSSが肥大化し、個別にキャッシュもできません。
- まず画像を小さくしましょう。エンコードする前に、SVGは「SVG最適化」、PNGは「PNGを圧縮」で最適化します。
- SVGは小さく、どのサイズでもくっきりしているため、CSSのアイコン用データURIに適しています。
- HTML <img>の出力では、ファイル名のままにせず、画像を説明する代替テキストに編集しましょう。
- PNG、JPEG、WebP、SVGなど、ブラウザが対応している形式を使ってください。HEICのデータURIはほとんどのブラウザで表示されません。
対応形式
- 入力
- PNG、JPEG、GIF、WebP、SVGなどの画像ファイル。
- 出力
- 画像ごとにエンコード結果を記載したテキストファイル。オプションをオンにしている場合はクリップボードにもコピーされます。
- 画像は再圧縮されないため、画質の劣化はありません。
- Base64は元のファイルより約3分の1大きくなります。結果が大きい場合はアプリが警告します。
- 非常に長い結果はアプリには表示されませんが、保存されたファイルとクリップボードには完全な内容が入っています。
画像をBase64にについての質問
Macで画像をBase64に変換するには？
画像を「画像をBase64に」にドロップし、「データURI」を選んで「エンコード」をクリックします。結果はクリップボードにコピーされ、テキストファイルとしても保存されます。
CSSでBase64画像を使うには？
「CSS背景」を選びます。データURIを含む完全なbackground-imageルールが作成され、そのままスタイルシートにペーストできます。
別ファイルを使わずにHTMLに画像を埋め込むには？
「HTML <img>」を選びます。src内に画像を含むimageタグが作成され、HTMLが使える場所ならどこでも使えます。
Base64のテキストが画像より大きいのはなぜですか？
Base64は3バイトごとに4文字のテキストに変換するので、約3分の1大きくなります。小さな画像に向いているのはそのためです。
Base64に変換すると品質は下がりますか？
いいえ。ファイルのバイトがそのままエンコードされるので、デコードすれば元とまったく同じ画像に戻ります。
SVGをデータURIに変換できますか？
はい。SVGファイルにも対応しており、image/svg+xmlタイプでエンコードされるので、CSSやHTMLにそのまま使えます。
画像をBase64にはファイルをアップロードしますか？
いいえ。画像をBase64にはすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
画像をBase64には元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
画像をBase64にに必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
Figma、Illustrator、InkscapeのSVGから編集ソフトの残骸を取り除き、座標を丸めます。見た目はそのままでファイルが小さくなります。
PNGを圧縮色数を減らしてPNGを60〜80%軽量化。透明部分はそのままなので、スクリーンショット、ロゴ、アイコンに最適です。
プレースホルダ画像作成画像の遅延読み込み中に表示するBlurHash文字列、小さなぼかしサムネール、平均色を作成します。
