ブログ・ECの画像を軽くする実例:記事画像と商品写真をPhotrimで圧縮して容量と見た目を検証
著者: Photrim編集部 公開日: 更新日:
ブログ記事1本分(4枚)と商品ページ分(3枚)の画像をPhotrimで圧縮した実測結果。ページの画像合計が約8割減る一方、PNGの高圧縮や商品写真の文字まわりには注意点がありました。形式・品質の判断基準と手順を紹介します。
検証方法: ブログ記事1本分・商品ページ分を想定した7枚の画像を、App\Domain\ImageCompression\Service\CompressServiceへ実際に渡し、高画質・標準・高圧縮それぞれの出力ファイルサイズ・PSNR・透過の保持を計測した実測値です(backend/scripts/measure-case-study-images.php、詳細は本文「測定条件」参照)。
この記事で分かること
ブログを運営している方、ネットショップで商品画像を載せている方が、画像を軽くするとページに載せる画像の合計容量がどのくらい減るのか、そしてどの形式・どの圧縮品質を選べばよいのかを、Photrimで実際に圧縮した数値で確認します。
- ブログ記事1本分(アイキャッチ・本文の写真・スクリーンショットの4枚)で、画像の合計容量がどう変わるか
- 商品ページ分(商品写真2枚・背景透過の切り抜き1枚)で、見た目の差がどこに出るか
- ブログとECそれぞれの、形式と圧縮品質の判断基準
- Photrimでの操作手順と、圧縮後に確認すること
検証に使った画像
実在の写真や商品画像は権利関係の確認が難しいため、このプロジェクトで生成した画像を使いました(第三者の権利を含みません)。商品写真は、実際のカメラが出力する画像に近づけるため、全面にごく弱いノイズを加えています。乱数シードを固定しているので、誰でも同じ画像を再生成できます。
| 想定する用途 | ファイル | 形式 | 大きさ |
|---|---|---|---|
| ブログのアイキャッチ | blog-hero.jpg | JPEG | 1600×900px |
| ブログ本文の写真 | blog-inline.jpg | JPEG | 1200×800px |
| ブログ本文の写真(WebP素材) | blog-inline.webp | WebP | 1200×800px |
| ブログのスクリーンショット | blog-screenshot.png | PNG | 1200×800px |
| 商品写真(ボトル) | ec-product-bottle.jpg | JPEG | 1200×1200px |
| 商品写真(化粧箱) | ec-product-box.jpg | JPEG | 1200×1200px |
| 背景透過の切り抜き(影つき) | ec-product-cutout.png | PNG | 800×800px |
注意: これらは実写真ではなく、図形で描いた画像です。実際の写真は色の変化がもっと複雑なため、削減率や画質は変わります。この記事の数値は、あくまで同じ条件で形式・品質を比べるための目安です。
各画像をPhotrimの圧縮処理(App\Domain\ImageCompression\Service\CompressService)へ、高画質・標準・高圧縮のそれぞれで直接渡して計測しました。画質は、アップロード元と比べたPSNR(ピーク信号対雑音比、数値が大きいほど元に近い)で表します。PNGは可逆圧縮のため、画素(透過のアルファ値を含む)がアップロード元と一致するかを確認しました。
結果1:画像ごとの圧縮結果
| 画像 | 圧縮前 | 高画質 | 標準 | 高圧縮 |
|---|---|---|---|---|
| ブログのアイキャッチ(JPEG) | 434.0KB | 159.1KB(63.3%削減、48.56dB) | 93.7KB(78.4%削減、44.07dB) | 66.9KB(84.6%削減、38.53dB) |
| ブログ本文の写真(JPEG) | 218.0KB | 80.8KB(62.9%削減、38.04dB) | 44.4KB(79.6%削減、37.35dB) | 29.9KB(86.3%削減、35.46dB) |
| ブログ本文の写真(WebP) | 113.6KB | 47.0KB(58.6%削減、46.51dB) | 17.3KB(84.7%削減、43.72dB) | 6.5KB(94.3%削減、40.73dB) |
| ブログのスクリーンショット(PNG) | 6.2KB | 6.1KB(1.3%削減) | 6.2KB(0.3%削減) | 20.1KB(約3.2倍に増加) |
| 商品写真・ボトル(JPEG) | 202.1KB | 76.0KB(62.4%削減、49.49dB) | 33.2KB(83.6%削減、44.41dB) | 27.8KB(86.2%削減、41.02dB) |
| 商品写真・化粧箱(JPEG) | 214.9KB | 82.2KB(61.8%削減、47.16dB) | 37.1KB(82.7%削減、42.69dB) | 29.9KB(86.1%削減、38.81dB) |
| 切り抜き(PNG、影つき透過) | 7.3KB | 6.6KB(10.1%削減) | 7.0KB(4.4%削減) | 17.4KB(約2.4倍に増加) |
JPEGとWebPの写真は、高画質でも約6割、標準で約8割、高圧縮で約9割近く小さくなりました。一方、PNG(スクリーンショットと切り抜き)は元のファイルがもともと小さく、高圧縮を選ぶと逆に2〜3倍に増えました。PNGは可逆圧縮のため圧縮の「かけ方」が品質ではなく強さに対応しており、高画質(圧縮レベル8)が最も強く、高圧縮(レベル2)が最も弱くかかる仕組みのためです。詳しくは画像圧縮の仕組みをご覧ください。
PNGの2枚は、3つの設定すべてでアップロード元と画素が一致しました(切り抜きの半透明の影を含め、アルファ値と色の不一致は0画素)。圧縮しても、透過の境界や影の薄さは変わりません。
結果2:ページに載せる画像の合計はこれだけ変わる
画像ごとの結果を、ページ単位で合計しました。これは、ページに載せる画像の合計ファイルサイズの算出です(HTMLやスクリプトなど、画像以外のデータは含みません。表示速度そのものを測ったものでもありません)。
| ページの想定 | 圧縮前 | 高画質 | 標準 | 高圧縮 |
|---|---|---|---|---|
| ブログ記事1本分(4枚) | 771.8KB | 293.1KB(62.0%削減) | 161.6KB(79.1%削減) | 123.4KB(84.0%削減) |
| 商品ページ1点分(3枚) | 424.4KB | 164.8KB(61.2%削減) | 77.3KB(81.8%削減) | 75.1KB(82.3%削減) |
| 商品写真12点の一覧ページ(算出) | 2,502.2KB | 949.4KB(62.1%削減) | 421.9KB(83.1%削減) | 346.2KB(86.2%削減) |
商品写真12点の一覧ページは、実測した商品写真2枚の平均サイズを12倍した算出値です(実際に12枚を計測したものではありません)。
読み取れるポイントは次のとおりです。
- ブログ記事1本分の画像は、標準で**771.8KBから161.6KB(約8割減)**になりました。
- 商品ページ1点分では、標準(77.3KB)と高圧縮(75.1KB)の差がわずか2.2KBです。切り抜きPNGが高圧縮で17.4KBに増えるため、写真の削減分が打ち消されています。PNGを含むページで「全部高圧縮」にしても、思ったほど小さくなりません。
- 商品写真を並べる一覧ページでは、標準にするだけで合計が約2.4MBから約0.4MBになりました。枚数が多いページほど効果が大きくなります。
結果3:見た目の差は「文字のまわり」に出る
数値だけでは見た目の差が分かりにくいため、商品写真(ボトル)のラベル文字「PHOTRIM」付近を4倍に拡大して比べました。拡大には最近傍法(画素をそのまま大きくする方法)を使い、表示用の画像自体は可逆のPNGで保存しているので、ここに映る差はすべて圧縮によるものです。
アップロード元(圧縮前)
高画質で圧縮
標準で圧縮
高圧縮で圧縮
拡大して見ると、高画質と標準は文字の輪郭がきれいに保たれていました。一方、高圧縮では文字のまわりに、本来なかったピンクや水色の色のにじみが出ました。通常の大きさで見る分には気づきにくい程度ですが、商品のロゴや成分表示など、文字を読ませたい画像で拡大表示を想定する場合は、高圧縮は避けるのが無難です。
ブログとECの判断基準
以上の実測にもとづく、形式と圧縮品質の判断基準です。
| 場面 | 形式 | おすすめの品質 | 根拠(この記事の実測) |
|---|---|---|---|
| ブログのアイキャッチ・本文の写真 | JPEG・WebP | 標準 | 約8割減(アイキャッチ434.0KB→93.7KB)で、PSNRは44.07dB。高圧縮は38.53dBまで下がる |
| ブログのスクリーンショット(文字入り) | PNGのまま | 高画質 | 高画質6.1KBに対し、高圧縮は20.1KB(約3.2倍) |
| 商品のメイン写真(拡大表示あり) | JPEG | 高画質 | 質感や文字を拡大して見せる用途。約6割減でPSNR 47〜49dB |
| 商品の一覧用の写真・サブ写真 | JPEG | 標準 | 約8割減。ラベル文字の輪郭も保たれた |
| 背景透過の切り抜き | PNGのまま | 高画質 | 高画質6.6KBに対し、高圧縮は17.4KB(約2.4倍)。透過・半透明の影は変化なし |
| 文字や細い線を含む画像 | — | 高圧縮は避ける | 高圧縮で文字のまわりに色のにじみが出た |
形式の使い分けは、JPEGとは・PNGとは・WebPとは、用途別の考え方は利用シーン別 画像圧縮実践ガイドもあわせてご覧ください。
Photrimでの操作手順と確認ポイント
- 圧縮前に、表示するサイズを決めておきます。Photrimは圧縮だけを行い、画像の幅・高さを変える機能はありません。実際の表示サイズより大幅に大きい画像は、ほかのツールで先にリサイズしてください(この記事の数値はリサイズを含みません)。
- Photrimのトップページで、画像をドラッグ&ドロップするか、「ファイルを選択」から画像を選びます。1回に最大20枚まで選べます。
- 「圧縮品質」で、高画質・標準・高圧縮のいずれかを選びます。複数枚を選んだ場合、品質は全ファイル共通です。写真(JPEG・WebP)とPNGでおすすめの品質が異なるため、PNGは別にまとめて圧縮するのがおすすめです。
- 「圧縮開始」を押します。
- 圧縮が終わったら、削減率とプレビューを確認し、「圧縮した画像をダウンロード」(複数枚のときは「ZIPでまとめてダウンロード」)で保存します。
- 保存した画像を拡大して確認します。特に、文字やロゴのまわりに色のにじみがないか、透過画像の縁や影が不自然でないかを見てください。問題があれば、一段階品質を上げてやり直します。
- サイトへアップロードしたら、実際のページでも見た目を確認します。
この結果からわかること
- ブログ・ECのどちらでも、写真は標準で約8割小さくなりました。ページに載せる画像の合計は、枚数が多いほど大きく減ります。
- PNGは高画質を選ぶのが基本です。高圧縮を選ぶと、かえって2〜3倍に増えることがあります。
- 見た目の差は、文字や輪郭のまわりに出ます。文字を含む商品画像は、高圧縮を避けて確認しましょう。
- 数値はこの記事で生成した画像の結果です。実際の写真では結果が変わるため、ご自身の画像で確認してください。
専門用語の補足
- PSNR(ピーク信号対雑音比): 圧縮後の画像が元の画像にどれだけ近いかを表す客観的な画質指標。単位はdB(デシベル)で、数値が大きいほど劣化が小さいことを表します。ここでは、アップロード元と圧縮後の画像を同じ大きさ(幅400px)に縮小してから、画素ごとの色の差を比べて算出しました。
- アルファ値: 画像の各画素の透明度を表す値。完全な透明の部分や、影のような半透明の部分を表現するために使われます。
測定条件
- 実行日: 2026年10月2日
- 対象コミット:
fffc028(この記事の追加作業の直前時点) - 実行環境: PHP 8.3.35、Laravel 10.50.2、GD 2.3.3
- 検証画像の生成スクリプト:
backend/scripts/generate-case-study-images.php(リポジトリに同梱、固定された乱数シードから同じ画像を再生成できます) - 計測スクリプト:
backend/scripts/measure-case-study-images.php(ファイルサイズ・PSNR・透過の一致・ページ単位の合計をすべてこのスクリプトで算出しており、本文中の数値を手作業で創作していません)
実際に圧縮してみる
ご自身のブログ記事の画像や商品写真で、どのくらい軽くなるかは、画像を今すぐ圧縮するから実際に試してみるのが一番確実です。標準と高画質を切り替えて、見た目と容量の変化を比べてみてください。