Webアプリを開発していると、画像をそのままアップロードすると重くて扱いづらいという問題に必ず直面します。画像が重いと…
- ページ読み込みが遅くなる
- スマホで表示が固まる
- サーバーの容量や転送量が増える
- Firebase Storage の料金が膨らむ
こうした問題を解決するのが、画像圧縮（compression）・リサイズ（resize） です。
今回は、JavaScriptだけで簡単に実装できる「画像圧縮・リサイズ」の基本と実装例を、初心者向けに分かりやすく解説します。
Contents
1. 画像圧縮・リサイズとは？
■ 画像圧縮（compression）
画像の“データ量”を小さくすること。
JPEG や WebP に変換し、品質（quality）を調整して容量を減らします。
例：2MB → 200KB
■ 画像リサイズ（resize）
画像の“ピクセル数”を減らすこと。
例：4032px → 1200px
2. なぜ圧縮・リサイズが必要なのか？
✔ スマホで高速に読み込める
✔ Storage の容量節約（Firebaseユーザーにも重要）
✔ SEOにも有利（ページ速度が上がる）
✔ ユーザー体験が向上する
特に最近は 3000px〜4000px の巨大なスマホ写真が多いため、Webアプリでそのまま扱うのは非効率です。
3. JavaScriptだけで画像を圧縮できる仕組み
JavaScriptでは、以下の機能で加工できます。
- FileReader：画像ファイルを読み込む
- Imageオブジェクト：画像のサイズを取得
- Canvas で描画：小さく描いた画像を取得
- canvas.toDataURL()：圧縮済みデータを作る
外部ライブラリ不要です。
4. 【コピペOK】画像圧縮 & リサイズのサンプルコード
以下は、“選んだ画像を最大 1200px に縮小し、品質 0.8 の JPEG で出力する” 完全動作コードです。
▼ 完全HTML（このまま index.html にコピペしてください）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像圧縮・リサイズデモ</title>
<style>
body { font-family: sans-serif; padding: 20px; }
img { max-width: 100%; margin-top: 20px; }
</style>
</head>
<body>
<h2>画像を圧縮してリサイズするデモ</h2>
<input type="file" id="fileInput" accept="image/*">
<p>※ 選んだ画像は最大1200pxに縮小され、JPEG品質0.8で圧縮されます。</p>
<img id="output" />
<script>
document.getElementById("fileInput").addEventListener("change", function (e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
const img = new Image();
img.src = event.target.result;
img.onload = function () {
const MAX_SIZE = 1200;
const canvas = document.createElement("canvas");
let width = img.width;
let height = img.height;
// 最大サイズに合わせて縮小
if (width > height) {
if (width > MAX_SIZE) {
height *= MAX_SIZE / width;
width = MAX_SIZE;
}
} else {
if (height > MAX_SIZE) {
width *= MAX_SIZE / height;
height = MAX_SIZE;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
// 圧縮してデータURLを作成 (JPEG品質0.8)
const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.8);
// 表示
document.getElementById("output").src = compressedDataUrl;
console.log("圧縮後のデータURL:", compressedDataUrl);
};
};
});
</script>
</body>
</html>
5. コードのポイント解説（初心者向け）
◎ FileReader で画像を読み込む
reader.readAsDataURL(file);
画像を Base64形式 に変換して取得。
◎ Canvas に画像を書き込む
ctx.drawImage(img, 0, 0, width, height);
小さく描画することでリサイズできます。
◎ JPEG品質を設定して圧縮
canvas.toDataURL("image/jpeg", 0.8);
0.8→ 画質80%（見た目はほぼ綺麗）0.6→ かなり軽量1.0→ 最高品質（圧縮ほぼなし）
6. 実務で使える応用技術
■ ① WebP でさらに軽くする
canvas.toDataURL("image/webp", 0.8);
JPEGより容量が小さくなる場合が多いです。
■ ② Firebase Storage にアップロードする例
const res = await fetch(compressedDataUrl);
const blob = await res.blob();
// ここから通常の Firebase Storage アップロード
await uploadBytes(storageRef, blob);
※ Procom の画像保存にもそのまま応用できます。
■ ③ クロップ（切り取り）UIと合わせて使う
Reactなら react-easy-crop が定番です。
Procomの「切り取りUI」でも使用可能です。
7. よくある質問（初心者向け）
Q. 元のファイルより大きくなることはありますか？
はい、PNG → JPEG など形式によってはありえます。
その場合は：
- JPEG/WebP に変換する
- サイズをさらに小さくする
ことで改善できます。
Q. 画質を落とさずに軽くできますか？
完全には難しいですが、1200px以下 + JPEG 0.8 なら見た目はほぼ劣化しません。
Q. スマホ写真はどう扱えば良い？
iPhoneの写真は 4000px 前後と巨大なので、
まずリサイズ → その後圧縮 が必須です。
8. まとめ
- 画像圧縮・リサイズは Webアプリ必須の技術
- JavaScriptだけで簡単に実装可能
- Canvasを使えば PNG → JPEG 変換もできる
- Firebase Storageの節約にも効果的
- コピペで動くサンプルコード付き
