Q: 画像Base64変換はいつ使うべき？メリット・デメリットは？

使うべきケース: 1. HTMLメール内の画像（外部URL参照が制限される）。2. CSS Sprite代わりの小さいアイコン（HTTPリクエスト削減）。3. オフライン対応PWAでキャッシュに含める画像。4. Canvas APIで画像データを保存・共有する場合。避けるべきケース: 大きな画像（Base64はファイルサイズ約33%増＋ブラウザのデコード負荷）。代替: ` `や画像CDN（Cloudflare Images等）でパフォーマンス最適化。

Question 1

画像をBase64に変換してHTMLに埋め込む方法は？

Accepted Answer

Data URI形式: `data:[MIME type];base64,[Base64文字列]`。HTMLの使用例: `

`。CSS: `background-image: url("data:image/png;base64,...")`。JavaScriptでの変換: `const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = e => console.log(e.target.result);`。注意: ファイルサイズが約33%増加。小さいアイコン（<10KB）やメール添付では有用。大きな画像は外部URL参照のほうがパフォーマンス良い。

Question 2

画像Base64変換はいつ使うべき？メリット・デメリットは？

Accepted Answer

使うべきケース: 1. HTMLメール内の画像（外部URL参照が制限される）。2. CSS Sprite代わりの小さいアイコン（HTTPリクエスト削減）。3. オフライン対応PWAでキャッシュに含める画像。4. Canvas APIで画像データを保存・共有する場合。避けるべきケース: 大きな画像（Base64はファイルサイズ約33%増＋ブラウザのデコード負荷）。代替: `<link rel="preload">`や画像CDN（Cloudflare Images等）でパフォーマンス最適化。

Question 3

Node.jsで画像をBase64に変換する方法は？

Accepted Answer

`const fs = require("fs"); const base64 = fs.readFileSync("image.png").toString("base64"); const dataUri = `data:image/png;base64,${base64}`;`。ESM/TypeScript: `import { readFileSync } from "fs"; const buf = readFileSync("image.png"); const b64 = buf.toString("base64");`。逆変換（Base64→ファイル）: `const buf = Buffer.from(base64Str, "base64"); fs.writeFileSync("output.png", buf);`。MIMEタイプの自動判定: `file-type`パッケージを使用（`const {fileTypeFromBuffer} = require("file-type")`）。

画像Base64変換

このツールをもっと活用する

チートシート・テンプレート集

技術記事・実装ガイド

もっと学びたい方へ

BOOTH Store

Gumroad Store

TechBoost

フィードバック

EZARK Blog