Blog
漫画でわかる画像サイズと圧縮の基本
Acqua Academy × SEO Manga
この漫画は、ホームページ育成アカデミーの実践編です。
漫画で要点をつかんだあと、アカデミーの通常講座でチェックリストや実務手順まで確認できます。前後の記事を読む場合はSEO漫画一覧へ進んでください。
漫画でわかる画像サイズと圧縮の基本
漫画で見るポイント
冒頭の結論
画像サイズと圧縮は、ただ画像を小さくする作業ではありません。
読者が待たずに読めること、漫画や図解の文字がつぶれないこと、検索エンジンやAIが画像の意味を理解しやすいこと。この3つのバランスを取る作業です。
SEO漫画のように画像が主役の記事では、画像が重すぎると表示が遅くなり、軽くしすぎると文字が読みにくくなります。どちらも読者体験を損ないます。だから、画像の役割ごとに「必要な大きさ」「許容できる容量」「残すべき画質」を決めて運用することが大切です。
Googleは画像SEOのベストプラクティスで、関連するテキスト、ファイル名、ALT、画像の文脈を整えることを案内しています。web.devでも画像最適化はパフォーマンス改善の重要なテーマとして扱われています。つまり、画像圧縮は装飾の後始末ではなく、専門ブログを読みやすく育てるための基本作業です。
対応する通常講座は /academy/llmo-article-template/、章別漫画は /academy/manga/chapter-08/ です。画像の意味づけは /manga/alt-text-writing-manga/、OGP確認は /manga/image-sns-share-ogp-manga/ も合わせて確認してください。
漫画でわかる要点
- 画像サイズは、表示領域に対して大きすぎないようにする
- 圧縮は、画質を壊す作業ではなく、読者体験を守る作業
- 漫画画像は文字の読みやすさを最優先にする
- アイキャッチ、本文画像、OGP画像では必要な比率とサイズが違う
- 画像を軽くしてもALT、キャプション、本文の説明は削らない
- 表示速度は検索だけでなく、読者の離脱にも関わる
- 公開後は実際の表示、画像URL、OGP、スマホ表示を確認する
画像サイズとは何か
画像サイズには、主に2つの意味があります。
1つ目は、画像の縦横のピクセル数です。たとえば、1200px × 800px、1122px × 1402px のように表されます。これは画像がどれだけ細かく描かれているかを示します。
2つ目は、ファイル容量です。たとえば、300KB、1.5MB、5MB のように表されます。これはブラウザがその画像を読み込むときの重さに関わります。
| 種類 | 見る数字 | 影響すること |
|---|---|---|
| ピクセル数 | 幅と高さ | 画質、トリミング、表示領域への収まり |
| ファイル容量 | KB、MB | 読み込み速度、通信量、体感の待ち時間 |
| 表示サイズ | CSSやテーマの表示幅 | 実際に読者が見る大きさ |
| 画像形式 | PNG、JPEG、WebPなど | 圧縮効率、透過、文字の見え方 |
よくある失敗は、「ピクセル数が大きいから高品質」と考えて、そのまま記事に入れてしまうことです。記事本文では800px幅でしか表示されないのに、4000px幅の画像を読み込ませると、見た目は変わらないのに読み込みだけ重くなります。
圧縮とは何か
圧縮とは、見た目の品質をなるべく保ちながら、画像ファイルの容量を小さくすることです。
圧縮には大きく分けて、可逆圧縮と非可逆圧縮があります。
| 圧縮の種類 | 特徴 | 向いている画像 |
|---|---|---|
| 可逆圧縮 | 画質を保ちやすい | ロゴ、図解、文字が多い画像 |
| 非可逆圧縮 | 容量を小さくしやすい | 写真、背景画像、細かい劣化が目立ちにくい画像 |
| リサイズ | ピクセル数を減らす | 表示サイズより大きすぎる画像 |
| 形式変更 | WebPなどに変換する | 表示速度を優先したい画像 |
SEO漫画で重要なのは、漫画内の文字です。人物や背景が少し荒くなるより、吹き出しや表の文字が読めなくなる方が問題です。圧縮後は、必ずスマホで文字が読めるかを見ます。
なぜSEO漫画で画像の重さが問題になるのか
SEO漫画記事は、一般的なテキスト記事より画像の比重が大きいです。
本文内に4枚の縦長漫画が入り、さらにアイキャッチ画像、OGP画像、関連記事カード、カテゴリ一覧のサムネイルが関わります。1枚ずつは許容範囲でも、複数枚が積み重なるとページ全体が重くなります。
| 場面 | 画像の役割 | 重すぎると起きること |
|---|---|---|
| 一覧カード | 記事を選ばせる | 一覧表示が遅くなり、見られる前に離脱される |
| 本文冒頭 | 記事の全体像を伝える | ファーストビューが遅くなる |
| 本文内漫画 | 理解を助ける | スクロール中に読み込み待ちが発生する |
| OGP画像 | 共有時の入口 | 共有カードで画像が出にくくなることがある |
| 関連記事カード | 回遊を促す | ページ下部の表示がもたつく |
GoogleのCore Web Vitalsでは、LCPという指標で主要コンテンツの表示速度が見られます。ページの上部に大きな画像がある場合、その画像の読み込みが遅いと、読者が「表示が遅い」と感じやすくなります。
画像を軽くする前に決めること
圧縮前に大切なのは、画像の役割を決めることです。
同じ画像でも、本文内で読ませる画像なのか、一覧カードで見せる画像なのか、SNS共有用なのかで、必要な条件が変わります。
| 用途 | 優先すること | サイズの考え方 |
|---|---|---|
| 本文内漫画 | 文字の読みやすさ | 縦長でもよいが、スマホで文字が読める幅を保つ |
| アイキャッチ | 一覧での見つけやすさ | テーマのカード比率に合わせる |
| OGP画像 | 共有カードでの見え方 | 横長比率を検討する |
| 図解画像 | 情報の正確さ | 文字と線がつぶれないようにする |
| 装飾画像 | 雰囲気づくり | できるだけ軽くする |
全部の画像を同じ基準で圧縮すると失敗します。漫画、図解、写真、背景、ロゴでは、残すべき情報が違うからです。
漫画画像で守るべき画質
SEO漫画では、漫画画像の画質を落としすぎないことが重要です。
特に、次の部分は確認してください。
| 確認箇所 | 見ること | 悪い状態 |
|---|---|---|
| 吹き出しの文字 | スマホでも読めるか | 文字がにじむ、欠ける |
| 表やチェックリスト | 数字や項目が判別できるか | 細線が消える |
| 顔の表情 | 感情が伝わるか | ぼやけて表情が弱くなる |
| 見出し帯 | 章番号やページ番号が読めるか | 重要文字がつぶれる |
| 余白 | トリミングされていないか | 上下左右が切れる |
SEO漫画の価値は、専門テーマを「読める形」にすることです。容量を小さくするために読みにくくなったら、本末転倒です。
ファイル形式の考え方
画像形式は、画質と容量のバランスに関わります。
| 形式 | 特徴 | SEO漫画での使い方 |
|---|---|---|
| PNG | 文字や線がきれいに出やすい | 漫画、図解、表に向くが重くなりやすい |
| JPEG | 写真に向く | 写真や背景に向くが文字画像は劣化が目立つことがある |
| WebP | 軽量化しやすい | 対応環境を確認しながら使う |
| SVG | ベクター画像 | ロゴやアイコン向き。漫画本体には通常使わない |
SEO漫画の本文画像は、文字と線の読みやすさが大切です。PNGを基本にしつつ、容量が大きい場合はWebP変換や適切な圧縮を検討します。
ただし、形式変更だけで解決しようとしないでください。表示幅に対してピクセル数が大きすぎる場合は、まずリサイズを考えます。
リサイズと圧縮の順番
画像を軽くするときは、順番が大切です。
| 順番 | 作業 | 理由 |
|---|---|---|
| 1 | 画像の用途を決める | 本文用、一覧用、共有用で条件が違う |
| 2 | 表示幅を確認する | 必要以上に大きい画像を避ける |
| 3 | リサイズする | 不要なピクセル数を減らす |
| 4 | 圧縮する | 見た目を保ちながら容量を下げる |
| 5 | スマホで確認する | 文字と表が読めるか見る |
| 6 | ALTとキャプションを確認する | 軽量化しても意味づけを残す |
| 7 | 公開後に表示速度を見る | 実際のページで問題がないか確認する |
いきなり強い圧縮をかけるより、表示サイズに合わせたリサイズを先に行う方が、画質を守りやすいです。
画像の重さとLCP
LCPは、Largest Contentful Paintの略です。ページ内で主要な大きいコンテンツが表示されるまでの時間を測る指標です。
ページ上部に大きな画像がある場合、その画像がLCPの対象になることがあります。つまり、アイキャッチや本文冒頭の漫画が重すぎると、体感速度にも指標にも影響しやすくなります。
| 状態 | 読者の体感 | 改善案 |
|---|---|---|
| 画像がすぐ出る | 読み始めやすい | 適切なサイズ、キャッシュ、圧縮を維持 |
| 画像枠だけ先に出る | 待たされる感覚がある | 画像容量と読み込み順を見直す |
| 上部画像が大きすぎる | スクロール前に止まりやすい | アイキャッチ表示や本文冒頭を調整 |
| 画像が途中でガタつく | 読みにくい | 幅と高さの指定、安定した表示を確認 |
検索順位だけを見ていると、画像の重さは後回しになりがちです。しかし読者にとっては、表示が遅いページはそれだけで読む気が落ちます。
ALTやキャプションは削らない
画像を軽くするときに、ALTやキャプションまで簡略化してはいけません。
画像のファイル容量と、画像の意味を伝えるテキストは別の問題です。画像を圧縮しても、画像が何を説明しているかは本文側で残す必要があります。
| 要素 | 役割 | 圧縮時の注意 |
|---|---|---|
| ALT | 画像の内容をテキストで説明する | 短すぎるALTに置き換えない |
| キャプション | 読者に画像の意味を補足する | 画像の要点を残す |
| ファイル名 | 画像の主題を補助する | 意味のない連番だけにしない |
| 本文説明 | 画像の内容を記事文脈に入れる | 画像だけに任せない |
SEO漫画では、画像内の情報を本文でも説明します。これはAI検索対策としても重要です。画像だけで完結させず、本文、表、FAQ、内部リンクで同じテーマを補強します。
WordPressで確認する場所
WordPressで画像サイズと圧縮を見るときは、次の場所を確認します。
| 場所 | 確認内容 | 見落としやすい点 |
|---|---|---|
| メディアライブラリ | 元画像の容量、縦横、ALT | 元画像が大きすぎないか |
| 投稿本文 | 画像が正しい順番で表示されるか | 途中の画像だけ重いことがある |
| アイキャッチ | 一覧カードで見えるか | 本文画像とは別扱いになることがある |
| テーマの画像サイズ | サムネイル生成 | 一覧用サイズが作られているか |
| 公開ページ | 実際の読み込み | 管理画面では軽く見えても公開ページは違う |
公開後は、管理画面だけで判断しないでください。実際のURLをスマホとPCで開き、画像が待たずに出るか、文字が読めるかを確認します。
SEO漫画100本での運用ルール
100本のSEO漫画を作るなら、画像ごとに毎回悩むのではなく、ルール化が必要です。
| ルール | 内容 | 目的 |
|---|---|---|
| 1記事4枚を基本にする | 本文内漫画は過剰に増やさない | ページの重さを管理する |
| 1枚目を代表画像にする | アイキャッチとOGPの基準にする | 一覧と共有の見え方をそろえる |
| ALTを毎回具体化する | 章番号、テーマ、SEO文脈を入れる | 画像の意味を検索とAIに伝える |
| 圧縮後にスマホ確認する | 文字が読めるか見る | 読者体験を守る |
| 重い記事を後から改善する | Search Consoleや表示確認で拾う | 無理なく品質を上げる |
最初から完璧な画像運用を目指すより、同じ基準で積み上げ、反応の大きい記事から改善する方が現実的です。
よくある失敗
画像サイズと圧縮でよくある失敗は、次の通りです。
| 失敗 | 問題 | 改善 |
|---|---|---|
| 元画像のままアップする | ページが重くなる | 表示幅に合わせてリサイズする |
| 強く圧縮しすぎる | 漫画の文字が読みにくい | 圧縮率を弱め、スマホで確認する |
| 全画像を同じ形式にする | 画像ごとの向き不向きが出る | 漫画、写真、図解で形式を分ける |
| ALTを空にする | 画像の意味が伝わらない | 画像内容と記事テーマを書く |
| OGP画像を考えない | 共有時に画像が切れる | 代表画像と比率を確認する |
| 表示確認をしない | 実際の読者体験が分からない | 公開URLでPCとスマホ確認をする |
SEO漫画は、見やすさが入口です。画像の品質が悪いと、どれだけ本文を専門的に書いても読まれにくくなります。
実務チェックリスト
- 確認: 本文内画像、アイキャッチ、OGP画像の役割を分けて考えた
- 確認: 表示幅より大きすぎる画像をそのまま使っていない
- 確認: 圧縮後も漫画の吹き出し文字がスマホで読める
- 確認: 表やチェックリストの線や文字がつぶれていない
- 確認: 元画像のファイル容量を確認した
- 確認: 必要に応じてリサイズしてから圧縮した
- 確認: PNG、JPEG、WebPの向き不向きを考えた
- 確認: アイキャッチ画像が一覧カードで表示されている
- 確認:
og:imageが代表画像になっている - 確認: 画像ALTに章番号、テーマ、SEO漫画文脈を入れた
- 確認: キャプションで画像の意味を補足した
- 確認: 公開後にPCとスマホで表示を確認した
- 確認: 画像が重い記事を後日改善するメモを残した
- 確認: 関連講座、関連漫画、無料診断、育成プランへ導線をつないだ
FAQ
Q1. 画像は何KB以下にすればよいですか？
一律の正解はありません。画像の用途、表示サイズ、文字量、画質の必要度で変わります。漫画画像は文字が読めることが重要なので、容量だけで判断しないでください。まずは表示幅に合わせてリサイズし、画質を確認しながら圧縮します。
Q2. 漫画画像はPNGとJPEGのどちらがよいですか？
文字や線が多い漫画ではPNGが扱いやすいことが多いです。ただしPNGは重くなりやすいため、容量が大きい場合は圧縮やWebP変換も検討します。写真中心ならJPEG、図解や文字中心ならPNGやWebPを比較して決めます。
Q3. WebPにすれば必ず速くなりますか？
多くの場合、WebPは軽量化に役立ちます。ただし、画像の内容や変換設定によって結果は変わります。変換後に文字が読みづらくなっていないか、ブラウザで正しく表示されるかを確認することが大切です。
Q4. 画像を圧縮するとSEOに悪影響がありますか？
適切な圧縮で読者が見やすい画質を保てていれば、悪影響を心配しすぎる必要はありません。むしろ、重すぎる画像で表示が遅くなる方が読者体験を損なります。ALTや本文説明を残し、画像の意味が伝わる状態にします。
Q5. 本文画像とアイキャッチ画像は同じでよいですか？
最初の運用では同じでも構いません。SEO漫画では1枚目が記事の全体像を示すため、アイキャッチとして使いやすいです。ただし、SNS共有や一覧カードで切れやすい場合は、横長の専用画像を作ると安定します。
Q6. Lazy Loadを使えば圧縮しなくてもよいですか？
いいえ。Lazy Loadは画面外の画像読み込みを遅らせる仕組みで、画像そのものの容量を小さくするわけではありません。圧縮、リサイズ、読み込み制御はそれぞれ役割が違います。
Q7. 画像サイズはSearch Consoleで分かりますか？
Search Consoleだけで画像の容量や表示速度を細かく判断するのは難しいです。検索クエリやページ別の状態を見るには役立ちますが、画像の重さは公開ページ、ブラウザの検証ツール、PageSpeed Insightsなども合わせて確認します。
Q8. SEO漫画100本では、毎回画像圧縮が必要ですか？
必要です。100本になるほど、1記事あたりの小さな重さがサイト全体の体感に影響します。毎回、元画像、表示幅、圧縮後の見え方、ALT、OGPを確認する流れを作ると、シリーズ全体の品質がそろいます。
参考・関連リンク
- Google 画像 SEO ベストプラクティス: https://developers.google.com/search/docs/appearance/google-images
- web.dev 画像最適化: https://web.dev/learn/performance/image-performance
- web.dev LCP: https://web.dev/articles/lcp
- PageSpeed Insights: https://pagespeed.web.dev/
- 漫画章: /academy/manga/chapter-08/
- 関連漫画: /manga/alt-text-writing-manga/
- 関連漫画: /manga/image-caption-filename-manga/
- 関連漫画: /manga/image-structured-data-manga/
- 関連漫画: /manga/image-sns-share-ogp-manga/
- 関連講座: /academy/llmo-article-template/
- 関連講座: /academy/blog-asset-strategy/
- 関連講座: /academy/search-console-metrics/
- SEO漫画カテゴリ: /manga/
- ホームページ育成アカデミー: /academy/
- 無料診断: /academy/diagnosis/
- ホームページ育成プラン: /service/llmo_seo/auto-blog-lp/
無料診断CTA
画像サイズと圧縮は、記事を軽くするだけの作業ではありません。漫画、図解、アイキャッチ、OGP、ALT、本文説明をそろえて、読者にも検索エンジンにも伝わりやすいページにする作業です。
Acquaのホームページ育成では、本文の専門性だけでなく、画像の見やすさ、表示速度、ALT、カテゴリ一覧、SNS共有、内部リンクまでまとめて確認します。自社サイトの画像が重すぎる、漫画や図解をどう使えばよいか分からない、SEO漫画のような見やすい専門ブログを育てたい場合は、無料診断で優先順位を整理してください。