ホームページに画像を挿入する方法は？きれいに表示する5つのポイントを解説！

ホームページに画像を挿入する5つのステップ

ホームページに画像を挿入する際、以下の5つのステップで行いましょう。とくにHTMLでホームページを作成する際に役立つ方法です。

1. 画像素材を準備する

ホームページの画像素材を準備する方法は以下の3つです。

高画質カメラを用意できる方は、自分で写真撮影するのがおすすめです。無料の画像素材サイトでお金をかけずに写真を手に入れる方法もあります。ハイクオリティの画像が欲しいケースでは、プロに依頼するのもいいでしょう。

2. 画像を編集する

ホームページで画像を使用するために、編集や加工が必要な場合があります。元画像と差が大きくならない程度に明るさや色合いを調整し、魅力的に見せましょう。もちろん画像をそのまま使用できる場合、加工・編集の必要はありません。 以下の3つは、画像編集で活用できるソフトです。

3. 画像をアップロードする

ホームページに画像を挿入する際、パソコンに保存されている素材をアップロードする必要があります。公開されているサーバーを確認し、素材をアップロードする先のフォルダが作成されているか確認しましょう。フォルダがない場合、新規作成しなければなりません。

公開サーバーに作成されたフォルダに素材をアップロードすると、ホームページに使用できるようになります。容量の大きな画像はアップロードできなかったり、アップロードに時間がかかったりするため、注意しましょう。

4. タグを挿入する

画像をアップロードしても、すぐに画像がホームページに挿入できるわけではなく、タグを挿入する必要があります。WordPressでは直接画像を挿入できますが、HTMLでホームページを構築している場合にはタグが必要です。

画像を挿入するタグは以下のとおりです。

画像の説明文は必須ではありませんが、SEO対策の画像検索で効果を発揮するため挿入するのがおすすめです。

5. ページを公開する

画像の挿入完了後、ページを公開もしくは更新することでユーザーがホームページを閲覧できるようになります。公開や更新をしないと画像の挿入が反映されません。

挿入した画像がきちんと表示されるか不安な場合、プレビュー画面で確認できます。画像の容量やタグの記載によっては正しく表示されないため、公開前にチェックしましょう。

ホームページに挿入する画像の拡張子3つ

ホームページに画像を挿入する場合、拡張子に注意しましょう。画像に使用される拡張子は主に以下の3つです。

1. jpg（jpeg）

画像ファイルでよく使用されている拡張子が「jpg（jpeg）」です。「Joint Photographic Experts Group」の略で、画像に適しています。メリットは、約1,677万色を表現でき、高画質の画像でもデータ容量が少ない点です。

デメリットは、画像を圧縮すると元に戻せない、何度も上書き保存するたびに画像が劣化していく点です。保存を繰り返すと白飛び、画像の潰れが生じることもあるため注意しましょう。

2. png

「jpg」とともに画像ファイルでよく使用されているのが「png」の拡張子です。「jpg」よりも新しく開発された拡張子で、多くの利点があります。メリットはフルカラーで画像を表示できるだけではなく、上書き保存しても画像が劣化しにくい、背景透過が可能な点です。

デメリットは容量の大きさです。「jpg」と異なりフルカラーの画像は容量が重くなりがちで、保存や送信の際に注意が必要です。あまり容量が大きくならないシンプルなロゴや白黒のイラストを挿入する場合には「png」が適しています。

3. gif

ホームページに簡単なアニメーションを挿入する際に用いられる拡張子が「gif」です。「Graphics Interchange Format」の略で、保存を繰り返しても圧縮しないメリットがあります。256色までしか対応していませんが、アニメーションが作れる点が「jpg」「png」との大きな差です。

色数が少ないため写真の保存には適しておらず、ロゴやアイコンに向いています。「gif」で作成したアニメーションは、スタートボタンを押さなくても再生されるため、ユーザーの注意を引くのに効果的です。

4.WebP

「WebP」はGoogleが開発した画像フォーマットで、特にWebサイトで広く利用されています。メリットは、高圧縮率を維持しながら高画質を保てる点です。「jpg」や「png」に比べてファイルサイズを大幅に小さくできるため、Webページの読み込み速度を向上させることができます。また、背景透過やアニメーションもサポートしています。

デメリットとしては、古いブラウザや一部のアプリケーションでは互換性がないことがあります。また、印刷用途には向いておらず、ファイル形式のサポートが限られる場合があります。

5.AVIF

「AVIF（AV1 Image File Format）」は、より新しい次世代画像フォーマットで、効率の良い圧縮と高い画質が特徴です。AVIFは**HEIF（High Efficiency Image File Format）**をベースにしており、圧縮効率はWebPやjpgよりも優れているため、非常に小さいファイルサイズで高品質の画像を提供できます。

メリットとしては、フルカラー対応や背景透過、そして**HDR（ハイダイナミックレンジ）**画像もサポートしている点です。これにより、よりリッチで鮮明な画像表示が可能です。

デメリットとしては、まだ新しい形式であるため、対応していないブラウザやツールが一部存在する点です。特に互換性やサポート状況に注意が必要です。

ホームページに画像が表示されない場合の解決法5つ

ホームページに画像が表示されない場合、挿入時に何かしらの不具合が生じている可能性が高いです。以下5つの症状ごとに、考えられる原因と解決策を紹介します。

1. 画像が表示されない場合

画像が適切に表示されないケースでは、以下の3つの原因が考えられます。

タグは正確に記載しないと画像が表示されません。1文字も間違えていないか確認しましょう。画像を別のソフトで開けるか確認し、ファイルが破損していないかチェックします。多くの人がサーバーを利用している場合、負荷がかかって画像が表示されにくくなるため、時間をおいて再試行しましょう。

2. 縦と横の比率に問題がある場合

画像の縦と横の比率に問題がある場合、比率を修正しましょう。画像のタグには幅や高さを指定できる部分がありますが、適切に指定されていないと画像が縦方向もしくは横方向に伸びた状態になります。正しい比率を入力することで画像のゆがみを直せます。

画像の正しい比率がわからない場合、画像を右クリックして「プロパティ」や「詳細を見る」から画像のサイズを確認しましょう。

3. 画像が粗い場合

画像が粗くて見にくい場合、使用している素材の解像度が問題となります。解像度の低い画像をさらに拡大して挿入すると、画像が粗くなります。解像度の高い画像を探せば、引き伸ばしても画像が粗くなりません。

引き伸ばす必要がないよう大きな画像を探す方法があります。可能な限り拡大や編集しなくても使用できる画像素材を探すと、解像度の悩みは無くなるでしょう。

4. 画像の表示に時間がかかりすぎる場合

画像の表示に時間がかかりすぎる場合、挿入した画像の容量が重すぎることが原因であると考えられます。画像の容量が大きすぎると、読み込みに時間がかかりユーザーがページから離脱する可能性が高いです。ユーザーの快適性が下がるとSEOにも悪影響がおよびます。

画像の表示時間を短くするためには、元の画像サイズを小さくさせます。ダウンロードする前に画像サイズを指定する、ダウンロード後に画像編集ソフトを使い解像度を下げるなどの方法で解消しましょう。ホームページに使用する画像であれば、数百キロバイトの画像で十分です。

5. ホームページを更新しても古い画像が表示される場合

ホームページに画像を挿入し公開・更新したのにもかかわらず、古い画像が表示される場合、キャッシュが更新を邪魔している可能性があります。キャッシュとは、閲覧したサイトの情報をブラウザが保存する機能です。以前に閲覧したサイトを素早く表示するのに役立ちます。

キャッシュが残っている状態でホームページを公開・更新すると、古い画像が引き続き表示されることもあります。ブラウザでキャッシュをクリアし、再度ホームページの更新を試してみましょう。

ホームページで画像を使う際の注意点3つ

ホームページで画像を使用する際には、以下の3つのポイントに注意しましょう。

1. サイトの利用規約を確認する

ホームページで使う画像素材を素材サイトからダウンロードする場合、利用規約を必ず確認しなければなりません。多くの素材サイトは無料で素材を提供していますが、利用規約を守ったうえでの使用が求められます。

利用規約で再配布が禁じられている場合は従いましょう。再配布や再販が許可されていない場合、規約違反を犯すと著作権侵害に問われるおそれもあります。

2. 他サイトの画像使用はできるだけ控える

ホームページで素材サイト以外の他サイトから画像を使用するのは控えましょう。他サイトの写真を使用するのは禁じられてはいませんが、引用を行うには細かいルールを全てクリアする必要があります。

文化庁のホームページによれば、他のサイトから画像を引用する場合「正当な範囲で行われること」「引用する必然性があること」「引用部分が区別されていること」などの条件を満たす必要があります。自社サイトを見やすくしたい、アクセスを増やしたいという目的で画像引用を行うことはできません。

トラブルを防ぐために、他サイトからの引用は必要不可欠と考えられるケースに限定しましょう。

3. サイズや容量を適切なものにする

ホームページで画像を使用する際、サイズや容量を適切なものにしましょう。サイズや容量が大きすぎる画像を使用すると、アップロードに時間がかかる、表示されにくいなどの問題が生じます。

ホームページ上で表示される際の大きさと、実際の画像のサイズに差があることがあります。画像編集ソフトを使い、サイズや容量を適切にしてから使用しましょう。

ホームページで使える画像配布サイト4選

ホームページで使用できる画像素材をダウンロードできるおすすめサイトは以下の4つです。

1. photo AC

高品質な写真素材を探している場合「 photo AC 」がおすすめです。無料会員登録するだけで、約650万点の写真素材の中から必要な画像をダウンロードできます。切り抜き・サイズ変更などの加工が自由なのもうれしいポイントです。

人物写真素材も数多く用意されており、モデルの許可済みで安心して使用できます。ビジネス、スポーツ、季節・行事、背景などさまざまなジャンルの画像があるため、必要な素材が見つかるでしょう。

2. ぱくたそ

日本人の人物画像を使いたい場合「ぱくたそ」の利用がおすすめです。有料販売や枚数制限は一切なく、すぐにフリー素材をダウンロードできます。 AI画像素材や人物など67ものカテゴリがあり、多彩な素材を見つけられるでしょう。

とくに人物画像に力を入れており、シチュエーションや表情豊かな素材が豊富に揃っています。クレジット表記が求められる画像があるため、使用の際には注意が必要です。

3. Unsplash

グローバルなホームページを展開したい方は「 Unsplash 」がおすすめです。解像度や品質の高い写真が多く、ホームページで引き伸ばして使用しても問題ありません。

全世界のクリエイターが撮影した写真を投稿しているため、日本国内向けの画像素材サイトとはややテイストが異なる画像が多く揃っています。珍しいカテゴリも多く、国内向けのサイトでは見つかりにくい画像も検索しやすいでしょう。

4. Pixabay

「 Pixabay 」は、2,700万以上の写真素材が提供されている業界最大級の画像素材サイトです。ジャンルや素材数が非常に多いため、イメージに近い写真がきっと見つかるでしょう。

海外で撮影された写真素材も数多く含まれており、エキゾチックな画像素材が多く揃っています。日本語に対応しているため、海外の画像を日本語でも検索することができます。

まとめ

ホームページで画像を使用する場合、拡張子に注意しつつ適切に編集することが重要です。画像のサイズや容量、枚数に注意することで、パソコンでもスマートフォンでも快適に閲覧できるホームページを作成できます。必要に応じて画像素材サイトを利用し、理想的なホームページを作り上げましょう。

比較ビズは、ホームページの構築や更新、メンテナンスを請け負える業者を比較しながら選べるWebサイトです。数多くの業者を自分で比較するのはとても大変ですが、比較ビズを使用すれば条件を入力するだけで該当する業者をすぐに比較できます。これからホームページを作成しようと考えている方はぜひ1度比較ビズを利用してください。

監修者のコメント

株式会社フリージア

代表取締役 森下 和也

「WEB集客の力でクライアントを勝たせるパートナー」を目指します。SEO対策と分析に強みがあり、WEBマーケティング全般を幅広く対応。特に士業のWEB集客が得意領域です。

詳しく見る

コンテンツを作る際に画像があることによって、直感的に伝わりやすい表現になります。また、画像検索からの流入も増えるのでサイトアクセスの増加につながります。

画像の挿入方法がわかったなら、ぜひオリジナル画像を作成することも同時に学んでみてください。表現の幅が広がり、伝えたいことを正確に伝えることができるようになります。

慣れないうちは試行錯誤が必要ですが、一度でも自分で画像作成を経験しておくと、画像作成を外部委託業者に依頼する時でもスムーズなやり取りができるようになります。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。