マンガLPの画像を軽くするには、元データを保管したうえで、実際の表示幅に合う画像を書き出し、スマートフォンでは画面幅に合った候補を配信します。画像の幅と高さを事前に指定し、最初の画面に出る画像は遅延読み込みしないことも大切です。容量だけを小さくしてセリフや細い線が読めなくならないよう、最後は実機で確認します。
「画像が重い」とき、最初に確認すること
漫画を縦長の一枚画像で掲載すると、スマートフォンでは画面幅に縮小されても、元画像の画素数やファイル容量は大きいまま配信されることがあります。反対に、強く圧縮しすぎると吹き出しの文字、細い線、トーンの境目が崩れて読みづらくなります。
そのため、目標は単純な「最小容量」ではありません。ページのどこに画像を表示するか、読者の端末で何ピクセル程度に見えるか、内容を無理なく読めるかを一緒に見ます。ここでは、公開済みのマンガLPを担当者が安全に見直す順番を紹介します。
マンガLP画像を軽くする5つの手順
- 現状を記録する：ページをスマートフォンで開き、画像の表示順、表示幅、ファイル容量、読み込みにかかる時間を控えます。ブラウザーの開発者ツールを使える場合はNetworkのImgで、どの画像が何バイト転送されているか見ます。最初の画面に出る画像と、スクロール後に出る画像を分けて記録し、変更前後の比較条件をそろえます。
- 元画像から用途別に書き出す：編集可能な元データは別に保管し、公開用の画像はページ上の表示幅に合わせて書き出します。スマートフォンで小さく表示する画像に、必要以上に大きな原寸データを配信しないようにします。画像形式や圧縮率は、サイトの配信環境で扱えるものを候補にして、容量だけでなくセリフ、輪郭線、ベタ塗りの見え方を実機で比べます。JPEGなど非可逆圧縮の画像を何度も再圧縮すると劣化が重なるため、毎回元データから書き出してください。
- 画面幅に応じて画像候補を切り替える：同じコマでも、スマートフォンと大きな画面で必要な画像サイズは異なります。HTMLの
srcsetとsizesを使うと、ブラウザーが表示幅などに応じた候補を選べます。次は書き方の例です。実際には、用意した各ファイルの幅と、CSS上の表示幅に合わせて値を調整します。 - 画像の表示スペースを先に確保する：画像に実データの
widthとheightを付けるか、CSSで正しい縦横比のスペースを確保します。読み込み後に画像が現れて文章やボタンがずれるのを抑えやすくなります。横幅を画面に合わせるときも、高さを固定して漫画を押しつぶさず、元の比率を保つ設定にします。 - 遅延読み込みを画像の位置で使い分ける：最初の画面に表示されるヒーロー画像や、ページの主要コンテンツになる画像には、安易に
loading="lazy"を付けないでください。表示開始が遅れることがあります。初期画面より下にある画像は、実際のスクロールで自然に表示されることを確認したうえで遅延読み込みを検討します。重要な画像にfetchpriority="high"を付ける場合も、計測して優先度を上げる価値がある画像に絞ります。
<img src="/images/manga-960.webp" srcset="/images/manga-480.webp 480w, /images/manga-960.webp 960w, /images/manga-1440.webp 1440w" sizes="(max-width: 768px) 100vw, 720px" width="1440" height="1800" alt="漫画LPのストーリーを説明する画像">
この例の数字はサンプルです。コマやページの縦横比、デザイン上の最大幅を確認してから画像を用意してください。細かなセリフがある場合、スマホ用画像を単に縮小するだけでなく、コマを分けて表示するほうが読みやすいこともあります。スマホ向けマンガLPの公開前チェックも参考にしてください。
変更前後を同じ条件で確かめる
画像の差し替え後は、変更前と同じページ、同じスマートフォンの画面幅、同じネットワーク条件で比較します。NetworkのImgで転送量と読み込み順を見て、必要に応じてLighthouseなどで主要な表示指標も確認します。数値だけで終わらせず、次の項目を実際に読み進めてください。
- 吹き出しの文字や細い線が、拡大操作をしなくても読める。
- コマの順番が明確で、画像の一部が欠けたりぼやけたりしていない。
- 画像読み込み後に見出し、本文、CTAが大きく動かない。
- 最初の画面の主要画像が遅れて出ず、下部の画像もスクロール時に表示される。
- 問い合わせボタンやフォームが、画像や追従要素に隠れていない。
一度に形式、寸法、遅延読み込みをまとめて変えると、どの変更が効いたか分からなくなります。最初に容量の大きい画像群など、対象を絞って調整し、表示と可読性を確認してから次へ進めると原因を追いやすくなります。表示速度の変化だけで問い合わせ増加や検索順位の上昇を断定せず、必要ならアクセス解析と問い合わせ完了の計測も別に確認します。指標の整理には漫画施策をGA4で効果測定する手順もご利用ください。
よくある質問
マンガ画像はWebPやAVIFにすれば必ず軽くなりますか？
必ずとは限りません。画像の内容や設定、配信環境によって容量と見た目が変わります。同じ表示サイズで複数形式を書き出し、ファイル容量とセリフ・線の読みやすさを実機で比べて選びます。
LP内の画像はすべて遅延読み込みにしてよいですか？
すべてにはしないでください。ページを開いた直後に見える画像、とくに主要な表示要素は遅延読み込みによって表示開始が遅れる場合があります。初期画面より下にある画像を中心に検討します。
画像のwidthとheightを指定すると、スマホで固定サイズになりますか？
属性値は画像の寸法や縦横比をブラウザーに伝えるために使えます。画面に合わせて表示するには、CSSで幅を調整し、高さは自動にするなど、比率を保つ指定を併用します。別の比率で切り抜く場合は、漫画の重要なコマやセリフが欠けないか確認してください。
まとめ：容量と「読める」をセットで確認する
マンガLPの画像軽量化は、元データの保管、表示幅に合う書き出し、画面幅ごとの画像選択、画像寸法の指定、読み込み順の調整を順に行います。判断基準はファイル容量だけではなく、読者がスマートフォンでストーリーと説明を読めることです。
LPの漫画表現やスマートフォンでの見せ方を整理したい場合は、マンガLP無料診断で確認できます。制作や構成については漫画制作・マンガLP支援をご覧ください。