ブログの漫画画像を軽くする方法｜WebP・表示サイズ・スマホ確認の手順

この記事は、WordPressなどのブログに縦長漫画や図解を載せる方向けです。僕のブログでも漫画の表示が遅いという話があり、画像を軽くする方針で作業してきました。ここでは、点数だけを追わず、漫画の文字を読める状態に保ちながら見直す順番をまとめます。

画像の「見た目の大きさ」と「ファイルの重さ」を分ける

記事で横幅を小さく表示しても、元の大きな画像を読み込んでいるなら、通信するファイルは大きいままのことがあります。逆に容量だけ小さくできても、吹き出しがにじんで読めないと漫画として使いづらいです。幅・高さ・容量・表示幅を別々に見ましょう。

たとえば幅2,000pxの画像を記事では600pxで表示しているなら、その画素数が本当に必要かを見直します。ただし、600pxへ必ず縮めるという意味ではありません。拡大して読む使い方や、高精細な画面もあるので、実際の文字を見ながら決めます。

最初に残すのは、元画像と更新前の本文

僕なら、一括変換から始めず記事一つで試します。元画像、記事に使っている画像URL、変更前の幅と高さ、容量を残します。元データを上書きしてしまうと、画質を下げすぎたときに元へ戻しづらいからです。

メディアライブラリの画像は、別の記事やサイドバーでも使われていることがあります。使い道を確認せず削除しないようにしましょう。新しい軽量画像へ差し替えるときも、既存のキャプション、alt、リンク先、画像を開く動きが必要かを確認します。

自分の操作画面や配達記録なら、文字がつぶれたり重要な部分が切れたりしないことを優先します。読みやすくするために内容を書き換えた画像は、元の実画面とは別物です。個人情報を隠す加工と、操作や金額を変える加工を混同しないようにします。

実際の画面や自分の記録を記事に使うときは、ChatGPTで実体験を記事に加える方法も参考にしてください。元の記録と、あとから加えた説明を分けて扱います。

手順1：記事で読む幅と、漫画の構成を確認する

スマホで記事を開き、漫画が本文のどのくらいの幅で表示されるかを見ます。小さい枠に押し込まれていたら、圧縮より先に表示幅を直す方がよい場合があります。横に3コマ並んだ画像を細いスマホで読むと、文字が小さくなることもあります。

縦に3コマなら、横幅を保ちながら順番に読めます。ただし、縦長1枚が非常に大きくなる場合は、コマごとの分割も候補です。分けると画像の数は増えるので、読みやすさと全体の通信量、スクロール中の表示を比べてください。

漫画を大きくするか小さくするかは、画面の余白ではなく文字で判断します。吹き出しの本文、注意書き、小さな記号が読めるかを見ます。読者が毎回拡大しないと分からないなら、圧縮をやり直す前に、文字を減らすか漫画の配置を直す方がよいこともあります。

漫画の文字が多すぎる場合は、画像だけで説明を完結させず本文へ戻すことも考えます。記事の書き方5つの型と例文を使うと、漫画で見せる要点と文章で補足する手順を整理しやすくなります。

手順2：WebPなどで書き出し、元画像と比較する

Googleの画像SEOの案内では、WebPを含む複数の画像形式が扱われています。WebPへ変換すれば必ず最小になるとは限らないので、元のPNGやJPEGと容量・画質を比べましょう。写真、線画、文字の多い図で、圧縮の影響の見え方は変わります。

比較用の候補は二つ程度から始めれば十分です。たとえば同じ幅で、圧縮の弱い候補と強い候補を書き出してみます。数字だけを見て最小のものを選ばず、吹き出しの縁や細かい日本語が崩れていないかを見ます。今回の記事でも漫画をWebPで配信していますが、特定の容量を全記事共通の合格基準にはしていません。

透過が必要な画像は背景が勝手に塗られていないか、色の境目が不自然でないかも確認します。表や手順図なら、画像でしか読めない状態にせず、要点は本文にも残すと読みやすくなります。

出典：Google検索セントラル：画像のSEOベストプラクティス（2026年11月9日確認）。形式対応や設定は利用中のサイト環境でも確認してください。

手順3：WordPressへ登録し、本文の画像を差し替える

軽量ファイルをメディアへ追加したら、記事で新しい画像を選びます。ファイルをアップロードしただけでは、すでに本文にある古い画像が変わるとは限りません。カスタムHTMLなら、画像のsrcがどのURLかも確認します。

幅と高さの情報を保持すると、画像を読み込む前から場所を確保しやすくなります。表示幅はスマホの本文に収まるようにし、高さを無理に固定して縦横比を崩さないようにします。画像の中身が変わったなら、altも説明に合うか見直します。

altはキーワードを並べる欄ではありません。「梟が表示幅を確認し、圧縮前後を比べ、スマホで読む」というように、画像が何を伝えるかを書きます。記事本文をそのまま長文で詰め込まず、装飾だけの画像は役割に応じて扱います。

画像を差し替えるついでに、本文で案内している記事も点検できます。過去記事の選び方と内部リンクの確認手順に沿って、画像の拡大先と関連記事の行き先を別々に確かめましょう。

遅延読み込みは、画像の位置に合わせて考える

記事の下の方にある漫画は、ページを開いた瞬間には見えないことが多いです。こうした画像の読み込みを後にする方法はありますが、最初に見える大きな画像まで一律に遅らせると、肝心の表示を待たせることがあります。設定名だけでまとめて有効にせず、どの画像に効くかを確認してください。

テーマやプラグイン、HTMLにそれぞれ設定があると、同じ画像に複数の仕組みが重なる場合もあります。僕なら、変更前の設定を残し、一度に何種類も入れ替えません。画像を小さくしても遅い場合は、配信されるURLやキャッシュ、ページ全体の読み込みを分けて調べます。

公開後に見るのは、容量だけでなく表示と操作

1. スマホで漫画が本文幅に収まっているか。
2. 吹き出しと小さな注記が読めるか。
3. 縦横比が崩れず、コマが切れていないか。
4. 拡大リンクを残した場合、正しい画像が開くか。
5. 古い画像ではなく差し替え後の画像が使われているか。
6. 画像の重要条件が本文にも書かれているか。

同じ端末で何度も開くと、すでに読み込んだ画像のキャッシュで速く見えることがあります。変更前後を比べるときは条件をそろえ、1回の印象だけで速くなったと決めないようにします。数値を使うなら、計測日、対象ページ、スマホかパソコンか、計測方法を残すと比較しやすいです。

画像を軽くしても遅いとき

漫画だけの表示が遅いのか、本文が出るまで遅いのか、ボタンを押したとき反応が鈍いのかで、次に見るところは違います。画像を直したあともページ全体が遅いなら、動画、外部スクリプト、フォント、サーバー応答などを別に確認します。どれが原因かは実測を見ずに断定しません。

速度の点数が上がったとしても、検索順位や売上がその分上がったとは言えません。記事の内容や導線も別に見ていく必要があります。高速化は読者が内容へたどり着くための改善として考えます。

比較するときは、同じ漫画で候補を作る

写真と漫画を一つずつ比較しても、形式や圧縮だけの差は分かりません。僕なら、同じ元漫画から候補A・Bを作ります。幅は同じにして圧縮だけ変えるか、圧縮をそろえて幅だけ変えます。変えたものを一つにすると、読みやすさが落ちた理由を追いやすいです。

比較メモは「幅×高さ」「容量」「吹き出しの本文が読めるか」「注記が読めるか」「拡大したときの輪郭」で十分です。例として、ある画像が1MBから200KBへ減ったなら、容量は約5分の1です。ただし、この数字は計算の例で、この記事で測った実績ではありません。表示時間も5分の1になるという意味ではないので、分けて書きます。

文字の周囲がぼやけたり、濃紺の線にまだらな模様が出たりしたら、まず一段画質を戻して比べます。全体を見たときはきれいでも、肝心の注意書きが読めないなら、記事に使う候補としては見直したいです。データを小さくすることより、読者が判断に必要な情報を読めることを優先します。

縦長の漫画を分割するときの注意

1枚を3枚へ分けるなら、読む順番が変わっていないか、コマ間に無関係な広告や大きな空白が入らないかを見ます。それぞれに短い説明を付ける場合も、同じ文章を3回繰り返さず、何を伝えるコマかを分けます。分割前の画像へのリンクを残すかどうかは、読者が拡大して見たいかを考えて決めます。

分割すると一つの画像は小さくなりますが、総容量が必ず減るわけではありません。書き出しや余白が変わると増える場合もあるので、合計も比べます。スクロールして下のコマが出るまで待たされないかも確認してください。

キャッシュで古い画像が見えるとき

管理画面で差し替えたのに公開ページが前のままなら、まず本文に保存されたURLを確認します。次に、画像そのものを開いたとき新しい内容かを見ます。本文が古い、画像ファイルが古い、ページのキャッシュが古い、という状態を区別すると、何度もアップロードし直すのを避けやすいです。

キャッシュの削除が必要な場合も、利用中の仕組みを確認して対象を絞ります。テーマやCDN、画像変換プラグインをまとめて変更すると、原因が分かりづらくなります。元のURLと変更後のURL、作業した日を控え、どこまで反映できたかを確認してから次の記事へ進みます。

アイキャッチと本文漫画は、同じ扱いにしない

アイキャッチは一覧や記事の上部で使われ、本文漫画は途中で説明を補う役割があります。両方を同じ幅・圧縮・読み込み設定へそろえる必要はありません。記事一覧の小さな枠へ大きな縦長漫画を使うと、縮小されて何の画像か分かりづらいこともあります。

アイキャッチはタイトルが読める横長の画像、漫画は本文の説明に合う縦長など、用途ごとに作ります。見た目を統一するための青白の配色は共通でも、画像そのもののサイズと伝える情報は役割に合わせると使いやすいです。

公開前の確認メモには、変換した日と、採用したファイル名も入れておきます。後日、別の画像を差し替えるとき、どれが元でどれが軽量版か分かるためです。ファイル名が似ている場合は、記事で使っているURLと結び付けて残します。容量の比較と実際の公開表示の確認がそろったところを、その記事の作業完了にします。

よくある質問

漫画は何KB以下にすべきですか？

一律には決めません。同じ容量でも、文字量、縦長か横長か、記事にある画像枚数で負担が違います。元より軽く、必要な文字が読める候補を作って比較します。

WebPにすれば画質は同じですか？

書き出し方法で変わります。変換後の画像を開き、文字と輪郭を確認してください。容量の小ささだけでは画質の確認になりません。

過去記事の画像を全部一度に変えるべきですか？

まず代表的な記事一つで、バックアップ・差し替え・表示確認まで試す方が管理しやすいです。問題なく戻せる方法が分かってから対象を広げます。

次回からは、アップロード前に軽くする

新しい漫画ができたら、そのまま登録する前に、幅・形式・容量・文字の読みやすさを確認します。公開前の作業に入れておけば、あとから記事を開き直して画像を探す手間も減らせます。僕も、新規とリライトの両方で、この確認を続けていきます。

この確認を毎回続けるには、AIを使ったブログ運営の作業手順に画像の書き出しと表示確認を組み込むところから始められます。