画像最適化

画像形式はJPG・PNG・WebP・AVIFのどれを使えばいい？

写真はWebPやAVIFを優先し、ロゴ・アイコンはSVGを使うのが今の基本です。web.devは、WebPとAVIFは従来の形式（JPG・PNG）よりおおむね圧縮効率が高いとして、できるだけ使うよう案内しています。

ただし、AVIFを使うときは、読み込めない環境に備えてJPGなどの代替ファイルもあわせて用意しておくと安心です。動くGIFは容量がとても大きいので、短い動画ファイルに変えるほうがずっと軽くなります。

形式をオーナー様が自分で選ばなくてよいケースも多くあります。ホームページの作り方によっては、JPGをアップロードすると、お客様のブラウザに合わせてWebPやAVIFに変換して届けてくれる機能が入っていることもあります。

透明な背景が必要なロゴや、背景を消した商品写真も、PNGの代わりにWebPで保存すると軽くなることが多いです。

ホームページの写真は何ピクセル・何KBでアップすればいい？

すべての写真に当てはまる決まった数字はなく、「画面に実際に表示される大きさ」を基準に決めます。スマホの画面幅いっぱいに表示する写真なら、その幅の2倍ほどのピクセルがあれば、高精細な画面でも十分なことが多いです。

スマホカメラの元画像は横4,000ピクセルを超えることがよくあり、ホームページにそのままアップロードするとほとんどのピクセルが無駄になります。大きなバナー写真と小さな一覧用のサムネイルは、サイズを別々に作っておくのがおすすめです。

容量は同じ写真でも形式や圧縮の度合いで大きく変わるので、数字を覚えるより、画面で画質を見ながら決めるほうが確実です。特にトップ画面の写真は軽くしておくと、第一印象が速く表示されます。

業種別に見ると、カフェ・飲食店はメニューのギャラリー、美容室は施術のビフォーアフター写真、オンライン販売は商品の詳細写真がいちばん重くなりやすいところです。こうした部分から確認すると効果が大きくなります。

レスポンシブ画像と遅延読み込みとは？

レスポンシブ画像とは、同じ写真を複数のサイズで用意しておき、お客様の画面に合ったサイズを1つだけ届ける方法です。HTMLのsrcset・sizesという設定を使うと、ブラウザが画面の大きさを見て最適なファイルを選びます。

遅延読み込みは、画面の下のほうにある写真を、お客様がスクロールして近づいたときに読み込む方法です。ただしweb.devは、最初の画面に見える写真、特にいちばん大きな写真には遅延読み込みを設定しないよう案内しています。かえって最初の画面の表示が遅くなるからです。

写真ごとに縦横のサイズ（width・height）を書いておくことも大切です。サイズがわからないと、写真が表示された瞬間に文章が下に押し出され、お客様が押そうとしたボタンを押し間違えることもあります。

遅延読み込みとレスポンシブ画像は、ほとんどの場合制作の段階で設定しておくものなので、オーナー様が写真を載せるたびに何かする必要はありません。ただし、きちんと設定されているかは公開前に一度確認を依頼しましょう。

オーナー様が自分で写真をアップするときは、どうやって軽くする？

管理画面で自動的に縮小してくれるホームページなら、元画像をそのままアップロードしても大丈夫です。そうでなければ、下の手順で一度縮小してからアップロードする習慣をつけましょう。

カフェの新メニューや工房の作品のように頻繁に載せる写真は、基準を一度決めておくと楽です。「ギャラリー写真は横〇ピクセル、WebP」のように制作会社と決めた基準をメモしておき、毎回同じ方法で縮小すれば大丈夫です。

スマホで撮った写真には、撮影場所などの情報が一緒に保存されていることもあります。縮小ツールにこうした情報を削除する設定があれば、オンにしておくほうが容量の面でも個人情報の面でも安心です。

1. 01載せる場所（バナー、ギャラリー、商品一覧）が画面でどれくらいの大きさで表示されるか確認します。
2. 02写真編集アプリや無料の画像圧縮ツールで、横幅をその場所に合わせて縮小します。
3. 03保存形式にWebPを選び、画質は見た目で違いがわからない程度まで下げてみます。
4. 04ファイル名を「IMG_1234」ではなく「yeonnam-cafe-handdrip.webp」のように内容がわかる名前に変えます。
5. 05アップロード後、スマホのモバイルデータ通信（Wi-Fiをオフにした状態）でページを開き、速度を確認します。

写真の説明（alt）とファイル名はどう書けばいい？

写真の説明は、写真を見られない人に「この写真が伝えている内容」を1文で教えるつもりで書けば大丈夫です。Google検索セントラルは、写真の説明を画像情報の中で最も重要な属性としており、キーワードを無理に詰め込まないよう案内しています。

飾り用の模様や背景のように内容のない写真は、説明を空にしておくのが正解です。W3Cの画像に関するガイドも、装飾用の写真は説明の値を空にするよう示しています。反対に、メニュー表のように文字が入った写真は、その文字を説明にそのまま書き写す必要があります。

ファイル名も小さな手がかりになります。Googleは「IMG00023.JPG」のような名前より、短く内容を説明するファイル名を推奨しています。英小文字とハイフン（-）で付けると、アドレスが文字化けせず管理もしやすくなります。

• よい例：「いちごの生クリームケーキ一切れ、上に生のいちごが三つ」
• 惜しい例：「ケーキ 人気店 ケーキ おすすめ ケーキ 注文」（キーワードを並べただけ）
• 惜しい例：「写真1」「image」（何の情報もない）

画像最適化でよくある失敗は？

いちばん多い失敗は、公開時は軽かったのに、運営するうちに元画像のままの写真が少しずつ積み重なって、また遅くなることです。特にギャラリー・口コミ・商品が頻繁に増えるお店でよく起こります。

メニュー表・料金表・イベント案内を写真1枚だけで載せるのも問題です。重いうえに、検索エンジンやスクリーンリーダーが内容を読み取れません。

速度は、GoogleのPageSpeed Insightsのような無料ツールにアドレスを入れるだけで確認できます。結果に画像関連の改善提案が出たら、写真から手直ししましょう。

ギャラリーの写真が数十枚あるなら、最初は数枚だけ表示し、「もっと見る」を押したときに残りを読み込む方法もあります。最初の画面がぐっと軽くなります。

画像最適化について、制作会社に何を確認すればいいですか？

写真は公開後も増え続けるので、最初に載せるときと運営するときに分けて、次の4つを確認しましょう。

• 管理画面でアップロードした写真を自動で縮小し、形式を変換してくれますか？
• 画面サイズに合った写真を選んで届けるレスポンシブ画像を使っていますか？
• トップ画面の写真の読み込み速度を、公開前に測定してもらえますか？
• 公開後も、重い写真が増えていないか点検してもらえますか？