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

この記事は約10分で読めます
Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

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

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

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

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

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

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

ホームページに使用する画像の適正サイズとは

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

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

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

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

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

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

ホームページで使用する画像形式の種類と特徴

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

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

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

JPG(JPEG)

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

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

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

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

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

GIF

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

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

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

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

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

PNG

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

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

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

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

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

ホームページで画像を挿入する2つの方法

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

WordPressを使用したホームページの場合

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

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

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

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

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

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

HTML/CSSで構成されたホームページの場合

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

  • FTPソフトをインストールしてログインする
  • 画像ファイルをFTPサーバーにアップロードする
  • 画像を挿入したい該当箇所にHTMLタグを記入する
  • 該当箇所に正しく画像が表示されていることを確認する

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

  • FTPソフトをインストールしてサーバーに接続する

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

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

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

  • 画像ファイルをFTPサーバーにアップロードする

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

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

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

  • 画像を挿入したい該当箇所にHTMLタグを記入する

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

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

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

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

  • 該当箇所に正しく画像が表示されているか確認する

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

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

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

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

日本最大級の画像素材サイト「写真AC」

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

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

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

おしゃれで高級感のある画像が豊富な「Pixabay」

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

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

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

風景や自然の画像が充実した「Unsplash」

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

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

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

画像の挿入時に注意すべき3つのポイント

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

ファイルサイズと解像度を確認する

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

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

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

使用する画像サイズは統一する

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

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

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

使用用途と使い方に注意する

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

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

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

まとめ

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

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

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

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

誰でも10分!WordPressブログの始め方

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

独自ドメインを取得するなら「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、以下のリンクから、ぜひご利用ください。

お名前.comで
独自ドメインを取得

Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

このサイトの管理人
泉 賢

GMOインターネット株式会社お名前.com事業部所属。
お名前.comのドメインに関するマーケティング業務を担当し、現在はオウンドメディアサイト運営を中心に活動中。