ホームページの写真が重いときは掲載サイズと保存形式を見直しましょう

ホームページへ写真を追加したら、その部分だけ表示が遅くなった。写真を画面で小さくしても、元の大きなファイルを読み込んでいれば、通信する量は減っていないことがあります。

島田市周辺で自社のホームページを更新する方に向け、採用済みの写真一枚を、Web掲載用に軽くする考え方を紹介します。どの写真を使うかではなく、必要な見え方を保ちながら掲載ファイルを整える作業です。

画像の大きさとファイルの容量は別のもの

「横3000ピクセル」は画像を構成する点の数を表す大きさです。「3MB」は保存されたデータの量を表す容量です。画面の表示幅を狭くしても、読み込む画像の容量がそのままなら、同じデータを受け取ります。

まず掲載場所のURLと元画像のファイル名を確認します。掲載幅は制作担当へ聞き、パソコンとスマートフォンでどれだけ大きく見せるかをそろえます。商品詳細で拡大する写真と、小さな一覧の写真は必要な細部が異なります。すべてを同じ小ささにしないでください。

元画像を残し、掲載用コピーを比較する

元画像は保存し、編集するのはコピーにします。掲載先に合う大きさへ縮小し、保存する画質を変えた候補を作ります。元画像から書き出すと、すでに圧縮した画像を何度も保存して画質を落とすことを避けられます。

WordPressの公式学習資料は、画像の大きさ、形式、圧縮を組み合わせる最適化を紹介しています。写真ではJPEGがよく使われ、WebPやAVIFも候補になります。WebPはWeb向けの画像形式です。どの形式へ変換できるか、サイトや作業環境で使えるかは制作担当に確認します。形式の名前だけで容量や画質が決まるわけではありません。

編集操作が分からない場合は、制作担当へ「掲載URLと元画像のファイル名」を渡し、「この商品の縁と表面が見えることを保って、掲載幅に合うコピーを作ってください。画像の幅、形式、容量を候補ごとに教えてください」と依頼できます。これは依頼文の例です。自分で使える画像編集ソフトがある場合も、元画像を残し、同じ項目を記録して比較します。縮小だけで十分に軽くなる場合は、無理に新しい形式へ変えなくてもかまいません。全画像を一括変換する前に、同じ一枚で候補を比較すると違いを判断しやすくなります。

容量が減っても商品が分からなくなれば採用しない

次の記録は架空例です。数値は実測した性能ではなく、比較の書き方を示しています。適正な容量は掲載目的とサイトによって変わります。

この例なら、最小容量のBではなくAを採用候補にします。現物の質感、商品の文字、輪郭など、その写真で伝える情報が残っているかを見ます。書き出し後だけでなく、実際の掲載幅と拡大機能を使って確認してください。

一枚を差し替え、サイトから確認する

確認用ページか作業環境で一枚だけ差し替えます。元のURL、画像名、容量、候補の形式、確認日を記録し、パソコンとスマートフォンで表示を見ます。写真が出るか、細部が分かるか、色や縦横比が変わっていないかを確かめます。

保存済みの表示が残ることもあるため、制作担当へ新しい画像が配信されているかを確認してもらいます。自分の画面で速く感じたことだけを効果の証拠にせず、同じ端末・通信条件で変更前後を比較します。読み込む画像ファイルの容量が減ったかも合わせて見ます。

容量を減らしてもページ全体が遅い場合は、画像以外の原因も検討が必要です。小さな画像をさらに荒くする前に、制作担当へ掲載URLと変更前後のファイル情報を渡しましょう。表示速度や検索順位の改善を、一枚の形式変更だけで保証することはできません。

あわせて読みたい記事

• 納品された商品写真を選ぶ｜掲載サイズと色・細部を確認する手順
• ホームページの修正を頼むときに伝えておきたい五つのこと

業務に合わせた整理を相談したい方は、LIFESEEDSのホームページ制作・改善のご案内をご覧ください。お問い合わせでは、現在困っている場面をお聞かせください。