ホームページで画像の適正サイズとは？貼り付け方とおすすめの素材サイト

ホームページでコンテンツを制作する際に、アイキャッチ部分、あるいは記事中に使用する画像の「適正サイズ」について、悩まれている方も多いのではないでしょうか。

画像サイズの最適化は、ページの読み込み速度を向上させるほか、読者が内容を把握しやすくなる、SEO対策の強化を図れるなど、ホームページ全体の質を高めることに繋がります。

しかし、はじめて画像を使用する場合には、以下の課題に直面することも少なくありません。

「画像の適正サイズの目安がわからない」
「画像はどこから調達すれば良いのか」
「画像の貼り付け方法を知らない」

そこで今回は、ホームページで使用する画像の適正サイズとファイル形式の解説、画像を挿入する具体的な方法、おすすめの画像素材サイトについて詳しく解説します。

上記に加えて、画像を貼り付ける際に注意すべきポイントも併せて紹介するので、ホームページ運営とコンテンツ制作に、ぜひご活用ください。

ホームページに画像を使用する場合には、画像サイズの最適化を行い、読みやすく、見やすい構成にすることが重要です。

ホームページに適した画像サイズは、一般的に広く使われている「フルHDモニター」の場合、「1920px×1080px」が目安となります。

「px」とは「pixel（ピクセル）」を省略して表したもので、デジタル画像を構成する、最小単位を指しています。

画像サイズは、上記の目安よりも小さいと、ホームページ上で引き伸ばされて表示されるため画質が荒くなり、内容を読み取りづらくなる恐れがあります。

反対に大き過ぎると、画像ファイルの容量が増えてしまい、ホームページ全体の表示速度とレスポンス速度の低下を招きます。

上記の適正サイズを目安に、画像内容の読み取りやすさと、表示速度のバランスを鑑みて、使用する画像サイズを選定しましょう。

画像ファイルには、「拡張子」と呼ばれるデータの種類を識別する文字列（形式）が存在します。

この「拡張子」は、高画質の画像に適している形式、ファイル容量を圧縮できる形式、アニメーションを再現できる形式など、種類ごとに特徴が異なるため、画像を使用する際には、特徴を覚えて用途に合った拡張子を選ぶ必要があります。

ここからは、ホームページに画像を挿入する際に使用されることの多い、３つの形式、「JPG（JPEG）」「GIF」「PNG」について、項目を分けて詳しく紹介していきます。

JPGはJPEG（Joint Photographic Experts Group）とも表記される拡張子で、画像の保存形式として、最もポピュラーな存在です。

この拡張子は、フルカラー1670万色まで表現できるため、グラデーションのように色が細かく変化している画像や色数が多い画像に適しています。

また、大きい画像を小さなファイルサイズに保存できることも特徴で、人の目で認識ができない色の差異を取り除き、情報量を減らすことで容量の軽さを実現しています。

ただし、JPG（JPEG）が採用している「非可逆圧縮」と呼ばれる画像形式は、一度でも低解像度で保存をすると、元の解像度に戻すことができません。

また、保存する度に画質が劣化する特徴もあるため、ファイルを保存するタイミングと元データの確保を意識して、取り扱う必要があります。

GIF（ジフ）とは、Graphics Interchange Formatの略称で、拡張子は「.gif」となります。

最大256色で表現されるGIFは、ロゴやアイコンなどの簡易的なイラスト、あるいは色数の少ない画像の保存に適したファイル形式で、色の透過処理も可能です。

また最大の特徴はアニメーション画像を作成できる点で、WEBページ上にGIFデータを貼り付けることで、シンプルなアニメーションを再現できます。

GIFでは「可逆圧縮」の画像形式を採用しているため、一度、低画質で保存したファイルであっても、元の画質に戻すことができます。

グラデーションがある、または色数が多い画像には適さないファイル形式なので、GIFの特徴を活かせる場面でのみ、使用すると良いでしょう。

PNG（ピング）はPortable Network Graphicsの略称で、GIFに取って代わる拡張子として開発されたファイル形式です。

JPG（JPEG)と同様に1670万色まで表現できる他、GIFの特徴である透過も可能で、低画質で保存しても元の画質に戻せる「可逆圧縮」を採用しています。

JPG（JPEG)とGIFの優れた特徴を併せ持つPNGですが、上記２つのファイル形式に比べて、保存容量が大きくなる傾向があります。

ホームページで使用する画像のファイル容量が重いと、ページの表示速度に影響がでるため、ユーザビリティの低下に繋がります。

特別な事情がない場合には、表示速度に悪影響を及ぼさないように、少しでも容量が軽いファイル形式を選ぶべきでしょう。

ここからは、ホームページに画像を挿入する方法について、パターン別に項目を分けて詳しく紹介していきます。

はじめに、WordPressを使用したホームページに画像を挿入する方法を、順を追って紹介していきます。

新規記事の作成画面の画像を挿入したい箇所で「＋」をクリックし、表示されたブロック選択画面から「画像」を選択します。

「画像」の下に表示された「アップロード」を選択、アップロードする任意の画像をクリックして「開く」を選択します。

画像が記事に挿入されていることを確認しましょう。

挿入する画像はそのままのサイズでアップロードされるので、画像サイズを変更したい場合は、アップロード前に修正を行いましょう。

また記事の作成画面と実際の公開ページでは見え方に差異がある場合もあるので、記事を公開する前に必ず「プレビュー」からチェックすることが大切です。

HTML/CSSで構成されたホームページに画像を挿入する方法は、簡単にまとめると以下の手順となります。

ここからは、各項目の具体的な作業の手順について、項目を分けて詳しくご紹介していきます。

画像をサーバーにアップロードするためにFTPソフトをインストールして、サーバーにログインを行い、対象のページへアクセスします。

FTPサーバーへ接続するには、「FTPホスト名」「ユーザー名」「パスワード」が必要になるため、契約しているサーバーレンタル会社からあらかじめ情報を取得しておきましょう。

また使用するFTPソフトは、特徴や使い勝手の良さが異なるソフトが多数あるので、用途に合ったものを選んで導入すると良いでしょう。

次にホームページに使用する画像をFTPサーバーへアップロードしていきます。

ホームページに使用しているサーバーによってアップロード方法が異なるため、詳しい手順は、契約しているサーバーレンタル会社の公式ホームページから確認を行いましょう。

画像をアップロードする際の注意点として、他のファイルと混同してしまわないように、画像ファイルは「img」や「images」など判別が容易な名称にすると管理しやすくなります。

ホームページに画像を追加するには、ホームページ上の任意の場所にHTMLタグを追加する必要があります。

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

上記のようなHTMLタグを、画像を追加したい箇所に記述することで、画像を表示させることが可能です。

最後にHTMLタグを追加したHTMLファイルを、FTPサーバーにアップロードし直すことで、ホームページへの画像挿入は完了です。

画像の挿入作業が完了したら、最後に該当箇所に正しく画像が表示されていることを確認しましょう。

問題なく画像が表示されていること、画像サイズが崩れていないこと、アップロードを行った画像が誤ったものではないかなど、全てのチェックを完了すれば、作業は終了となります。

ここからはホームページに無料で使える、特徴の異なる３つのおすすめ素材サイトについて、項目を分けて詳しくご紹介していきます。

写真ACは、会員登録者数が800万人を超える、日本最大級のフリー画像素材サイトです。

日本人をはじめ世界中の人種・民族の人物写真のほか、ビジネスシーン、生き物、植物、食べ物、建築物など、さまざまな写真素材を無料でダウンロードできます。

また画像の使用は、クレジット表記とリンク表記が一切不要な点も特徴で、商業利用する場合を除き、ほとんどのシーンで自由に使用することが可能です。

Pixabayは、ダウンロードした画像を商用、非商用を問わず、コピー、編集、再配布を行える、ホームページ運営者にとって便利なフリー画像素材サイトです。

配布されている画像は、おしゃれで高級感のある素材が多いことが特徴で、シーンやカラーバリエーションも豊富なため、多様なホームページに対応できるサイトです。

Pixabayは写真素材の他に、GIF形式のアニメーション、動画素材も数多く取り扱っているので、サイトのヘッダーやトップ画像を探している人にもおすすめです。

Unsplashとは、世界各国のフォトグラファーによる40万点を超える素材を保有する、フリー画像素材サイトです。

プロのフォトグラファーが手掛ける画像は落ち着いた色合いの写真が多く、特に風景と自然をテーマとした画像は、他サイトには無いクオリティです。

Unsplashの写真素材を使用する際の注意点として、画像サイズがサイト内で統一されていないので、使用時には必ず確認を行いましょう。

ホームページに画像を挿入する際に、注意すべきポイントについて、項目を分けて詳しく紹介していきます。

ホームページで使用する画像は、ファイル容量が大きすぎると、ページの読み込みに時間が掛かり、表示速度の遅延を招きます。

また画像サイズを過度に小さくすると、画像が引き伸ばされて解像度が下がり、内容を読み取れない、または読み取りづらくなります。

上記のようなユーザビリティを低下させてしまう要素を放置すると、検索順位に悪影響を及ぼすため、前章で紹介した適正サイズを目安にして、画像の貼り付けを行いましょう。

使用する画像サイズが不揃いの場合、コンテンツの統一感がなくなり、読みにくい、見にくいページになってしまいます。

同一コンテンツ内で使用する画像は、特別な理由が無い限り、同じサイズ、もしくは、近いサイズにするように意識しましょう。

ただし、元々小さいサイズのデータを無理やり引き伸ばす加工を施すと、解像度が著しく低くなってしまうので、その際は画像を取り替えることも検討すべきです。

フリー素材サイトから入手した画像であっても、著作物の使用用途について、制限を設けているケースもあるため注意が必要です。

法律で定められた著作権の侵害は知らなかったでは済まず、最悪の場合は10年以下の懲役又は1000万円以下の罰金を課せられます。

このような著作権トラブルを避けるためにも、サイト毎に異なっている規約の内容を必ず確認して、安心して画像を使用できる準備を整えましょう。

今回は、ホームページで画像を利用する際に覚えておきたいポイントについて解説しました。

記事中でも紹介しましたが、画像サイズの最適化は、ホームページの表示速度とレスポンスを向上させる効果があるほか、読者がコンテンツ内容を認識しやすくなるため、ユーザビリティの強化に繋がります。

ユーザビリティの高いサイトは検索エンジンから評価されて、検索順位が上がりやすくなります。

画像サイズはホームページとコンテンツの質に大きく影響する要素ですので、適当に画像を貼り付けることは避けて、必ず最適化を行いましょう。

「お名前.com」は、国内シェアNo.1のドメイン登録サービスです。

独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはずです。

独自ドメインを取得しようと考えている方は、まずは無料で好きなドメイン名を検索してみましょう。