記事画像を軽くして画質を確認する

表示する用途と必要な画質を決める

画像の軽量化は全ファイルを同じ小さな寸法へ変換することではありません。幅、役割、必要な細部から転送量と見やすさを確認します。作例は記事冒頭の写真と本文の接写です。まず原本を保管し、公開ページが取得するURLを調べます。1440ピクセルと小さい一覧版を比べる計画は候補で、すべてに共通の正解ではありません。文字を含む図ならHTMLへ戻す方法も検討します。容量を減らすため必要な説明まで読めなくせず、実際に使う場所を起点にします。

配信される画像を一覧にする

ページ、画像URL、表示幅、実寸、形式、容量、位置を記録します。Screaming FrogでURLや容量を調べても表示幅はブラウザーで別に見ます。本文、背景、カードを区別します。小さく見えて大きい原本を読んでいる場合があるので、見た目だけで最適化済みとしません。最初の取得に加え、幅変更や本文へ進んだ後の選択も確認します。端末別候補の参照が古く残らないよう、公開ファイルと結びます。比較の前に実際に何を変えるべきかを特定します。

用途に合う候補サイズを作る

冒頭、本文、一覧の枠へ候補を作り、高密度画面でも必要な質感が残るか確認します。一つの大きな原本をすべてへ配る構成を見直します。WebPやAVIFは掲載先の対応を確認します。文字と線の多い図は写真と同じ設定で壊れやすいため内容で形式を選びます。上書きせず出力へ用途を付け、幅変更と圧縮率だけの変更を区別します。どの条件が画質へ影響したかを記録し、接写に必要な細部を守るため一覧まで無用に重くしないよう個別に判断します。

候補ファイルの比較では、元画像を上書きせず、出力名に用途を示します。幅を変えた版と圧縮率だけ変えた版を混ぜると、何が画質へ影響したか分からなくなるため、変更した条件を記録します。写真の細かな質感が必要な記事と、全体の雰囲気を伝える写真では採用基準を分けます。小さい一覧画像に必要以上の細部を残すため、記事冒頭まで重くするような一律の設定を避け、表示する場所から逆算します。

同じ幅で圧縮前後を比較する

同じ写真を同じ幅で並べ、輪郭、質感、細い線、暗部を確認します。容量が減っても記事の特徴が消えれば採用しません。拡大だけで決めずスマートフォンでも見ます。形式、寸法、容量、劣化を記録して理由を残します。冒頭、接写、図の代表三種類から始め、結果が違えば設定を分けます。別のサイズが配信されている問題なら変換を繰り返す前に指定を直します。画像数と掲載先を記録し、一枚の変更が複数の場所へ与える影響も確認します。

レスポンシブ配信と読み込みを確認する

複数サイズはsrcsetやsizesで適した候補へつなぎます。幅と高さを指定し、画像の到着で本文が大きく動かないようにします。冒頭の主要画像と下部を同じ遅延読み込みにしません。重要な画像が遅れる場合は発見と優先度も確認します。ファイルを作っただけで改善とせず公開後の取得URLを見ます。低速の条件で周囲の文章が読め、リンクや表が動かないかを確認します。読み込み失敗時にも説明が成立し、代替テキストが実際の内容に合うことを見ます。

ネットワークの確認では、最初に読み込んだ画像だけでなく、画面幅を変えた後や記事途中へ移動した後の取得も見ます。別端末向けの候補が残っている場合は、公開ファイルの一覧と参照を照合します。画像を読み込めない場合でも説明文と本文が成立するか、代替テキストが実際の内容と一致するかを確認します。速度対策のために必要な画像まで遅れて届く構成になっていないか、冒頭と本文の役割を分けて判断します。

ぼけと表示の遅れを切り分ける

ぼけるなら圧縮だけでなく選ばれた寸法と表示幅を見ます。遅いなら容量に加え発見時点、優先度、サーバー応答を確認します。軽くしても別の表示要因が残る場合があります。原本へ戻せるようにし、URLを替えたら古い参照とキャッシュを調べます。単発の測定で全利用者の改善と断定せず、同じ条件の比較と実利用の記録を分けます。新形式では必要な環境の表示も確認します。転送記録と目視を一緒に残し、容量の一覧だけを完了の証拠にしません。

変換と公開確認の費用を残す

元の整理、変換、画質、組み込み、公開検証を数えます。自動化も対象と設定と原本保管の方針が必要です。配信の基本料に加え転送や変換の条件を見ます。少数で基準を決めて全体へ広げます。納品は原本、採用版、設定、場所、結果を含め、新しい画像も同じ点検を通します。原本が再び本番へ混ざらないよう更新手順へ組み込みます。画像検索は別に観察し、容量だけで順位を保証しません。最適化の完了は正しいファイルが使われ必要な細部が残ることです。

• Core Web Vitalsの実測データを読む｜グループと単発テストを区別する
• 画像検索の実績を調べる｜画像URLと掲載ページを分けて点検する
• JavaScriptサイトのSEO点検｜初期HTMLと表示後の本文を比べる