地方企業のサイトを軽く・速くする画像最適化の5工程｜みかもデジタルが7サイトで実装している実践ガイド
「ホームページが重い」「スマホで表示に時間がかかる」「お客様が離脱しているのでは」——地方企業のWebサイト相談で、もっとも頻繁にいただく訴えです。
原因の特定は意外と単純で、9割は画像です。テキストや動画ではなく、トップページや記事ページに貼られた写真・イラストが、最適化されないままアップロードされて、表示速度を引き下げています。
このコラムでは、みかもデジタルが社内グループ7サイトで毎日実装している画像最適化の5工程を、設計判断・実装手順・運用ツール・典型的な失敗例まで含めて公開します。WordPress・Next.js どちらの基盤でも応用できる内容です。
なぜ画像が「サイトを重くする最大の原因」なのか
地方企業のWebサイトでよく見かけるパターンを整理します。
- スマホで撮った写真を、3000×4000ピクセル・5MBのままアップロード
- 同じ画像を、表示サイズ違いで何度も読み込んでいる
- 古い JPEG / PNG で配信、WebP・AVIF を使っていない
- 遅延読み込み（Lazy Loading）が設定されていない
- alt属性が空のまま → 画像SEOで損
これらが積み上がると、1ページの転送量が10MBを超えることも珍しくありません。スマホの3G／4G回線では、表示完了まで5〜10秒かかります。多くのユーザーはこの間に離脱します。
みかもデジタルが社内サイト群を診断したとき、最初に手を入れたのが画像でした。以降の5工程は、その実装で得た知見を整理したものです。
工程1｜「アップロード前」のリサイズ
原則：表示サイズ × 2 までに抑える
サイト上に表示される画像が横600pxの記事サムネイルであれば、用意する画像は1200px幅で十分です。Retinaディスプレイ対応のため2倍までは確保し、それ以上は不要です。
| 用途 | 表示サイズ | 用意する画像幅 |
|---|---|---|
| 記事サムネイル | 横600px | 1200px |
| 記事本文の図版 | 横800px | 1600px |
| ヒーロー（横幅いっぱい） | 横1200px | 1920px〜2400px |
| アバター・ロゴ | 横40〜80px | 160px |
みかもグループのサイトでは、ヒーロー画像で1920×1080、サムネイルで1200×630（OGP兼用）を標準として運用しています。これを超える画像はアップロード時にリサイズします。
リサイズツール（無料・軽量）
- macOS：プレビュー → ツール → サイズを調整 → 1200px
- Windows：ペイント → サイズ変更
- iPhone：「画像 リサイズ」アプリ（無料多数）
- Web：Squoosh（squoosh.app）— Google製、ブラウザだけで完結
工程2｜WebP（または AVIF）への変換
WebP は JPEG より約30%軽い
同じ画質で、ファイルサイズがJPEG → WebP で約30%減になります。AVIFはさらに30%減ですが、対応ブラウザが限られるため、地方企業サイトではWebP標準がもっとも実装しやすい選択です。
WordPress 6.0以降は、WebPアップロードが標準対応しています。プラグインを入れずに WebP を使えるので、最初から WebP で書き出してアップロードする運用が良いです。
WebP変換ツール
- Squoosh（squoosh.app）：ブラウザだけで JPEG/PNG → WebP 変換、品質調整可能
- cwebp（コマンドライン）：大量変換に便利、Macなら brew install webp
- WordPressプラグイン：EWWW Image Optimizer、Imagify など。ただしプラグイン依存はおすすめしない
みかもデジタルでは、アップロード前に Squoosh で WebP 変換するワークフローを基本にしています。プラグインに依存せず、WordPress・Next.js どちらでも同じ画像を使い回せるためです。
工程3｜遅延読み込み（Lazy Loading）
HTML標準の loading="lazy" で十分
2020年以降、すべてのモダンブラウザが loading="lazy" 属性に対応しています。これを画像タグに付けるだけで、画面に映る直前まで読み込みを遅らせる挙動になります。
<img src="photo.webp" alt="..." loading="lazy" width="1200" height="675">WordPress 5.5以降は、記事本文の画像に自動で loading="lazy" を付与する仕様です。ヒーロー画像（最初に表示される画像）だけはloading="eager"を明示すると、初回表示が速くなります。
Next.js なら next/image
Next.jsでは、標準の next/image コンポーネントが、Lazy Loading・自動WebP変換・複数解像度配信をすべて自動で行います。コードは：
import Image from 'next/image';
<Image src="/photo.jpg" alt="..." width={1200} height={675} />これだけで、画像最適化の70%が完了します。みかもデジタルが運営する m-net.shop（Next.js 16）でも、すべての画像が next/image で配信されています。
工程4｜width / height 属性の明示
CLS（レイアウトシフト）対策
画像タグに width / height 属性を明示しておくと、画像が読み込まれる前にブラウザが領域を確保します。これにより、ページ表示中に文字や別要素が画像読込みでガタッと動くCLS（Cumulative Layout Shift）が起きません。
CLSはGoogleのCore Web Vitalsの3指標のひとつ。SEOにも直接影響するため、地方企業サイトでも必ず対応すべき項目です。
<img src="..." alt="..." width="1200" height="675" loading="lazy">古い記事の画像にwidth/heightが入っていない場合、まとめて修正することで一気にCLSスコアが改善します。みかもグループのサイト群では、古い記事を順次直して、主要ページのCLSをすべて0.1以下に抑えています。
工程5｜alt属性で画像SEOを取りに行く
alt属性は「視覚障害者対応」だけではない
alt属性は、本来は視覚障害者のスクリーンリーダーが読み上げる代替テキストです。アクセシビリティの観点で必須です。
同時に、Google画像検索の流入を取りに行く重要なSEO要素でもあります。alt属性に書かれたテキストは、Googleの画像インデックスに使われ、画像検索結果に出やすくなります。
alt属性の書き方（地方企業向け）
| 悪い例 | 良い例 |
|---|---|
| image1 | 徳島県東みよし町のドッグラン付きカフェ「みかも喫茶」のテラス席 |
| 店舗写真 | ENEOS三加茂SS（東みよし町加茂）の給油機・洗車機・整備工場の外観 |
| 料理 | みかも喫茶の「みかも雑穀カレー」と地元野菜サラダのランチ盛り合わせ |
| (空欄) | 具体的に、地域名・事業名・モノを記述 |
20〜80文字を目安に、画像の内容を具体的に書きます。地域名（徳島・東みよし町）・事業名（みかも喫茶・SOUP等）・対象（料理・店舗・人物）を入れることで、地域SEOが強化されます。
WordPress 7サイトでの実装ワークフロー
みかもデジタルでは、WordPress 6サイトで以下の運用を標準化しています。
- 撮影：iPhoneまたは一眼レフで撮影。元画像は別フォルダに保管
- 編集：明るさ・トリミングを調整（Lightroom Mobile・Snapseed等）
- リサイズ：用途に合わせて1200px〜1920pxの幅で書き出し
- WebP変換：Squoosh で JPEG → WebP（品質80%）
- WordPressアップロード：メディアライブラリへ。タイトル・alt属性を必ず記入
- 記事に挿入：WordPress標準のブロックエディタで挿入（自動で loading="lazy" が付く）
- 確認：PageSpeed Insights で表示速度をチェック（90点以上を目標）
慣れれば、1枚あたり3〜5分で完了する作業です。記事1本に画像5枚なら、編集と画像処理で15〜25分。これを毎日積み上げることで、サイト全体の表示速度がじわじわ改善していきます。
避けたい「画像最適化の落とし穴」
落とし穴1：画質を下げすぎる
「軽さ」を追求しすぎて、JPEG品質を50%以下に下げると、Retinaディスプレイで明らかにブロックノイズが見えます。商品写真・施工事例・料理など、品質が信頼に直結する画像では特に注意が必要です。WebP品質80%が目安です。
落とし穴2：プラグインで自動最適化に頼りきる
EWWW・Imagifyなどのプラグインは便利ですが、サーバ容量を消費する・サイト引越し時に画像が壊れる・プラグインの更新で挙動が変わるなどのリスクがあります。みかもデジタルでは、アップロード前に最適化を済ませる運用を基本にしています。
落とし穴3：CDNに頼って原本管理を雑にする
Cloudflareなどの CDN を入れれば自動で軽くなる、と考えるのは危険です。CDNは配信を速くするだけで、原本ファイルが重ければ重さは消えません。CDN導入前に、原本ファイル自体を最適化する工程を必ず通してください。
落とし穴4：alt属性を「キーワードの羅列」にする
SEO目的で 徳島 カフェ 美味しい 人気 ドッグラン ベビーカー... のようにキーワードを並べるのは、Googleからスパム判定されます。自然な日本語で、画像を見ていない人に説明するつもりで書いてください。
地方企業のサイトを「軽く保つ」ために
画像最適化は、1回頑張る大規模リニューアルではなく、毎日の積み上げで効きます。みかもグループの7サイトも、立ち上げ当初から完璧だったわけではなく、5年以上かけて少しずつ画像を入れ替え・最適化を進めてきました。
「うちのサイトの画像、最適化されているか分からない」というご相談には、みかもデジタルの無料サイト診断でPageSpeed Insightsの実測スコアと、改善ポイントをお渡しします。
画像最適化を含めたかんたん改善パックはサービスB（33,000円〜）でご相談いただけます。料金の考え方は「みかもデジタルのサービス料金の考え方」を参照してください。
よくあるご質問
Q. 既に投稿済みの100本の記事の画像、全部直すのは無理では？
A. 一気に直す必要はありません。アクセス数の多い上位10〜20本の記事画像を最適化するだけで、サイト全体の体感速度が大きく改善します。みかもデジタルの月次運用プランでは、毎月数本ずつ古い記事の画像を入れ替える運用も対応しています。
Q. WebP に変換すると、古いブラウザで見えなくなりませんか？
A. 2026年現在、IE11以外のすべての主要ブラウザがWebPに対応しています。地方企業のお客様の99%以上が WebP を見られる状態です。心配なら、HTML5 の <picture> タグでフォールバックを書く方法もありますが、運用が複雑になるためおすすめしません。
Q. AVIF はもう使うべき？
A. AVIFはWebPよりさらに30%軽くなる新フォーマットですが、Safari の対応が遅かったため、地方企業サイトではWebP標準＋様子見が現実的です。2027年以降に AVIF 標準化が進めば、運用に組み込む予定です。
Q. 動画もサイトに載せたいのですが、画像と同じ考え方？
A. 動画はファイルサイズが大きく、自社サーバ配信は基本的におすすめしません。YouTube埋め込みか、Vimeoなどの動画プラットフォーム経由で配信してください。みかもグループでも、SOUPの施工動画はYouTubeに1,000本以上アップロードして、サイトに埋め込む形にしています。
Q. 画像最適化だけ単発で依頼できますか？
A. はい、サービスB（かんたん改善パック）の中で対応します。サイトの画像数・現状の最適化レベルに応じて、お見積りします。詳細は30分無料相談からどうぞ。
まずは PageSpeed Insights で測定を
画像最適化に取り組む前に、まず現状を測定することをおすすめします。Googleが提供する PageSpeed Insights で御社のサイトURLを入力すれば、表示速度・改善提案が無料で見られます。
「90点以下」「画像のフォーマット」「画像の読み込みを遅延」といった指摘が出ていたら、このコラムの5工程で改善できる項目です。
みかもデジタルでは、PageSpeed Insightsの結果を踏まえた診断レポートも、無料サイト診断でお出しできます。お気軽にご相談ください。
——
みかもデジタル｜株式会社みかも DX部門｜徳島県三好郡東みよし町
https://mikamo-digital.jp/
