WEBサイトの画像の最適なサイズ：スマホ・デスクトップホームページの画像サイズ

WEBサイト用の画像における種類や、最適なサイズについて解説します。ユーザーが快適に利用できるようなホームページを作成するために、参考にしてみてください。

WEBサイトの画像におけるデバイスごとの推奨サイズ

WEBサイト画像における、デバイスごとの推奨サイズは以下のとおりです。

• パソコン：1,920px × 1,080px
• タブレット：768px × 1,024px
• スマホ：390px × 844px

px（ピクセル）とは、画像を構成する小さな点のことで、デジタル画像の最小単位を指します。ホームページに使用するアイキャッチや図解などのサイズを最適化すると、ユーザーにとって見やすいサイトになります。最適なサイズの画像を用意して、使いやすいWEBサイトを作成しましょう。

パソコン用画像の最適サイズ：1,920px × 1,080px

一般的なデスクトップパソコンやノートパソコンに最適な画像サイズは「1,920px × 1,080px」です。

画像はそのピクセル数（解像度）が、ユーザーが使用しているディスプレイのピクセル数を超えていれば、きれいに表示されます。そのため、一般的なモニターのピクセル数（解像度）である1,920px × 1,080px（フルHD）以上の画像サイズであれば、多くのユーザーの環境下で問題なく画像を表示できるでしょう。

ただし、画像サイズが大きすぎると、データ容量がかさんでしまうため、表示速度が低下してしまいます。また、目安のサイズよりも小さくても画像が引き伸ばされてしまうので、画質が粗くなり、内容を認識できなくなってしまうので注意が必要です。

タブレット用画像の最適サイズ：768px × 1,024px

タブレットは製品によって大きさが異なりますが、多くの機種に採用されているピクセル数は「768px × 1,024px」です。

これは、初代iPad miniと同じピクセル数であり、2024年2月時点で国内のタブレット市場で最もシェアされているサイズです。Apple製品のなかでは、主に以下の機種に採用されています。

• iPad 3（第6世代）
• iPad mini（第6世代）
• iPad Air2
• iPad Pro（9.7インチ）

そのほかに、以下のピクセル数もタブレットで採用されています。

• 810px x 1,080px
• 820px x 1,180px
• 834px x 1,194px

しかし、いずれのピクセル数もタブレット市場でのシェア率はまだ10%前後であるため、「768px × 1,024px」で作成すれば、多くのユーザーの需要をカバーできるでしょう。

スマホ用画像の最適サイズ：390px × 844px

スマホも製品によって大きさが異なりますが、多くの機種に採用されているピクセル数は「390px × 844px」です。

「390px × 844px」はiPhone12以降の機種で多く採用されているピクセル数で、スマホ市場全体の約20%を占めています。

スマホに採用されている主なピクセル数とシェア率は2024年2月現在、以下のとおりです。

• 390px × 844px：約20%
• 375px × 667px：約10%
• 375px × 812px：約9%
• 414px × 896px：約8%

また、主に以下の機種に採用されています。

• 390px × 844px：iPhone 12 Pro～14 Pro
• 375px × 667px：iPhone SE（第2、第3世代）
• 375px × 812px：iPhone 11 Pro、iPhone13 mini
• 414px × 896px：iPhone 11、iPhone 11 Pro MAX

市場でもシェア率が高く、多くの機種に採用されている「390px × 844px」で画像を作成するとよいでしょう。ただし、新しい機種が次々に開発されているので、最適な画像サイズが将来的に変わってくる可能性もあります。

WEBサイトの画像サイズを変更する5つの方法

1. HTMLタグで調整する

HTMLとは、ウェブページの作成のために開発されたプログラミング言語の一つです。HTMLのimgタグを利用して、指定のサイズに調整できます。サイズの指定は、ピクセル（px）でもパーセント（%）でも可能です。横幅はwidth属性、高さはheight属性を使用します。

以下のように記述してください。

• width属性
  

  <img src="画像パス" width="数値">

• height属性
  

  <img src="画像パス" height="数値">

この方法では、ブラウザ側で画像サイズの縮小や拡大をするため、元のデータ容量は変化しません。サイズの大きな画像を縮小しても、容量は減らないので注意しましょう。

また、数値を入力する際は、縦と横の比率を保たないと、画像が歪んでしまいます。

2. CSSで調整する

基本的に、画像サイズを変更する際は、HTMLよりもCSSを利用する場合がほとんどです。CSSとは、プログラミング言語の一つで、ウェブページのデザインやレイアウトの設定に使用します。HTMLにクラスを指定して、クラスに対してデザインの変更をしましょう。

以下のように記述してください。

• HTMLの記述
  

  <img src="画像パス" class="クラス名">

• CSSの記述
  

  .クラス名 {
          width: "数値";
          height: "数値";
      }
      

たとえば、横幅と高さを100pxに設定する場合、横幅を示すwidthの”数値”には”100px”、高さを示すheightの”数値”にも”100px”と記述します。

HTMLでの変更と同様に、元の画像サイズは変わりません。画像を小さくして、データを圧縮したい時には不向きといえるでしょう。

3. 画像編集ソフトを使う

PhotoshopやGIMPなどの画像編集ソフトを利用したサイズの変更も可能です。複数のファイルを一括で変換できるソフトもあります。

また、画像編集ソフトは、サイズ変更以外にもさまざまな加工や編集ができるのも特徴です。無料で使えるものも、有料のものもありますが、無料の場合、一部の機能のみ使用できる場合もあるので注意しましょう。

画像のサイズ変更だけをしたい場合には、その機能さえ使用できれば問題ありませんが、幅広く活用したい人は、機能を比較してみるのがおすすめです。

4. オンラインツールを使う

オンラインツールを使うと、サイトにアクセスして画像をアップロードするだけで簡単にサイズ変更ができます。複雑な機能が少ないため、初心者でも利用しやすいでしょう。

また、多くのオンラインツールが無料で利用でき、ソフトをダウンロードする必要もありません。そのため、パソコンのスペックに関係なく使えるのも特徴です。

サイズ変更以外にも、トリミングや文字入れなどができるツールもあるので、自分の目的にあったサイトを探してみるとよいでしょう。

5. レスポンシブデザインを適用する

レスポンシブデザインとは、どのデバイスからアクセスしても、自動で最適な画像サイズに調整してくれる仕組みのことです。デスクトップ用とモバイル用の2種類のサイトを作る必要がないので、ホームページ制作の工数を減らせます。

しかし、デスクトップ画面でちょうどいい画像サイズが、必ずしもモバイルサイトでも見やすいデザインとは限りません。デスクトップ上で見やすく表示されていた画像でも、モバイルサイトにすると文字の量が多すぎたり、スクロールが長くなってしまったりする可能性があります。

レスポンシブデザインを適用する際は、モバイルサイトからサイトを閲覧するユーザーがストレスを感じないようなデザインを意識しましょう。

WEBサイトの画像サイズを最適化する3つの理由

1. ページの表示速度が上がる

画像サイズを最適化することで、データ容量が軽量化できるため、ページの表示速度が速くなります。

ページの表示速度が遅いとユーザーがストレスに感じてしまい、離脱につながってしまうでしょう。Googleがモバイル広告のランディングページを対象に実施した調査でも、以下のように離脱率が変化しています。

• 表示速度1〜3秒：32%増加
• 表示速度1〜5秒：90%増加
• 表示速度1〜6秒：106%増加
• 表示速度1〜10秒：126%増加

WEBサイトページの表示速度が遅くなる原因の多くは画像です。画像のデータ容量を軽量化するだけでも、大幅に表示速度が改善される傾向にあります。

また、Digital.comの調査によると、オンラインショッピングサイトのユーザーの約45%が表示速度の遅いWEBサイトページに悪い印象を抱いていることから、企業やブランドのイメージ低下を防ぐためにも、画像サイズの最適化は欠かせません。

2. SEO対策を強化できる

画像サイズを最適化し、WEBサイトの表示速度をあげることは、効果的なSEO対策であるため、検索結果の上位に表示されやすくなります。

SEOは「Search Engine Optimization」の略で、検索エンジンの最適化を意味する言葉です。検索エンジンの評価が高いと、検索結果の上位に表示されやすいため、多くのユーザーにWEBサイトにアクセスしてもらえる可能性が高まります。

検索エンジンの大手であるGoogleは、スマホからの検索表示に関して、ページの読み込み速度を順位づけの基準の一つとして発表しています。ホームページのアクセスを増やすには、画像サイズの最適化も欠かせない要素の一つといえるでしょう。

3. ユーザーに情報が伝わりやすくなる

最適化されたサイズの画像は、ユーザーの視認性が高くなるため、撮影した商品の魅力を十分に伝えることが可能です。

たとえば、Shopifyでもさまざまな企業やブランドが、工夫して商品撮影した画像を掲載し、ユーザーの興味を惹きつけています。一方で、画像の視認性が悪いと、ユーザーに情報が伝わりにくいだけでなく、商品の品質に疑問を抱かれ、WEBサイトからの離脱にもつながってしまうでしょう。

また、ユーザーに商品の魅力を伝えたいからといって、大きすぎる画像を使用するのはおすすめできません。大きすぎる画像はユーザーが全体像を把握しにくく、またスマホから閲覧しにくい場合がほとんどです。

ストックフォト等を利用する際は、画像が大きすぎたり小さすぎたりしないか確認したうえで使いましょう。

WEBサイトの画像のサイズ変更をするのに効果的なツール5選

WEBサイトの画像サイズを変更する方法のなかでもお伝えした、画像編集ソフトやオンラインツールのうち、おすすめのツールを紹介します。

1. Canva

Canvaは、初心者でも使いやすい直感的な操作画面のオンラインツールです。

画像サイズの変更だけでなく、豊富なテンプレートを活用した画像編集や動画編集、WEBサイト制作もできます。ソフトをインストールする必要がないため、気軽に利用できます。

また、スマホやタブレットから利用できるのも特徴です。スマホで物撮りした写真も簡単にサイズ調整ができます。

基本的に無料で使用できますが、有料プランでしか利用できない機能や素材も一部あるので注意が必要です。

2. TinyPNG

TinyPNGは、無料で同時に20枚までの画像を圧縮できるオンラインツールです。

ドラッグアンドドロップだけで、画像を圧縮できるため、複雑な操作は必要ありません。また、画質を下げずに、データ容量を軽量化できるのも特徴です。

有料プランに加入すると同時に圧縮できる枚数が無制限になります。編集作業等はできませんがアカウント登録も不要なため、気軽に利用できるでしょう。

3. iLoveIMG

iLoveIMGは、画像圧縮やサイズ変更、切り抜き、JPG変換などが無料でできるオンラインツールです。

Googleアカウントと連携することで、同時に20枚まで画像の圧縮ができます。有料プランであれば、一括で複数ファイルの画像編集も可能です。

4. Photoshop

Photoshopは、画像サイズの変更だけでなく、加工や合成などもできる画像編集ソフトです。

解像度の調整もできるため、画像の拡大や縮小だけでなく、データ容量の削減もできます。ただし、画像を拡大すると画質が粗くなってしまうので、注意しましょう。

基本的に、有料でしか利用できませんが、無料体験期間が用意されているため、サイズ変更に限らず編集作業をしたい人は、試してみるのがおすすめです。

5. GIMP

GIMPは無料で画像の拡大・縮小やデータ容量の削減ができる画像編集ソフトです。

Photoshopの多くの機能を無料で利用できるため、コストをかけずに画像サイズの最適化や編集作業ができます。サイズ変更以外にも明るさ変更やレタッチなどの編集作業もできるので、幅広く活用できます。

WEBサイトにおすすめの画像形式

WEBサイトにおすすめの画像形式は、以下のとおりです。

• JPEG
• GIF
• PNG
• SVG
• HEIC
• WebP
• TIFF

「JPEG」は、1,677万色のフルカラーを表せるため、風景写真やグラデーション画像を使用する際に適しています。一度圧縮すると元のサイズに戻せない「不可逆圧縮」という特徴があるので注意しましょう。

「GIF」は、データ容量が小さいため、連続した画像やアニメーションに適した画像形式です。一方で、256色しか表せないデメリットもあります。

JPEGと同様に1,677万色を表現できることから、WEBサイトのアイコンやロゴの使用に適しているのが「PNG」です。しかし、JPEGと異なり、圧縮しても元のサイズに戻せるので画質が劣化しません。

「SVG」は、画像サイズを変更しても画質が低下しないベクター形式の画像形式です。主にウェブサイトやアプリケーションで使用されます。ただし、線や点、曲線などを用いて画像を表現するため、写真のような複雑な陰影を表現する画像にはあまり向いていません。

「HEIC」は、JPEGの半分程度の容量で、高い画質を維持できる画像形式です。主にApple製品で用いられていますが、Windowsでも拡張機能を導入することで、閲覧できます。

「WebP」はJPEGやPNGよりも圧縮率が高い画像形式で、2010年にGoogleが開発しました。ウェブページの読み込みが速くなり、データ容量を削減できるのが特徴です。

「TIFF」は、さまざまなデータを保存でき、画質の高い画像形式であるため、色を正確に再現したり詳細な画像編集をしたりするのに向いています。一方で、数多くのデータを保持できることで、容量が大きくなりやすいのがデメリットです。

まとめ

WEBサイトの画像を最適化することで、ページの表示速度が速くなり、検索上位に表示されやすくなります。また、表示速度の速いWEBサイトはユーザーの離脱を防ぐのにも効果的です。

推奨される画像サイズはデバイスごとに異なりますが、レスポンシブデザインを採用することによってデスクトップでもスマホでも最適化されたサイズの画像を自動で表示できるようになります。

データ容量を減らすには、PhotoshopやGIMPなどのツールを利用して画像の圧縮をすると良いでしょう。また画像形式は、目的に応じてJPEG、GIF、PNGのいずれかを使用するのがおすすめです。

WEBサイト用画像のサイズに悩んでいる人は、ぜひこの記事を参考に、ユーザーがストレスを感じないホームページを作成してみてください。

文：Kana Fukuzumi