写真を追加するたびに、ホームページの表示が少し遅くなった気がする。スマホでは画像が出るまで待たされる。そんなときは、写真の見た目だけでなく、ファイルサイズと使い方を確認してみてください。
きれいな写真は、お店の雰囲気や商品の魅力を伝える大切な材料です。だからこそ、画質を極端に落とすのではなく、掲載場所に合う大きさへ整えることが重要です。名古屋でホームページ制作やリニューアルを検討している事業者にも役立つよう、WordPressの記事更新で実践できる画像の軽量化を整理します。
画像の「大きさ」は2種類ある
画像の大きさには、横幅・高さを表すピクセル数と、データ量を表すKB・MBがあります。横幅を小さくすれば一般にデータ量も減りますが、写真の細かさや保存形式、圧縮設定によって結果は変わります。横幅が同じだから、ファイルサイズも同じとは限りません。
スマートフォンで撮った写真は、画面いっぱいに見せるのに十分な解像度がある一方、記事内の小さな写真には過剰なことがあります。アップロード前に掲載場所を考えるだけでも、必要以上のデータを送らずに済みます。
| 確認するもの | 意味と見る場所 |
|---|---|
| 横幅・高さ | 例：1,200×800px。画像の詳細や編集画面で確認 |
| ファイルサイズ | 例：200KB。ファイル情報やメディア詳細で確認 |
| 表示する幅 | ホームページ上で実際に使う大きさ。本文幅やカード幅に合わせる |
| 画質 | 文字、輪郭、髪、素材などが自然に見えるかを目で確認 |
手順1：画像を使う場所と、必要な情報を決める
メインビジュアル、商品写真、スタッフ紹介、記事の挿絵では、必要な細かさが異なります。商品ラベルの文字や施工面の状態を見せる写真は、細部の確認が重要です。一方、雰囲気を伝えるイメージ画像は、同じ高解像度である必要はありません。
横に長い写真をスマホで小さく表示すると、肝心の被写体が見えにくくなることもあります。余分な背景を切り取り、見せたい部分を大きくするトリミングは、読みやすさと軽量化の両方に役立ちます。元の写真は別に保管し、掲載用のコピーを編集しましょう。
手順2：掲載用の横幅へ縮小する
たとえば本文に使う画像なら、横幅1,200px以内を初期の目安にして、実際のレイアウトに合わせて調整する方法があります。これは全サイト共通の正解ではありません。全画面のメイン画像、拡大して見る商品写真、高精細な端末向けの表示では、より大きな画像が適する場合もあります。
重要なのは、「大きい写真をそのまま入れて、見た目だけ小さくする」運用を避けることです。管理画面で小さく表示されていても、閲覧時に読み込むファイルが大きければ、通信量は減りません。
手順3：形式と圧縮率を選び、書き出す
写真はJPEGやWebP、透過が必要な画像はPNGやWebPなど、素材と掲載環境に合わせて形式を選びます。WebPは写真のデータ量を減らす候補になりますが、形式を変えるだけで必ず軽くなるわけではありません。書き出したファイルのサイズと見た目を比べて判断します。
このサイトのコラムでは、1枚200KB前後、最大300KB程度を運用上の目安としています。ただし、これは検索順位を保証する基準でも、画質より優先する絶対条件でもありません。図表の細かい文字が読めないなら、画像に詰め込まず本文や表として載せる方法を検討します。
仮の計算例：写真を6枚使うページの場合
1枚2MBの画像を6枚使えば、元画像だけで合計約12MBです。掲載用の画像を1枚200KBにできれば、6枚で約1.2MBになります。これはデータ量を比較した仮の例で、実際の表示速度の測定結果ではありません。速度には、サーバー、通信環境、動画、プラグインなども影響します。
同じ素材でも圧縮の結果は変わるため、最初から枚数分を一括処理するより、まず1枚を試して設定を決めると失敗を減らせます。
手順4：WordPressで適したサイズを選ぶ
アップロード後は、メディアの詳細でファイルサイズと寸法を確認します。記事に挿入するときは、必要以上に大きいサイズを選ばないようにしましょう。WordPressは通常、画像から複数のサイズを作成しますが、生成されるサイズや閲覧時に選ばれる画像はテーマ・設定によって変わります。
過去の記事に大きい画像がある場合は、閲覧数が多いページや写真の多いページから優先して見直すと、作業を絞れます。使用中の画像をメディアライブラリから削除すると、ほかのページにも影響する可能性があります。差し替え前に利用箇所を確認し、必要なら制作会社へ相談してください。
手順5：スマホで読みやすさと表示を確認する
- 商品名や図の文字が、拡大しなくても読めるか
- 人物の輪郭や髪、壁の質感が不自然につぶれていないか
- スマホの切り取り位置で、被写体が欠けていないか
- 画像が出る前後に、本文やボタンが大きく動かないか
- 記事一覧のサムネイルでも、内容が判別できるか
普段のWi-Fiだけで確認すると、通信が遅い環境での読み込みに気づきにくいことがあります。可能ならスマホのモバイル通信でも確認し、同じ条件で変更前後を比べます。画像を軽くしても遅さが残る場合は、画像以外の原因も調べる必要があります。
更新担当者が迷わないルールを作る
担当者が変わるたびに保存方法が違うと、画像の重さもばらつきます。「元画像は保管」「掲載用は横幅を調整」「書き出し後にサイズ確認」「公開後にスマホでチェック」という短い手順を共有しておくと、毎回の判断が減ります。
フルコンテンツでは、デザインを作ることに加え、事業者が無理なく使い続けられるホームページを大切にしています。写真の魅力と読み込みの負担を両方考えることも、そのための小さな工夫です。
次に画像を追加するときは、アップロード前にファイル情報を一度開いてみてください。写真を減らす前に、サイズを整える余地が見つかるかもしれません。