サイトの画像を整える方法：サイズ、代替テキスト、検索での理解しやすさ

ハーブの植え替えを教える記事に写真が十枚あり、すべて圧縮されていても、どれが根の確認でどれが土を足す場面か読者には分からないことがあります。画像処理の出発点は、その写真が何を説明するかです。サイズ、説明文、ダウンロード量はその目的に合わせます。

各画像を役割のある小さな素材一式として考えます。元画像を残し、ウェブ用を作り、用途を説明し、実際の公開ページを確認します。これなら改修やツール変更の後に問題を追いやすく、画像検索の成果をプラグインの点数一つに任せずに済みます。

画像が補う情報を先に決める

画像を挿入する前に、それが答える問いを一文で書きます。根の接写なら根鉢が詰まりすぎていないか、完成写真なら土の表面と鉢の縁の距離を見せます。同じ鉢の植物を撮った二枚でも記事での役割は異なり、同じファイル名と説明文を使い回すべきではありません。

画像を削除すると必要な手順が分からなくなるなら、重要な情報は文章でも理解できるようにします。複雑なフローチャートは流れと条件を本文にも書き、小さな図の細かい注記に教材全体を任せません。関連する段落の近くに画像を置くことは、人と検索システムが文脈を理解する助けにもなります。

単なる背景の模様や新しい情報のない装飾画像は別の扱いが必要です。すべての画像にキーワードを入れて余計な情報を増やす必要はありません。まず情報を伝える画像、機能を持つ画像、装飾画像を分けると、後で代替テキストを一貫した基準で判断できます。

表示の用途に合わせてサイズと形式を書き出す

記事の本文幅、スマートフォン表示、拡大して見る必要性を確認してから、書き出しサイズを決めます。写真の元ファイルはページに必要なサイズより大きいことがありますが、教材の細部をぼかしてはいけません。高品質の元画像を残し、別のウェブ用画像でトリミング、解像度、圧縮を調整すれば、後から作り直せます。

写真、透過画像、文字入りスクリーンショットでは、それぞれ適した形式を試します。Google画像検索はJPEG、PNG、WebP、AVIF、SVGなどに対応していますが、対応形式だからといってどの素材でも最小になるわけではありません。実際の容量と鮮明さを比べ、スクリーンショットの細い文字、輪郭、透過部分、色の変化に注意します。

レスポンシブ画像では複数のサイズを用意し、条件に応じてブラウザーに選ばせられます。Googleは標準のimg要素を推奨し、srcsetやpictureを使う場合も代替のsrc URLを用意するよう案内しています。CSSの背景としてだけ表示する画像を、Google画像検索のインデックス対象となる本文画像とみなしてはいけません。エディターの縮小表示だけでなく、出力を確認します。

ファイル名と代替テキストに別々の役割を持たせる

アップロード前に、カメラの連番ではなくherb-root-checkのような短く識別しやすいファイル名を付けます。ファイル名は手掛かりになりますが、都市名、ブランド名、人気の検索語を詰め込む必要はありません。既存サイトで改名する場合は古い参照も処理し、一括改名で画像を壊さないようにします。

代替テキストは、その記事での画像の意味を伝えます。根の写真なら「鉢から取り出した植物の根が鉢の内壁に沿って密集している」と書くと、写真を見られない人もこの手順を理解できます。同じ写真を鉢の販売ページで使えば、説明の重点は変わり得ます。素材に固定された宣伝文句ではなく、「これは画像です」で始める必要もありません。

W3Cの判断方法は、機能と装飾も扱います。画像だけのボタンには操作や行き先を表す文が必要で、純粋な装飾のimgには空のalt属性を使えます。空の値と属性そのものがない状態は別です。キャプションは全読者に見える補足情報であり、書き込んでも代替テキストの代わりにはなりません。

WordPressではページごとに画像の項目を確認する

画像ブロックでアップロードまたはメディアを選択したら、解像度、切り抜き、関連する文章を確認します。WordPressの公式資料では、ブロック設定で代替テキストを変えてもそのページや投稿にだけ反映され、メディアライブラリの代替テキストは後で画像を挿入するときの初期値になります。ライブラリを更新した後も、重要な既存記事の実際の出力を調べます。

表示幅を小さくしただけで、ダウンロードするファイルも小さくなったと考えないでください。公開ページを開き、ブラウザーが読み込む画像の種類と実際の容量が画面の用途に合うか確かめます。テーマが横長の写真を正方形に切り抜く場合は、根、手の動き、必要な目印が範囲に残るかも確認します。

ギャラリー、記事のカバー、本文のブロックでは設定元が異なることがあるため、別々に抽出して確認します。植え替え記事なら、手順の接写、全体写真、図解を一枚ずつ代表として選び、残りの画像も同じ流れで確認します。トップページのカバーだけを見て、メディアライブラリ全体が済んだとは判断できません。

1. 元画像とウェブ用画像を整理し、用途、サイズ、素材の出典を記録する。
2. 画像ブロックに挿入し、表示に適した解像度と切り抜きを選ぶ。
3. このページの文脈に合わせて代替テキストを書くか、装飾画像と確認する。
4. 公開ページで実際の画像、文字項目、スマートフォン表示を確認する。

Smushは少数の画像で比較してから補助に使う

Smushの公式プラグインページには、アップロード時の圧縮、個別・一括処理、遅延読み込みなどが記載され、画像CDNなどはPro機能と表示されています。導入前に現在のバージョンとプランを確認します。ホスティング環境や別のプラグインが画像を処理している場合は、どの工程をどのツールが担うか決めておきます。

復元できる環境で代表的な画像を数枚選び、処理前後のファイルと画面を保存します。教材の細部が損なわれないと確認してから、一括処理を検討します。元画像は別にバックアップし、ツールで実際に復元できる範囲も調べます。「圧縮完了」と表示されても、元画像、サムネイル、外部に置いたファイルがすべて元に戻るとは限りません。

プラグインの圧縮率は内容の確認に代わりません。細い根が消えたり、スクリーンショットの文字が読みにくくなったり、図の線が背景に埋もれたりしたら、画質を調整するかその画像を対象外にします。圧縮ツールは段落の中での写真の意味も決められません。代替テキストとキャプションには編集者の判断が必要です。

公開時に読みやすさを確認し、更新の記録を残す

本文の流れの中で各画像を理解できるか、画像のURLにアクセスできるか、必要な情報が小さすぎる文字に隠れていないか調べます。切り抜き、欠落、スマートフォンでのはみ出しは具体的な問題として記録します。「画像SEOが悪い」だけでは修正点を特定できません。

素材表には、ファイル名、使用する記事、元画像の場所、出典または自作の記録、書き出した版、代替テキストを残します。利用許諾のある写真でも作者、許諾条件、出典リンクを保存すれば、次に作り直すときに使用可能か判断できます。素材表は画像の差し替えや未使用ファイルの削除にも役立ちます。

作業後はダウンロード量、見た目の品質、検索での理解しやすさを分けて記録します。画像を見つけられる状態でも、インデックス登録や特定の順位は保証されません。ファイルを小さくしてもページ全体の速度が必ず上がるわけではありません。変更の目的と結果を残し、次に画像、レイアウト、ほかの読み込み資源のどれを直すか判断します。

記事の共有カードで画像がどう表示されるか確認しましょう。

サイトのテクニカルSEOを確認する順番を決めましょう。

画像を大きく変更する前にWordPressのファイルとデータをバックアップしましょう。

• チュートリアル
• アプリ・ソフト
• マーケティング・SEO
• SEO