ホームページの画像・写真の最適サイズは?公開前の画像設定チェックリスト

ホームページの画像・写真の最適サイズは?公開前の画像設定チェックリスト

ホームページの画像・写真の最適サイズは?公開前の画像設定チェックリスト

画像を正しく取り扱わないと「ページ表示速度の低下」「画像が表示されず空白が生じる」など、様々な問題につながる可能性があります。結果として、ユーザーエクスペリエンスが低下しSEOに影響を及ぼしかねません。

こちらではWeb担当者なら知っておきたい、適切な画像サイズや画像の挿入時に留意すべきポイントをわかりやすく解説します。

目次

ホームページで使用する画像の最適サイズは?

最適な画像サイズって何ですか?

パソコンの一般的な画面サイズは1920px×1080pxですので、ホームページに適した画像サイズも「1920px×1080px」が目安となります。

ちなみに「px」とは、デジタル画像を構成する最小単位である「pixel(ピクセル)」を省略したものだよ。

画像サイズは「最適」であることが重要です。

例えば、小さすぎる場合と大きすぎる場合にどう影響があるかを簡単にまとめると、以下のようになります。

画像サイズ影響
目安より小さすぎるホームページ上で画像が大きく引き伸ばされる結果、画質が荒く見えにくくなる
目安より大きすぎる画像ファイルのデータ容量が増える結果、表示速度が低下する可能性がある

画像ファイルのデータ容量は、「200KB」を目安に、できるだけ軽い画像を利用しましょう。

Googleでは、速度が遅くなりがちなモバイル回線を考慮し、1.6MB以内のファイルサイズを目指すことを推奨しているよ!

データ容量の大きな画像をいくつも使うと、あっという間にファイルサイズが1.6MBを超えてしまいます。

表示速度が低下し、ユーザーが使いにくさを感じると「ユーザーエクスペリエンスの低下」「結果としてGoogleからの評価の低下」が懸念されるため、注意が必要です。

読み込み速度を速くするには工夫が必要です。

例えば、以下の方法が挙げられます。

  • 色数の少ない画像を使用する
  • 画像形式のPNGとJPGを使いわける

画像の最適化が重要なんですね!

「表示速度の向上」「高画質の担保」などが可能になり、結果としてSEOのよい働きにつながるんだ。

ホームページにおける画像の重要性

冒頭で「画像の使い方」とおっしゃっていましたよね?

画像をどう使うかによって、ホームページ全体の印象が左右されるんだ。

画像は、テキストだけでは表現できない雰囲気やイメージを伝えられるため、様々なホームページで積極的に使われています。

こちらでは、画像を活用している事例を3つご紹介します。

CASE 1
イメージ画像を使っているホームページ事例

イメージ画像を使っているホームページ事例
画像引用:town

小田急沿線の街の魅力を、インタビューを通して伝えているのが、プロモーションサイトの「town」です。デザインはシンプルですが、メインの写真に縦書きと横書きのテキストを組み合わせているため、まるで雑誌のようなおしゃれなデザインが特徴です。

イメージ画像を使うことで、ユーザーの興味を惹き付け、内容を読み進めたくさせるメリットがあるよ。

CASE 2
商品画像を使っているホームページ事例

株式会社トンボ鉛筆のコーポレートサイトでは、主力商品の画像が掲載されているため、何を扱っている会社なのかがひと目でわかります。

「百聞は一見にしかず」のことわざどおり、テキストを並べるよりも画像を使ったほうが、ユーザーが理解しやすくなるため、商品の購入などのコンバージョンにつながります。

CASE 3
イメージイラストを使っているホームページ事例

ロート製薬グループの「天藤製薬株式会社」が運営する「ボラギノールタウン」は、商品に関する豆知識や歴史を学べるサイトです。

単に商品の情報を提供するのではなく、「街」を楽しみながら閲覧できる工夫がされています。また、イラストが動くことで躍動感が生まれていることも、サイトの特徴の一つです。

画像の使い方によって、各社サイトの個性が出ていて面白いですね!

「自社のサイト運営目的」「商品・サービス」によって、適切な画像や使い方も異なるんだ!

よく見られるホームページには多くの画像が使われていた!

そういえば、なぜ「画像の使い方」と「SEO」が関連するのですか?

それは、ユーザーファーストを大切にしているGoogleの評価と関わりがあるからだよ。

ここで、Googleがどのように検索順位を決定しているのか、検索の仕組みとサイト評価基準について解説します。

Google検索の仕組み

Googleは検索結果画面にページを表示するために、3つの作業を行っています。

クロールとはインターネット上の情報を収集することで、Googleでは「クローラー」と呼ばれるロボットが、インターネット上を巡回し、世界中から情報を集めています。

クローラーが集めたサイトの情報を、Googleのデータベースに登録する作業がインデックスです。

インデックスする際には、キーワードや情報の新しさなどを手がかりにし、ユーザーが求めている情報と関連性が高いかを判断したうえで、適した場所に登録します。

最後に行う作業が、検索順位を決めるランキングです。ランキングはGoogleのアルゴリズムの総合得点によって決まります。

「ランキング」をつける段階で、重要なのがユーザーファーストなんだ。

サイト評価基準

Googleがランキングを行う際に最も優先するのが、ユーザーファーストです。

「ユーザーが求めている情報が書かれているか」「ユーザーにとって使いやすいか」などを第一に考え、検索順位を決めています。

「Google が掲げる 10 の事実」の冒頭では、ユーザーファーストについて以下のように述べています。

1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
Google は、当初からユーザーの利便性を第一に考えています。新しいウェブブラウザを開発するときも、トップページの外観に手を加えるときも、Google 内部の目標や収益ではなく、ユーザーを最も重視してきました。

引用:「Google が掲げる 10 の事実」

また、弊社の独自調査の結果、上位サイトほど多くの画像を使用していたことが判明しました。検索上位の平均画像枚数は「平均17枚」で、上位になるほど使用枚数が多くなっています。

ただし、画像が多ければ多いほど上位になるわけではなく、上位サイトは画像を多用したわかりやすい内容になっていると考えられます。

画像を挿入する目的は「ユーザーの理解を助けること」なんだ。だから適切に画像を使おう!

「画像の使用枚数について、調査結果が気になる!」という方は、こちらをご覧ください。

合わせて読みたい
SEO対策には画像の最適化が重要!効果的な画像の使い方と注意点を解説
【独自調査】SEO記事に必要な画像枚数は17枚?効果的な画像の使い方と注意点を解説
「Googleの検索評価に画像は関係あるの?」「SEO対策記事で画像は何枚ぐらい使えばいい?」 とお悩みの方もいらっしゃるのではないでしょうか。 そこで、画像の使用枚数とSEOでの上位表示の関係性について調査してみました…

ホームページで使用する画像形式は何が適切?

ホームぺージで使用する画像には、様々な画像形式がありますので、目的に応じて使いわけましょう。

写真ならJPEG

写真に最適な画像形式のJPEGは、フルカラーに対応しており、繊細なグラデーションを使った画像や風景写真に適しています。圧縮率も柔軟に変更できますが、一度圧縮してしまうと、元のサイズには戻せないため注意が必要です。

イラストは背景透過できるPNG

フルカラーで表現できるPNGは、主にサイトのロゴやイラストなどに使用される画像形式です。圧縮しても元のサイズに戻せるため、画質を劣化させることなく保存を繰り返せます。また、背景を透過できる機能もあります。

データ容量を重視するならWebP

SEOタイムズでは拡張子としてWebPを採用しています。

Googleが開発した、サイト向けの画像フォーマットのWebPは、優れた圧縮とサイズ縮小が特徴です。画像のWebP化で表示速度を高めることで、SEO効果とユーザーエクスペリエンスの向上が期待できます。

WebPに変換できるツールには以下があります。

JPG/PNGの変換ツールもあり

画像形式は変換ツールを使って変換できます。使いやすいツールを活用しましょう。

無料で使えるツールは、以下のとおりです。

「JPEG」と「JPG」って何が違うんですか?

実は、拡張子が違うだけで、機能面の違いはないんだ。

ホームページで使用する画質はどうすれば良い?

ホームぺージで使用する画像は「大きさ」だけではなく「画質」も重要だ!

たしかに。ECサイトの掲載画像の画質がよくないと、「買いたい!」とは思いにくいですよね。

画像はサイズの他にも、画像密度である解像度を設定できます。解像度が高ければ高いほど、細やかな画像となり、写真がきれいに表示されます。

ただし、解像度は印刷する場合に反映されるため、サイトではそれほど大きな影響はありません。

一般的なモニターのモニター解像度(スクリーン解像度)は72ppi、Windowsのパソコンは96ppiですので、画像の解像度も72~96ppiであれば、きれいに表示できます。

サイズと同じく解像度も、画像のデータ容量に大きな影響を与えます。高解像度の画像を使用するとデータ容量が大きくなるため、解像度は72~96ppiを目安に設定することをおすすめします。

ホームページで使用できるおすすめの画像素材サイト4選

ホームページで使用できる画像サイトの中でも、編集部おすすめの4選を紹介しよう!

NO 1
PhotoAC(写真AC)

PhotoAC(写真AC)
画像引用:PhotoAC
特徴・高品質な写真が無料でダウンロードできる
・国内の写真やコンテンツが多い
料金プラン・無料会員
・プレミアム会員
商用利用・可
利用時の注意点
(無料会員)
・1点ダウンロードする度に15秒の待ち時間がある
・1日にダウンロードできるのは9点まで

NO 2
Pixabay

Pixabay
画像引用:Pixabay
特徴・著作権フリーの写真やイラストなど約1,800万点が利用可能
・無料でダウンロードできる
料金プラン・無料
商用利用・可
利用時の注意点・有料画像素材サイトへのリンクが多い

NO 3
PIXTA

PIXTA
画像引用:PIXTA
特徴・品質の高さに定評がある
・写真素材やイラスト、動画素材や音楽素材など、バリエーションが豊富
料金プラン・定額制プラン
・単品購入(無料素材も若干あり)
商用利用・可
利用時の注意点・無料素材は毎週火曜日に期間限定で公開される

NO 4
Unsplash

Unsplash
画像引用:Unsplash
特徴・世界トップクラスのクオリティの高い画像が無料でダウンロードできる
・芸術性の高い写真が豊富
料金プラン・無料
商用利用・可
利用時の注意点・ナビゲーションが英語表記
こちらの記事もおすすめ
無料で使える画像検索サイト10選|類似画像や出典元を簡単に探せる方法
「画像元のURLや運用者からの許可を得たい」「似たような画像を知りたい」「画像に写っているものが何かを知りたい」というように、画像についての情報を知りたいときに画像検索サイトが非常に役に立ちます。 ここでは、画像検索サイ…

今日から使える!画像設定のチェックリスト

画像を使うときは、このチェックリストで正しく使えているかを確認しよう!

CHECK 1
ファイルサイズは1.6MB以下か?

ファイルサイズが大きすぎると、ぺージの読み込みに時間がかかって表示速度が遅くなり、ユーザービリティの低下につながります。目安は1.6MBです。

CHECK 2
画質が粗くないか?

軽量化を求めるあまり、画質が荒くなっていないかを確認しましょう。

サイト内で使用したときに「画像が見えづらくないか」と、必ず目視してみよう。

CHECK 3
altタグは設定されているか?

altタグとは、サイト上の画像を説明するためのhtmlコードです。

altタグを適切に設定して画像の代替テキストを指定することで、画像が表示されない場合でも、どのような画像なのかをユーザーに説明できます。

また、Googleの検索エンジンも、altタグを利用して画像の意味を理解しています。

そのため、altタグを使ってコンテンツの内容を伝えることによって、検索エンジンが正しく内容を理解できるようになるため、SEO効果が期待できます。

altタグは、以下のように記述します。

<img src=”画像URL” alt=”画像の説明“>

CHECK 4
著作権に問題はないか?

ホームぺージで使用する画像や写真、文章や音楽には著作権があります。

画像や写真がフリー素材でも、著作権がフリーとは限らないため、利用規約の確認が必要です。

無断で画像や写真を使用すると、著作権侵害によって企業イメージダウンしたり、炎上したりするため、フリー素材を使う場合も、商用利用の可否をしっかり確認することが重要です。

ホームページの画像・写真に関するよくある質問

ホームページ画像のサイズは変更できますか?

htmlで画像のサイズを変更する場合は、imgタグで属性として幅と高さを指定します。記述は以下のとおりです。

<img src="画像ファイル名またはURL" alt="画像の内容" width="幅" height="高さ">

ホームページの画像サイズは自動で変わりますか?

モバイル対応のサイト作成ツールを利用したり、プラグインなどの無料機能を使ったりすることで、パソコン・タブレット・スマホのデバイスに応じて自動で画像サイズを変えることもできます。

サイトの最適な解像度は?

解像度とは画像密度のことです。一般的なモニターのモニター解像度(スクリーン解像度)は72ppi、Windowsのパソコンは96ppiですので、画像の解像度も72~96ppiであれば、きれいに表示できます。

まとめ

ホームページに画像は欠かせません。画像を使用したホームぺージは、ユーザーが内容を理解しやすくなり、Googleから有益なサイトだと判断されるため、SEO効果が期待できます。

ただし、適切なサイズの画像を使用していない場合は、表示速度の低下などの問題が生じるため、ユーザーエクスペリエンスが低下し、Googleからも評価されなくなってしまいます。

ホームページに画像を追加する際には、適した画像サイズや画像形式から、解像度や著作権まで、事前にしっかりと確認することが欠かせません。

この記事を書いた人

Author Image

SEO Writer / SEOタイムズ編集部

読者インサイトを分析し、行動につながる構成を設計。E-E-A-Tを重視し、専門家監修と実データで信頼性を担保。コアアップデートやAI検索動向を常にモニタリング。一次情報の検証や実例を用いた有益な情報を発信していきます。