スマートフォンで撮った写真を、そのままホームページへ載せると、画面では小さく表示されても大きなデータを読み込む場合があります。
写真が重いと、表示が遅い、通信量が増える、画像が出るまでレイアウトが動くなど、利用者がページを読む前に離れる原因になります。
画像は、表示する大きさに合わせた縦横サイズへ縮小し、用途に合う形式と圧縮を使うことが基本です。
こんな方に向けて書いています
ホームページやブログへ写真を自分で追加しており、容量やサイズの違いが分からない方。
「縦横サイズ」と「容量」は違う
画像には、ピクセルで表す縦横サイズと、KB・MBで表すファイル容量があります。
項目 | 意味 |
|---|---|
縦横サイズ | 画像の細かさ・幅・高さ |
ファイル容量 | 通信で読み込むデータ量 |
形式 | JPEG、PNG、WebP、AVIF等 |
圧縮 | 見た目を保ちながら容量を減らす処理 |
4000ピクセルを超える写真を、画面上では600ピクセルで表示している場合、必要以上に大きなデータを送っている可能性があります。
写真が重いと起きること
- 最初の画面が表示されるまで時間がかかる
- モバイル通信のデータ量が増える
- 画像表示後に文章やボタンが動く
- 複数写真のギャラリーが操作しにくい
- 管理画面へのアップロードも遅くなる
web.devは、画像がWebページで特に重い資源になりやすく、適切なサイズで配信し、送るバイト数を減らすことが性能改善につながると説明しています。
どのくらいの幅にすればよい？
必要な幅はサイト設計によって変わりますが、用途ごとに最大表示幅を基準にします。
用途 | 考え方 |
|---|---|
記事内の写真 | 本文の最大幅に合わせる |
カード画像 | カード表示の2倍程度を上限候補にする |
トップの大きな画像 | PC表示と高密度画面を考慮する |
ロゴ・図形 | 可能ならSVG等のベクター形式 |
「すべて1920ピクセルにすれば正解」という決まりはありません。サイトが自動で複数サイズを生成する場合もあります。
JPEG・PNG・WebPはどう使い分ける？
- JPEG：一般的な写真に向く
- PNG：透明背景や文字・図に使われるが、写真では重くなりやすい
- WebP：写真・図の容量を抑えやすい
- AVIF：高圧縮を期待できるが、制作環境との相性を確認する
- SVG：ロゴや単純な図形に向く
元画像を消さず、Web掲載用の書き出しを別に作ると、印刷や再編集にも使えます。
容量は何MBまで？
画像内容と用途で適切な容量は変わるため、一律の上限はありません。
ただし、記事用の一枚が数MBあり、同じページに10枚並ぶ場合は見直す価値があります。
画質を100から少し下げるだけで容量が大きく減る場合があります。細部を拡大して見る商品写真と、雰囲気を伝える背景写真では必要画質が違います。
アップロード前の5段階
- 不要な部分を切り抜く
- 表示用途に合わせて縮小する
- JPEG・WebP等の形式を選ぶ
- 見た目を確認しながら圧縮する
- PCとスマートフォンで表示確認する
ファイル名も「IMG_1234」ではなく、内容が分かる英数字にすると管理しやすくなります。
縦横比をそろえる
ブログ一覧や商品カードで写真の比率がばらばらだと、カードの高さが変わったり、主役が切れたりします。
アイキャッチは16:9、商品は4:3、人物は縦など、用途ごとに比率を決めます。
元写真を無理に引き伸ばさず、切り抜いて比率をそろえます。
代替テキストも入れる
画像が表示されない場合や、画面読み上げを使う人のために、写真の内容を短く説明する代替テキストを設定します。
「画像」「写真」だけではなく、「客室の窓側から見たベッドと机」のように、ページ上の役割を説明します。装飾だけの画像は空欄にする場合があります。
スマートフォンで確認する
Wi-Fiだけでなく、モバイル通信でもページを開きます。
- 最初の写真がすぐ表示されるか
- スクロール中に画面が大きく動かないか
- 文字が画像へ重なって読みにくくないか
- 縦写真が大きすぎないか
- ギャラリーを操作できるか
CMSが自動最適化する場合も確認する
Next.jsや一部CMS、画像配信サービスは、画面サイズに合わせて複数画像を生成したり、新しい形式へ変換したりします。
ただし、元画像が極端に大きい、設定が無効、外部画像が最適化対象外などの場合があります。自動化されていると思い込まず、実際に読み込まれる容量を確認します。
画質を落としすぎない
圧縮を強くしすぎると、料理、商品、客室の細部がにじみ、事業の印象を下げます。
人物の肌、文字が写る看板、細かな商品は、実際の表示サイズで確認しながら調整します。容量の小ささだけを目標にせず、目的を果たせる画質を残します。
PageSpeed Insightsで確認する
GoogleのPageSpeed Insightsなどを使うと、大きすぎる画像、次世代形式、表示サイズなどの改善候補を確認できます。
点数だけを追うのではなく、実際のスマートフォン表示と合わせて見ます。外部予約システムや動画など、自分で変更できない要素も分けて考えます。
まとめ
ホームページ写真は、表示サイズに合わせて縮小し、写真向けの形式と圧縮を使います。
元画像をそのまま載せず、用途、縦横比、容量、代替テキストを確認してください。画像を軽くすることは、見た目を悪くすることではなく、必要な画質を必要な大きさで届ける作業です。
