サイトの画像を更新する際、モバイル端末での表示品質はユーザー体験に直結します。初心者の方は、以下の項目を事前に準備することで、画像のぼやけ、読み込みの遅さ、表示不全などのよくある問題を回避できます。
1. 画像サイズとアスペクト比の確認
モバイル端末の画面幅は通常375～414px（物理ピクセル）ですが、デバイスピクセル比（DPR）を考慮する必要があります。以下のサイズを推奨します：
- 全画面画像：幅は最低750px（375px×2倍）、高さはアスペクト比に応じて調整。
- コンテンツ内挿入画像：幅はスマートフォン画面幅の約90％、340～370px程度。2倍画像で680～740pxを用意。
- アイコンや小画像：実際の表示サイズの2倍で準備。例えば50×50pxで表示する場合は100×100px。
元の大きな画像をそのまま縮小すると、無駄なデータ通信が発生します。逆に小さな画像を引き伸ばすとぼやけるため、避けてください。
2. 適切な画像形式の選択
モバイル端末では読み込み速度と互換性を優先します：
- JPEG：色彩豊かな写真に適しており、圧縮率が高い。
- PNG：透明背景が必要なアイコンやシンプルなグラフィックに最適。
- WebP：JPEG比でファイルサイズが25～35％小さく、透明にも対応。ただし一部の古い端末では非対応のため、JPEGのフォールバックを用意することを推奨。
初心者の方は、JPEGとWebPの2バージョンを用意し、ブラウザの対応状況に応じて読み込むコードを実装するとよいでしょう。技術的に難しい場合は、まずJPEGで運用し、後から最適化してください。
3. 画像の圧縮でファイルサイズを管理
モバイル端末のネットワーク環境は多様なため、画像ファイルが大きいと読み込みが遅くなります。以下の範囲に圧縮することを推奨します：
- トップページの大画像：200KB以内、できれば100KB以下。
- コンテンツ画像：100KB以内、50KB前後が理想的。
- アイコン：10KB以内。
TinyPNGやSquooshなどのオンラインツールを使用して、目視で許容できる画質を保ちながら圧縮できます。
4. 画像のaltテキストの作成
モバイル端末のすべての画像にalt属性を設定し、検索エンジンやスクリーンリーダーなどの支援技術が理解できるようにします。altテキストは簡潔に画像内容を説明し、「画像1」ではなく「会社受付エリアの写真」のように自然に記述します。キーワードを詰め込む必要はありません。
5. 異なる解像度のバージョン準備
モバイル端末の画面密度は大きく異なるため、各画像に少なくとも2つの解像度バージョンを用意します：
- 1x（標準解像度）：通常の画面向け。
- 2x（高解像度）：Retinaなどの高精細画面向け。
アクセス数が多い場合は、3xバージョンも検討してください。CSSやsrcset属性を使って異なるバージョンを指定し、ブラウザが必要に応じて読み込めるようにします。
6. モバイル端末での表示テスト
更新前に、実際のスマートフォンまたはブラウザのシミュレーターで以下を確認します：
- 画像が完全に表示され、伸びたり切れたりしていないか。
- 読み込み速度が許容範囲か（Chromeの開発者ツールのネットワークパネルで確認）。
- 画像をクリックした際に、期待通りのリンクに遷移するか（該当する場合）。
iOSとAndroidで色味に顕著な差がある場合は、カラープロファイルをsRGBに調整してください。
7. 元画像と変更履歴のバックアップ
初心者の方は、元の高解像度画像を保存しておき、後で修正できるようにします。また、更新ごとに画像名、サイズ、圧縮率、アップロード場所などを記録しておくと、問題発生時の調査に役立ちます。
上記の内容を事前に準備することで、モバイル端末の画像更新作業がスムーズになり、ユーザーのブラウジング体験も向上します。技術的な詳細が不明な場合は、サイト制作会社に相談するか、公式ドキュメントを参照してください。
