サイト公開後、画像は最も問題が起きやすいコンテンツの一つです。テキストは通常データベースに保存されるため、公開時に失われにくいですが、画像はファイルの場所、リンクの書き方、サーバー設定、外部プラットフォームなど複数の要素に依存しており、どれか一つでも変化するとページに空白や壊れた画像が表示されることがあります。以下では、よくある現象、原因、確認手順について説明します。
画像が全く表示されない場合は、まずブラウザのコンソールを確認
問題が発生しているページを開き、F12キーで開発者ツールを起動し、Networkパネルに切り替えてページを更新し、画像リクエストのステータスコードを確認します。よくあるケースは以下の通りです：
- 404：ファイルがそのアドレスに存在しない。多くはパスの記述ミスか画像がアップロードされていない。
- 403：ファイルは存在するがサーバーがアクセスを許可していない。ディレクトリの権限設定やホットリンク防止規則が原因のことが多い。
- 混合コンテンツの警告：ページはHTTPSなのに画像がhttpで始まっているため、ブラウザがブロックする。
- リクエストのキャンセルまたはタイムアウト：画像ファイルが大きすぎる、または外部リンクサーバーの応答が遅い。
ステータスコードを確認することで、問題を素早く特定のカテゴリに絞り込むことができ、何度も再アップロードを繰り返すよりも効率的です。
公開・移行後に画像が無効になる：パスが変わったのに参照が変わっていない
旧サイトのリニューアルやサーバー移行の際、画像ファイルは新しいディレクトリ構造に再編成されることがよくありますが、記事本文内の画像リンクは古いアドレスのままになっています。症状としては、トップページや一覧ページは正常なのに、古い記事を開くと画像がすべて壊れているというものです。
推奨される処理手順は以下の通りです：
- 管理画面からすべての記事をエクスポートし、本文内の画像リンクを抽出して古いリンクの一覧を作成します。
- 古いリンクと新しいサーバー上の実際のファイルパスを照合し、一致しない部分を特定します。
- 旧ディレクトリ構造を維持できる場合は維持し、できない場合はサーバーにリダイレクトを設定して古い画像アドレスを新しいアドレスに転送します。
- リダイレクトはあくまで過渡的な措置とし、本文内のリンクは徐々に新しいアドレスに置き換えることをお勧めします。そうしないと、将来再度移行する際にまたリンク切れが発生します。
画像の数が多い場合、この作業はスクリプトや一括置換ツールで処理する価値があります。手作業で一篇ずつ修正すると漏れが生じやすいです。
大文字小文字や日本語ファイル名による一部画像の表示不能
非常に見つけにくい問題があります。同じ画像が編集用パソコンでは表示されるのに、サーバー上では404になるケースです。よくある原因はファイル名の大文字小文字の不一致です。Windowsはファイル名の大文字小文字を区別しませんが、Linuxサーバーは区別するため、Banner.jpgとbanner.jpgは別のファイルとして扱われます。
もう一つは、ファイル名に日本語やスペースが含まれている場合です。一部のサーバーやCDNではこれらの文字の扱いが異なり、リンクがコピー、貼り付け、文字コード変換の過程で変形しやすくなります。
アップロード前に命名規則を統一することをお勧めします。例えば：
- 小文字の英字、数字、ハイフンのみを使用する。
- スペースの代わりにハイフンを使い、アンダースコアと混在させない。
- 内容がわかる名前にしてチームでの検索を容易にする。例：
service-consulting-01.jpg - 同じカテゴリの画像は同じディレクトリに配置し、ルートディレクトリに全部置かない。
外部リンク画像の無効化：他人の画像は自分の画像ではない
一部の運用担当者は手間を省くため、他のサイトから画像アドレスを直接コピーして自分の記事に貼り付けることがあります。このような外部リンク画像にはいくつかのリスクがあります：相手が画像を削除または変更すると自分のページに壊れた画像が表示される、相手がホットリンク防止を設定すると自分のサイトで読み込めなくなる、相手のサーバーが不安定だとページの読み込み速度に影響するなどです。
判断方法は簡単です：ブラウザでその画像アドレスを単独で開き、まだアクセスできるか確認します。画像がコンテンツにとって重要な場合は、ダウンロードして自分のサーバーや画像ホスティングサービスにアップロードし、リンクを置き換えることをお勧めします。外部画像を引用する際は著作権にも注意し、出所不明の素材を無断で使用しないようにしましょう。
HTTPSページでhttp画像を読み込む
サイトでHTTPSを有効にした後、画像リンクがまだhttpで始まっていると、ブラウザは安全でないコンテンツとしてブロックし、ページに壊れた画像やセキュリティ警告が表示されます。この問題は、初期にアップロードされた画像、旧サイトからコピーした本文、サードパーティの統計や広告コード内の画像によく見られます。
確認方法：開発者ツールのコンソールで「Mixed Content」を検索するか、ページのソースコードで画像アドレスを直接確認します。対処法は、画像アドレスをhttpsに変更するか、画像を自分のHTTPSドメインにダウンロードすることです。画像が外部プラットフォームからのものである場合は、まず相手がhttpsをサポートしているか確認しましょう。
画像は開けるが表示がおかしい：サイズ、形式、圧縮の問題
リンクは正常でステータスコード200でも、画像が歪んでいたり、ぼやけていたり、一部しか表示されない場合は、通常リンクとは関係なく、画像自体の問題です：
- 画像の実際のサイズとページの表示領域が一致せず、引き伸ばされたり切り取られたりしている。
- ブラウザがサポートしていない形式（一部の特殊な形式が特定のブラウザで表示できないなど）。
- 画像が過度に圧縮され、細部が失われている。
- 画像ファイルが大きすぎて読み込みが遅く、ユーザーには空白のプレースホルダーが見えている。
このような問題はアップロード前に制御する必要があります：ページの実際の表示サイズに合わせて画像を準備し、大きな画像をコードで縮小しない；透明背景が必要な場合はPNG、写真コンテンツにはJPGまたはWebPを使用；1枚の画像は適切なサイズに抑え、一覧ページと詳細ページで異なるサイズを用意することを検討しましょう。
画像リンクの日常チェックリスト
サイト公開はゴールではありません。画像リンクはコンテンツの更新、サーバーの調整、外部プラットフォームの変化に伴って無効になることがあります。以下の項目を日常的なチェックに組み込むことをお勧めします：
- 新しい記事を公開する前に、プレビューページで画像を一枚ずつ開き、正常に表示されるか確認する。
- リニューアルや移行後は、古い記事の画像を抜き取り検査する。特に公開時期が早いコンテンツを重点的に。
- 外部リンク画像を使用しているページを定期的にチェックし、外部アドレスがまだ有効か確認する。
- 画像ファイル名とディレクトリ構造がチームの命名規則にまだ準拠しているか確認する。
- 画像ファイルをバックアップする際は、記事本文内のリンクも一緒にバックアップし、ファイルだけをバックアップしてどの記事で使われているかわからなくなることを避ける。
画像リンクの問題の多くは技術的な難題ではなく、メンテナンス習慣の問題です。命名規則、アップロードフロー、チェックポイントを定めておけば、問題が起きてから一枚ずつ修正するよりもはるかに効率的です。
