ホームページに最適化されていない画像を使用すると、スクロールが増えたり、画質の視認性や表示速度が低下したりして、ユーザーの利便性が損なわれる可能性があります。ホームページからユーザーが離脱する原因になってしまうため、特にECサイトなど売上に直結するホームページを作成する際には画像の最適化に気を配ると良いでしょう。ユーザーが快適に利用できるようなホームページを作成するために、本記事を参考にしてみてください。
ホームページに最適な画像の特徴
画像サイズ（ピクセル数）：ホームページ用としてアップロードする画像のサイズは「1,920px × 1,080px」が適切であると言われています。ただし、適切なサイズは目的や用途、表示デバイスごとに異なります。
ファイルサイズ：ホームページ画像に適切なファイルサイズは一枚あたり200KB以下です。画像サイズが適切でも、ファイルサイズが大きいと表示に時間がかかってしまいます。フリー画像の多くは、500KB以上のため、適切なファイルサイズにするためにはファイルサイズを圧縮する必要があります。
ファイル形式：一般的に推奨されるファイル形式は「PNG」「JPEG」「WebP」「AVIF」の4つで、特に「WebP」と「AVIF」は圧縮率が優れているため可能な限り使用することが推奨されています。一般的に「PNG」はイラスト、「JPEG」は写真に向いている保存形式です。
ホームページ画像におけるデバイス＆用途ごとの推奨設定
以下の設定は、ホームページにおけるデバイスや画像用途ごとの推奨設定です。
背景画像
背景画像は、WEBサイトで使われる最大サイズの画像で、ホームページやランディングページの背景として用いられるものです。
- 推奨される画像サイズ（PC）： 2,560px × 1,400px
- 推奨される画像サイズ（スマートフォン）：360px × 640px
- 推奨されるアスペクト比：16:9
- 推奨されるファイル容量：20MB
ヒーロー画像
ヒーロー画像は、WEBページの上部に表示されるメインの画像のことです。背景画像に似ていますが、縦の長さが背景画像よりも短いことがほとんどです。
- 推奨される画像サイズ（PC）：1,280px〜2,500px × 720px〜900px
- 推奨される画像サイズ（スマートフォン）：360px × 200px
- アスペクト比：16:9
- 最適なファイルサイズ：10MB
バナー画像
バナー画像とは、他のサイトを紹介するために目立たせる役割を持つ画像です。ホームページの広告バナーとして一般的によく利用されるGDN（Google Display Network）やYDA（Yahoo Display Ads）においては、広告の種類ごとに適切なサイズや容量が定められています。詳細は、各広告プラットフォームを参照してください。
- 推奨される画像サイズ（PC）：各広告プラットフォームを確認
- 推奨される画像サイズ（スマートフォン）：各広告プラットフォームを確認
- アスペクト比：各広告プラットフォームを確認
- 最適なファイルサイズ：各広告プラットフォームを確認
ブログ画像
ブログでは、一覧表示用の小さい画像であるサムネイル、記事の冒頭に挿入されるアイキャッチ、記事の途中で挿入される画像などが必要となります。ブログ全体で画像サイズを均一にすることで統一感を出すことができます。
- 推奨される画像サイズ（PC）： 1,200px × 800px
- 推奨される画像サイズ（スマートフォン）：360px × 240px
- 推奨されるアスペクト比：3:2
- 推奨されるファイル容量：3MB
ロゴ画像（長方形）
ロゴ画像とは、会社名や商品名などを文字や図でデザインしたものです。Shopify（ショッピファイ）のロゴのようにブランド名が長いロゴでは、長方形が用いられることがよくあります。
- 推奨される画像サイズ（PC）： 400px × 100px
- 推奨される画像サイズ（スマートフォン）：160px × 40px
- 推奨されるアスペクト比：4:1
- 推奨されるファイル容量：1MB
ロゴ画像（正方形）
図やイラストがメインのロゴや、文字が短いロゴにおいては、正方形もよく用いられます。
- 推奨される画像サイズ（PC）： 100px × 100px
- 推奨される画像サイズ（スマートフォン）：60px × 60px
- 推奨されるアスペクト比：1:1
- 推奨されるファイル容量：1MB
ホームページの画像サイズを変更する3つの方法
1. レスポンシブデザインを適用する
スマホやパソコン、タブレットなど、閲覧環境に応じて画像サイズが自動で調整される「レスポンシブデザイン」をホームページに採用すれば、最適なサイズでの画像表示が可能になります。作業工数が減り、メンテナンスが容易になるのはメリットですが、一方でデザインの自由度が制限されたり、デバイスによってレイアウトが崩れたりするリスクがあります。
Canvaでホームページ作成テンプレートを使ったり、WordPressでレスポンシブデザイン対応のテーマやプラグインを利用したりすれば、レスポンシブデザインに対応したホームページを手軽に作成できます。
2. オンラインツールを使う
画像サイズは、WEB上で利用できるオンラインツールを使っても変更できます。こうした画像最適化ツールを使うと、画像サイズ自体を調整できます。多くは無料で利用でき、複雑な操作が少ないため、初心者でも利用しやすいでしょう。インストール不要でパソコンのスペックに関係なく使えるのも特徴です。
こうしたオンラインツールは、画像のサイズ変更のほか、トリミングや文字入れ、ファイルサイズの圧縮などができるものもありますので、手軽にさまざまな画像加工をしたい方におすすめです。
3. 画像編集ソフトを使う
PhotoshopやGIMPなどの画像編集ソフトを活用することでも、画像サイズは変更できます。
画像編集ソフトは、オンラインツールよりも高度な編集ができ、サイズ変更以外にもさまざまな編集や加工ができるのが特徴です。特に最近では、AIを使った補正機能が充実している画像編集ソフトも多く、せっかくであれば画像編集ソフトを活用して魅力的な商品やブログ画像に仕上げたいという人におすすめです。
ホームページ画像を最適化する3つのメリット
1. ホームページの表示速度が向上する
画像を最適化することで、WEBサイトのデータ容量を軽量化できるため、ページの表示速度が速くなります。ホームページの表示速度が速ければ、ユーザーがストレスを感じず、サイトから離脱しづらくなります。モバイル広告のランディングページを対象にGoogle（グーグル）が実施した調査（英語）でも、以下のように離脱率が変化しています。
- 表示速度が1秒から3秒に変化した場合：離脱率32%増加
- 表示速度が1秒から5秒に変化した場合：離脱率90%増加
- 表示速度が1秒から6秒に変化した場合：離脱率106%増加
- 表示速度が1秒から10秒に変化した場合：離脱率126%増加
表示速度が遅くなる原因の多くは画像です。画像のデータ容量を軽量化するだけでも、大幅に表示速度が改善される傾向にあります。
2. SEO対策を強化できる
画像を最適化すると、WEBサイトの表示速度が向上して検索結果の上位に表示されやすくなり、SEO（検索エンジン最適化）の効果が期待できます。検索エンジン大手のGoogleは、スマートフォンでの検索結果の順位を決める要素の一つとして、ページの読み込み速度を考慮していると公表しています。こうした理由から、SEOの強化を目指す場合、画像の最適化も欠かせない要素の一つとなります。
3. ユーザーに商品の魅力が伝わりやすくなる
画像は最適化することで視認性が高くなり、商品の魅力が伝わりやすくなります。Shopifyでもさまざまな企業やブランドが、商品撮影した画像を最適化してユーザーの興味を惹きつけています。一方で、画像が最適化されていないと、ユーザーに商品の魅力が伝わりにくいだけでなく、商品の品質に疑問を抱かれる可能性もあります。
ホームページ画像を最適化できるツール6選
1. iLoveIMG
iLoveIMGは、完全無料で画像圧縮やサイズ変更、切り抜き、JPGへの変換などが実行できるオンラインツールです。日本語で利用できます。無料プランでは30枚まで、有料プランでは120枚まで圧縮やサイズ変更などの一括処理が行えます。
こんな方に最適：
- 無料で使いたい方
- ホームページに適した画像を手軽に作成したい方
画像最適化に関する機能：
- ファイル形式の変換
- 画像サイズの変更
- ファイルサイズの圧縮
2. Canva
Canvaは、初心者でも使いやすい直感的な操作画面が特徴のオンラインツールです。インストール不要で、オンラインやスマホやタブレットのアプリから利用できるので、スマホで物撮りした写真も簡単にサイズ調整ができます。
基本的に無料で使用できますが、有料プランでしか利用できない機能や素材も一部あります。
こんな方に最適：
- スマホで撮影した画像を簡単に編集したい方
- 直感的なインターフェースで画像をおしゃれに編集したい方
画像最適化に関する機能：
- ファイル形式の変換
- 画像サイズの変更
3. TinyPNG
TinyPNG（英語）は、無料で同時に20枚までの画像ファイルサイズを圧縮できるオンラインツールで、画質を下げずにデータ容量を軽量化できます。有料プランに加入すると一度に圧縮できる枚数が無制限になります。表記は英語ですが、操作自体はドラッグアンドドロップだけで簡単に画像を圧縮できるため、一度慣れれば問題なく操作できるでしょう。
こんな方に最適：
- 用途がデータの圧縮のみの方
- 高画質のままファイルサイズを圧縮したい方
画像最適化に関する機能：
- ファイルサイズの圧縮
4. Squoosh
Squoosh（英語）は、Googleが提供するWEBサービスで、リアルタイムで変換前後の画像を見比べながら画像の調整ができます。ファイル形式の変換や画像サイズの変更、ファイルの圧縮など画像の最適化に必要な機能が備わっています。表記は英語ですが、操作はシンプルです。
こんな方に最適：
- リアルタイムで変換後の写真を見ながら調整したい方
- 画像最適化に必要な最低限の機能をすべて使いたい方
画像最適化に関する機能：
- ファイル形式の変換
- 画像サイズの変更
- ファイルサイズの圧縮
5. Shopify
Shopifyの画像サイズ変換ツールを使えば、無料で画像サイズとアスペクト比率を変更できます。Instagram（インスタグラム）やFacebook（フェイスブック）など利用予定のSNSプラットフォームと用途を選択するだけで、簡単に画像サイズを変更できます。利用目的が各SNSへのアップロードである方におすすめです。
こんな方に最適：
- SNS向けの画像調整をしたい方
- 用途がSNS用画像のサイズ変更のみの方
画像最適化に関する機能：
- 各種SNS向けの画像サイズの変更
6. Photoshop
Photoshopは、画像サイズの変更だけでなく、最新のAIを用いた高度な加工や合成もできる画像編集ソフトです。画像の拡大や縮小だけでなく、解像度の調整によるデータ容量の削減もできます。
基本的に、有料のみとなっており価格も高価ですが、サイズ変更に限らずこれから本格的に編集作業をしたい人は無料体験版でお試ししてみても良いでしょう。
こんな方に最適：
- 画像の最適化に予算をかけられる方
- 本格的な画像編集作業をしたい方
画像最適化に関する機能：
- ファイル形式の変換
- 画像サイズの変更
ホームページにおすすめの画像ファイル形式
JPEG：1,677万色のフルカラーを表せるため、風景やグラデーションなどの写真に適しています。一度圧縮すると元のサイズに戻せない「不可逆圧縮」という特徴があるので注意しましょう。
PNG：アイコンやロゴなどのイラストに適しており、1,677万色を表現できます。JPEGと異なり、圧縮しても元のサイズに戻せるので画質が劣化しません。
WebP：JPEGやPNGよりも圧縮率が高い画像形式で、2010年にGoogleが開発しました。画像のデータ容量を抑えつつ、WEBページの読み込み速度を短縮できるのが特徴です。
AVIF：AV1 Image File Formatの略で、次世代のファイル形式です。高画質のまま圧縮することが可能で、アニメーションにも対応していますが、古いブラウザには対応していないこともあります。
まとめ
ホームページの画像は、画像サイズ（ピクセル数）やファイルサイズ、アスペクト比、ファイル形式をそれぞれ適切に調整することで最適化できます。ホームページの画像を最適化することで、ページの表示速度が速くなり、検索上位に表示されやすくなります。また、ECサイトでは商品の魅力を伝えやすくなります。
推奨される画像サイズは用途やデバイスごとに異なり、画像サイズを調整する方法も複数ありますが、レスポンシブデザインを採用することによってデスクトップでもスマホでも最適化されたサイズの画像を自動で表示できるようになります。
ホームページ用画像のサイズに悩んでいる人は、ぜひこの記事を参考に、ユーザーがストレスを感じないホームページを作成してみてください。
よくある質問
ホームページ用画像の解像度の目安は？
ホームページで使用する画像の解像度は、72〜96dpiが一般的です。印刷時には解像度が高いほど綺麗に仕上がりますが、WEBでは72〜96dpiの範囲内であれば適切に表示されます。
ホームページ用画像のファイルサイズの目安は？
ファイルサイズの目安は、1枚あたり200KB以下です。また、1ページ内ファイルサイズを1.6MB以下に抑えることで、スムーズに表示されるようになります。基本的に、200KB以下の画像であれば、1ページにつき5枚程度配置可能です。
画素数と解像度の違いは？
画素数と解像度は、どちらも画像の細かさや鮮明さを表す指標ですが、画素数は画面内のピクセルの数（px）で、解像度はピクセルの密度（dpi）を表します。パソコンやカメラのデジタルデバイスは画素数、写真や印刷物は解像度で表すことが多いです。
WEBページに最適な画像フォーマットは？
一般的に推奨されているファイル形式は「PNG」「JPEG」「WebP」「AVIF」の4つで、特に「WebP」と「AVIF」は圧縮率が優れているため可能な限り使用することが推奨されています。「JPEG」は写真に、「PNG」はイラストに向いている保存形式です。
文：Shigemi Saki
