ホームページへの画像挿入方法|WordPress・HTML別に徹底解説【2026年最新版】

ホームページへの画像挿入方法について調べている方は、「HTMLのコードを使って画像を挿入したいが、どのタグを使えばいいかわからない」「画像をアップロードしたのに、ホームページ上に正しく表示されない」といったお悩みを抱えているのではないでしょうか。

本記事では、ホームページへの画像挿入にお悩みの方に向け、以下の内容を順番に解説します。

  • WordPressで画像を挿入する5つの手順
  • HTMLで画像を挿入する3つの手順
  • 画像挿入に使うHTMLタグ一覧
  • よくある注意点とトラブル対処法
  • 無料で使える画像素材サイト

初めてホームページに画像を追加する方でも迷わず進められるよう、手順を一つひとつ丁寧に説明しています。ぜひ最後までご覧ください。

※簡単な質問に答えるだけ!さくっと見積もりが知りたい方はこちらのシミュレーションがおすすめです。回答内容をもとに、Web幹事に登録されている5,000社の料金データから見積もりを算出します。

【無料】費用をシミュレーションする

見やすいホームページのレイアウト設計図|失敗しない11のポイント | Web幹事 見やすいホームページのレイアウト設計図|失敗しない11のポイント | Web幹事 「情報が多すぎて読まれない…」そんな悩みを解決。ユーザーを迷わせないナビゲーション配置や、成果(CV)に繋がるレイアウト構成を図解で紹介します。競合サイトに差をつ...

目次
  1. 1. WordPressで画像を挿入する5つの手順
    1. 1-1. 手順1:画像を用意する
    2. 1-2. 手順2:画像をアップロードする
    3. 1-3. 手順3:ブロック挿入する
    4. 1-4. 手順4:代替テキストを入力する
    5. 1-5. 手順5:サイズ調整をする
  2. 2. HTMLでホームページに画像を挿入する3つの手順
    1. 2-1. 手順1:画像を用意する
    2. 2-2. 手順2:画像をアップロードする
    3. 2-3. 手順3:該当箇所にHTMLタグを追加する
  3. 3. ホームページの画像挿入に使うHTMLタグ一覧
    1. 3-1. alt:画像の説明文を設定する
    2. 3-2. width/height:表示サイズを指定する
  4. 4. 貴社のホームページ制作の費用がいくらかかるか60秒で診断してみませんか?
  5. 5. 画像挿入時の注意点とトラブル対処法
    1. 5-1. 画像が荒くて見にくい場合の対処法
    2. 5-2. 表示速度が遅い場合の対処法
    3. 5-3. 画像が正しく表示されない場合の対処法
    4. 5-4. HTMLタグの記述ミスに注意
    5. 5-5. 他サイトの画像を使う際の著作権ルール
  6. 6. 画像の拡張子の選び方
    1. 6-1. jpg(jpeg)
    2. 6-2. gif
    3. 6-3. png
    4. 6-4. webp
    5. 6-5. avif
  7. 7. ホームページで使える無料画像素材サイト5選
    1. 7-1. Unsplash
    2. 7-2. 写真AC
    3. 7-3. ぱくたそ
    4. 7-4. photo AC
    5. 7-5. Pixabay
  8. 8. まとめ:ホームページへの画像挿入をマスターしよう
  9. 9. ホームページ制作の費用がわかる料金シミュレーター

WordPressで画像を挿入する5つの手順

WordPressで画像を挿入するには、標準搭載のブロックエディターを使うのが最も簡単です。以下の5つの手順に沿って進めれば、初心者の方でもスムーズに画像を挿入できます。

手順1:画像を用意する

まず、ホームページに掲載する画像を用意しましょう。用途に合わせた適切な形式を選ぶことが大切です。形式の選び方については、本記事後半の「画像の拡張子の選び方」で詳しく解説しているので、参考にしてください。

また、ファイルサイズは100KB程度を目安にしておくと、表示速度の低下を防げます。サイズが大きすぎる場合は、後述するTinyPNGなどのツールで圧縮してから使用しましょう。

手順2:画像をアップロードする

次に、用意した画像をWordPressのメディアライブラリにアップロードします。

1.WordPress管理画面の左メニューから「メディア」→「新規追加」をクリック

画像を新規追加

2.「ファイルを選択」をクリックするか、アップロードしたい画像をドラッグ&ドロップ

画像をドラッグ&ドロップ

3.アップロードが完了したら、メディアライブラリに画像が追加されたことを確認
画像は「images」や「img」などのフォルダ名で整理しておくと、のちの管理がしやすくなります。WordPressの場合、アップロードした画像は自動的に年月ごとのフォルダに整理されます。

手順3:ブロック挿入する

WordPressのブロックエディターでは、「画像ブロック」を使って記事内に画像を挿入します。

  1. 記事編集画面で、画像を挿入したい位置にカーソルを置く
  2. 左上の「+」ボタンをクリックしてブロック追加メニューを開く

ブロックを挿入する

3.検索窓に「画像」と入力し、「画像」ブロックを選択
4.「アップロード」「メディアライブラリ」「URLから挿入」の3つから選択し、手順2でアップロードした画像を選ぶ

アップロード

初心者がつまずきやすいポイント

「+」ボタンが見当たらない場合は、既存のブロックにカーソルを合わせると行の左端に「+」が
表示されます。また、ブロックの種類が多く目的のものが探しにくい場合は、

検索窓を活用するとすぐに見つかります。

手順4:代替テキストを入力する

画像を挿入したら、代替テキスト(alt属性)を設定しましょう。代替テキストとは、画像が表示されない場合に代わりに表示されるテキストのことです。

設定方法は以下のとおりです。

  1. 挿入した画像ブロックをクリックして選択状態にする
  2. 右側の「ブロック」設定パネルに「代替テキスト」の入力欄が表示される

代替えテキストの入力

3.画像の内容を具体的に説明するテキストを入力する

代替テキストには2つの重要な役割があります。

  • SEO効果: 検索エンジンが画像の内容を正確に理解しやすくなり、画像検索での表示にも影響します

  • アクセシビリティ向上: 視覚障害のある方が使用するスクリーンリーダーが画像の内容を読み上げる際に使われます

「犬」のような抽象的な説明より「公園で走っている柴犬」のように具体的に記述するのがポイントです。

手順5:サイズ調整をする

最後に、画像の表示サイズを調整します。WordPressでは挿入後に直感的なサイズ変更が可能です。

ブロックエディターでのサイズ調整方法:

  1. 画像ブロックを選択すると、画像の四隅と各辺にハンドル(丸いマーカー)が表示される
  2. ハンドルをドラッグしてサイズを変更する
  3. 右パネルの「幅」「高さ」に数値を直接入力することも可能

サイズ設定時にはアスペクト比を崩さないよう、Shiftキーを押しながらドラッグするか、「縦横比を固定」オプションを有効にしましょう。

ファイルサイズが大きい場合は、表示サイズだけでなく元画像自体を圧縮することを推奨します。

サイズ調整が完了したら「更新」または「公開」をクリックして保存すれば、WordPressへの画像挿入は完了です。

Wordpressの画像挿入方法|サイズや向きの変更方法・便利プラグインを解説【2026年最新版】 | Web幹事 Wordpressの画像挿入方法|サイズや向きの変更方法・便利プラグインを解説【2026年最新版】 | Web幹事

【無料】プロに無料で相談する

HTMLでホームページに画像を挿入する3つの手順

HTMLでホームページに画像を挿入するには、以下の3つの手順を順番に進めます。

  1. 画像を用意する
  2. 画像をアップロードする
  3. 該当箇所にHTMLタグを追加する

それぞれ詳しく解説します。

手順1:画像を用意する

用途に合わせた適切な形式の画像を用意しましょう。形式の選び方については、本記事後半の「画像の拡張子の選び方」で詳しく解説しています。

また、ファイルサイズは100KB程度を目安に調整しておくことをおすすめします。サイズが大きすぎると表示速度が低下し、ユーザーの離脱につながるためです。

手順2:画像をアップロードする

画像のアップロード方法は、利用しているサーバーによって異なります。ここでは、国内で広く使われているエックスサーバーさくらのレンタルサーバーの手順を解説します。

なお、画像は「images」や「img」などの名前のフォルダを作成し、他のHTMLファイルと区別してまとめて管理しておくと良いでしょう。

エックスサーバーでの画像のアップロード手順

  1. エックスサーバーのトップページからログインし、「ファイルマネージャ」をクリック
  2. 画面上部の「アップロード」をクリック
  3. アップロードしたい画像をドラッグするか、「ファイルを選択」で対象ファイルを指定

さくらのレンタルサーバーでの画像アップロード手順

  1. サーバコントロールパネルにログイン
  2. 「ファイルマネージャー」をクリック
  3. 「images」フォルダを選択
  4. 「アップロード」をクリックし、表示されたウィンドウの「ファイルを追加」から対象ファイルを選択

サーバーが異なれば操作画面は変わりますが、基本的な手順はどのサーバーも同様です。

アップロード後に画像が正しく表示されない場合、主に以下の2つが原因として考えられます。

  • 画像ファイルが対象ドメインの public_html 内にアップロードされていない
  • ホームページのデータ内の画像リンクやパスの記述に誤りがある

手順3:該当箇所にHTMLタグを追加する

HTMLファイルの画像を挿入したい箇所に、以下のようなimgタグを追加してください。

html

<img src="http://画像URL" alt="画像の説明" width="280" height="186" />

HTMLタグを追加したファイルをサーバーにアップロードし直せば、ホームページへの画像挿入は完了です。各属性の詳しい解説は、次の章をご覧ください。

HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 「HTMLテンプレートを使って自作のホームページを作りたい」という初心者に向けて、基本構造やコピペで使えるひな形コード、カスタマイズ方法をわかりやすく解説します。無...

【無料】プロに無料相談する

ホームページの画像挿入に使うHTMLタグ一覧

HTMLでホームページに画像を挿入する際は、以下の3つの属性を正しく記述することが基本です。

  • img src:画像ファイルの保存場所を指定する
  • alt:画像の説明文を設定する
  • width/height:画像の表示サイズを指定する

まず、画像挿入の基本となるHTMLタグ全体の構造を確認しておきましょう。

html
<img src="https://画像URL" alt="画像の説明" width="画像の幅" height="画像の高さ">

このタグを画像を表示させたい場所に記述することで、ホームページ上に画像が表示されます。それぞれの属性について詳しく解説します。img src:画像ファイルのパスを指定する

img srcは「イメージソース」と読み、画像データがどこに保存されているかを指定する属性です。srcの値に表示させたい画像のURLまたはパスを記載します。

html
<img src="https://example.com/images/photo.jpg">

パスの指定方法には、大きく分けて絶対パス相対パスの2種類があります。

指定方法

書き方の例

特徴

絶対パス

https://example.com/images/photo.jpg

ドメインから始まる完全なURL。

どこからでも同じパスで参照できる

相対パス

./images/photo.jpg

現在のHTMLファイルからの相対的な位置で指定

ファイル移動時に注意が必要

よくある記述ミスの例:

  • URLのスペルミス
  • 画像ファイルの拡張子の大文字・小文字の不一致
  • 相対パスのディレクトリ階層のずれ

画像が表示されない場合は、まずsrcのパスが正しく記述されているかを確認しましょう。

alt:画像の説明文を設定する

altは「オルト」と読み、画像に説明テキストを付与する属性です。画像の読み込みに失敗した際に、画像の代わりにこのテキストが表示されます。

html
<img src="https://example.com/images/photo.jpg" alt="東京タワーの夜景写真">

alt属性には2つの重要な役割があります。

① SEO効果:検索エンジンは画像の内容を直接読み取ることができないため、alt属性のテキストを参照して画像が何を表しているか判断します。適切なalt属性を設定することで、通常の検索結果だけでなく画像検索でもヒットしやすくなります。

② アクセシビリティ向上:視覚障害のある方が使用するスクリーンリーダー(テキスト読み上げブラウザ)は、alt属性のテキストを読み上げます。すべてのユーザーに情報を届けるために、具体的な説明を記述しましょう。

良い例・悪い例の比較:

評価

記述例

理由

✕ 悪い例

alt="画像"

内容が抽象的すぎてSEO・アクセシビリティともに効果がない

✕ 悪い例

alt="東京タワー 夜景 観光 スポット おすすめ"

キーワードの詰め込みはペナルティのリスクがある

○ 良い例

alt="東京タワーの夜景写真"

画像の内容を簡潔かつ具体的に説明している

SEO対策における画像の効果は?alt属性の使い方や注意点を初心者向けに解説 | Web幹事 SEO対策における画像の効果は?alt属性の使い方や注意点を初心者向けに解説 | Web幹事

width/height:表示サイズを指定する

widthは画像の表示幅heightは画像の表示高さを指定する属性です。それぞれpxまたはパーセントで数値を指定します。

html
<img src="https://example.com/images/photo.jpg" alt="サンプル画像" width="600" height="400">

widthとheightを両方指定する場合は、元画像の縦横比に合わせた数値を設定することが重要です。比率がずれると画像が引き伸ばされたように表示されてしまいます。

元の画像サイズがわからない場合は、以下の方法で確認できます。

  1. 画像ファイルを右クリック
  2. 「プロパティ」または「詳細を見る」をクリック
  3. 「詳細」または「概要」タブで画像のサイズを確認

また、widthのみを指定した場合、heightはwidthにあわせて自動的に決まるため、アスペクト比を保ったまま表示できます。

HTMLの属性で指定する方法のほか、CSSを使ってサイズを制御することも一般的です。特にレスポンシブ対応(スマホ・PC両方に対応したデザイン)を行う場合は、CSSでmax-width: 100%を指定する方法がよく使われます。

css
img {
  max-width: 100%;
 height: auto;
}
この記述により、親要素の幅にあわせて画像が自動でリサイズされ、アスペクト比も維持されます。

HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 「HTMLテンプレートを使って自作のホームページを作りたい」という初心者に向けて、基本構造やコピペで使えるひな形コード、カスタマイズ方法をわかりやすく解説します。無...

  プロに無料で相談する

貴社のホームページ制作の費用がいくらかかるか
60秒で診断してみませんか?

全国5,000社の見積もりから算出した、
Web幹事オリジナルの料金シミュレーターを無料でご利用いただけます。

「社内稟議の前に予算を決めたいけれど相場がわからない」
「事前に取った見積額の妥当性に不安がある」
という方は、ぜひお試しください。

まずは最初の質問です
ホームページ制作は初めてですか?
はい いいえ

画像挿入時の注意点とトラブル対処法

HTMLやWordPressでホームページに画像を挿入する際には、いくつかのトラブルが起きやすいポイントがあります。あらかじめ注意点を把握しておくことで、公開後の修正対応を減らすことができます。

画像が荒くて見にくい場合の対処法

挿入した画像が荒く表示されてしまう場合、原因は元画像の解像度・サイズが小さすぎることです。小さいサイズの画像をHTMLやCSSで引き伸ばして表示すると、ぼやけたり粗くなったりします。

対処法:

  • 元画像のサイズを少し大きいものに差し替える
  • 表示サイズに対して十分な解像度の画像を用意する
  • ただし、画像サイズが大きすぎると表示速度が低下するため、100KB程度を目安にする

表示サイズと元画像の解像度のバランスを意識して画像を用意するのが、きれいに表示させるための基本です。

表示速度が遅い場合の対処法

画像の表示に時間がかかる場合、画像のファイルサイズが大きすぎることが原因です。読み込みに時間がかかるとユーザーがページから離脱する可能性が高まり、スマホ閲覧時には通信容量を大量に消費するという問題もあります。

対処法:

  • 元画像のwidthheightを小さく調整する
  • Microsoftの「ペイント」でリサイズする
  • 無料の画像圧縮ツール「TinyPNG」を活用する

Web上での表示であれば、100KB程度のファイルサイズで十分です。TinyPNGはドラッグ&ドロップで手軽に圧縮できるため、Webに関わる方はブックマークしておくと便利です。

サイトスピードとは?計測ツールの使い方と改善方法を徹底解説【2026年最新版】 | Web幹事 サイトスピードとは?計測ツールの使い方と改善方法を徹底解説【2026年最新版】 | Web幹事 サイトスピード(表示速度)はSEO・CVR・ユーザー体験に直結する重要な指標です。PageSpeed Insightsを使った計測方法、スコアの見方、画像最適化やキャッシュ活用など具体...

画像が正しく表示されない場合の対処法

画像が表示されない・縦横比がおかしいなど、正しく表示されないケースの原因と対処法を原因別に整理します。

【縦横比が崩れている場合】

widthheightを両方指定する際に、元画像の比率と異なる数値を設定すると縦横比が崩れます。以下の方法で元のサイズを確認してから指定し直しましょう。

  1. 画像ファイルを右クリック
  2. 「プロパティ」または「詳細を見る」をクリック
  3. 「詳細」または「概要」タブで画像サイズを確認

縦横比が異なるサイズの画像が並ぶ場合は、CSSのリサイズ機能や、PowerPointのトリミング機能であらかじめ統一しておくのがおすすめです。

【画像がまったく表示されない場合】

原因として以下が考えられます。

原因

対処法

タグの記述を間違えている

HTMLタグの記述内容を再確認する

画像ファイルがアップロードされていない

サーバー上にファイルが存在するか確認する

パス(src)の指定が誤っている

絶対パス・相対パスの記述を見直す

画像ファイルが破損している

別の画像ファイルで差し替えて確認する

サーバーが混み合っている

時間をおいて再度確認する

セキュリティソフトが干渉している

セキュリティソフトの設定を確認する

HTMLタグの記述ミスに注意

HTMLタグは1文字でも誤りがあると正しく表示されません。画像が表示されないトラブルが発生したら、まず最初にHTMLタグの記述を確認しましょう。
よくある記述ミスの例:
html
<!-- ✕ 悪い例:srcのURLにスペースが入っている -->
<img src="https://example.com/images/ photo.jpg" alt="サンプル">


<!-- ✕ 悪い例:alt属性の引用符が全角になっている -->
<img src="https://example.com/images/photo.jpg" alt="サンプル">


<!-- ✕ 悪い例:属性間の半角スペースが抜けている -->
<img src="https://example.com/images/photo.jpg"alt="サンプル">


<!-- ○ 良い例 -->
<img src="https://example.com/images/photo.jpg" alt="サンプル">
特に見落としやすいのが以下の点です。
属性と属性の間の半角スペースの抜け
"(引用符)の全角・半角の混在
URLのスペルミスや拡張子の大文字・小文字の不一致
閉じタグ(/>)の記述漏れ
HTMLタグの記述ミスは目視では気づきにくいため、ブラウザの開発者ツール(F12キー)でエラーを確認する習慣をつけると効率的です。

HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 HTMLテンプレートを使ったホームページの作り方!無料配布サイトも紹介【2026年最新版】 | Web幹事 「HTMLテンプレートを使って自作のホームページを作りたい」という初心者に向けて、基本構造やコピペで使えるひな形コード、カスタマイズ方法をわかりやすく解説します。無...

他サイトの画像を使う際の著作権ルール

他のホームページで使用されている画像を無断で使用することは、著作権の侵害にあたります。基本的には自作の画像か、利用規約で使用が認められているフリー素材を使用するのが原則です。

どうしても他サイトの画像を引用したい場合は、文化庁が公示している以下のルールをすべて満たす必要があります。

① 公表された著作物であること  ⇒ 未公表の著作物は×

② 公正な慣行に合致すること  ⇒ 引用の「必然性」があること  ⇒ 引用する部分が「明確に区別」されること

③ 引用の目的上「正当な範囲内」であること  ⇒ 自分の著作物と他人の著作物との間に妥当な「主従関係」があること  ⇒ 引用する分量が必要最小限度の範囲内であること

④ 「出所の明示」が必要

 ①公表された著作物であること
 ⇒ 未公表の著作物は×
② 公正な慣行に合致すること
 ⇒ 引用の「必然性」があること
 ⇒ 引用する部分が「明確に区別」されること
③ 引用の目的上「正当な範囲内」であること
 ⇒ 自分の著作物と他人の著作物との間に妥当な「主従関係」があること
 ⇒ 引用する分量が必要最小限度の範囲内であること
④ 「出所の明示」が必要(複製以外はその慣行があるとき)

引用:文化庁|著作権制度の概要について

4つの条件をすべて満たした引用であれば法律上問題ありません。しかし条件を満たさない無断使用は著作権侵害として訴えられるリスクがあります。

無料で安心して使える素材については、「ホームページで使える無料画像素材サイト5選」で詳しく紹介します。

【プロが警告】ホームページでやってはいけない40のチェックリスト!成果を逃すNG例を徹底解説 | Web幹事 【プロが警告】ホームページでやってはいけない40のチェックリスト!成果を逃すNG例を徹底解説 | Web幹事 「ホームページを作ったのに反響がない…」とお悩みではありませんか?本記事では、Web制作のプロが「ホームページで絶対にやってはいけないこと」をデザイン・構成・運用の...

  プロに無料で相談する

画像の拡張子の選び方

ホームページに使用する画像の拡張子は、用途によって使い分けることが大切です。適切な形式を選ぶことで、画質を保ちながらファイルサイズを抑えられます。

主な画像形式の特徴と使い分けの目安を表にまとめました。

形式

主な用途

特徴

JPG

写真・フルカラー画像

高圧縮・繰り返し保存で劣化あり

GIF

アニメーション

256色制限・ファイルサイズ小

PNG

イラスト・透過画像

劣化なし・フルカラーはJPGより大きい

WebP

写真・イラスト全般

JPGより高圧縮・モダンブラウザ対応

AVIF

写真・イラスト全般

WebPよりさらに高圧縮・次世代フォーマット

それぞれの特徴を詳しく解説します。

jpg(jpeg)

「jpg」はJoint Photographic Experts Groupの略で「ジェイペグ」と読みます。最もよく使われる画像形式のひとつです。

主な特徴:

  • フルカラーを表現できる
  • 写真や複雑な色彩の画像に適している
  • ファイルサイズを小さく圧縮できる
  • 保存を繰り返すたびに画質が劣化する
  • 一度圧縮すると元のサイズには戻せない

写真をきれいに表示したい場合の第一選択肢ですが、編集を繰り返す素材の保存形式としては注意が必要です。最終的にWeb公開する直前に圧縮・保存しましょう。

gif

「gif」はGraphics Interchange Formatの略で「ジフ」と読みます。

主な特徴:

  • 色数は256色に制限されている
  • 色数が少ない分、ファイルサイズを軽くできる
  • 写真の保存には適していない
  • 背景の透過処理ができる
  • 簡易なアニメーションを作成・表示できる

フルカラーの写真やイラストには不向きですが、アニメーションを手軽に実装したい場合にはgifが有効です。ただし、アニメーション用途ではファイルサイズが大きくなりやすいため注意しましょう。

png

「png」はPortable Network Graphicsの略で「ピング」と読みます。他の形式と比べると比較的新しく開発された拡張子です。

主な特徴:

  • 図版やシンプルなイラストに向いている
  • 圧縮を繰り返しても劣化しない
  • 透過処理が可能で、透明度を自由に設定できる
  • フルカラーで表示した場合、JPGよりファイルサイズが大きくなる

ロゴやアイコン、透過が必要な画像に適しています。写真に使うとJPGよりもファイルサイズが膨らむため、写真にはJPGを使い分けるのが基本です。

webp

「WebP」はGoogleが開発した比較的新しい画像フォーマットです。

主な特徴:

  • JPGと同等の画質でファイルサイズを約25〜35%削減できる
  • 透過処理とアニメーションも対応
  • Chrome・Safari・Firefox・Edgeなど主要なモダンブラウザで対応済み
  • Internet Explorerは非対応

WordPressでWebPを活用したい場合は、プラグイン「Converter for Media」を使うと、アップロード済みの画像をまとめてWebPに変換できます。表示速度の改善とSEO効果が期待できるため、積極的に導入を検討しましょう。

avif

「AVIF」はAV1という動画コーデックをベースに開発された次世代画像フォーマットです。

主な特徴:

  • WebPよりさらに高い圧縮率を実現
  • 透過処理・HDR・広色域にも対応
  • Chrome・Firefox・Safariなど主要ブラウザで対応が進んでいる
  • Safariの古いバージョンや一部環境では非対応のケースがある

AVIFは圧縮効率に優れる一方、エンコードに時間がかかるケースがあります。また、対応状況がWebPよりも限定的なため、サイトの訪問者の利用ブラウザ環境を考慮した上で導入を判断することをおすすめします。

各画像形式の使い分けまとめ:

用途

推奨形式

Web上で写真をきれいに表示したい

JPG

ロゴ・アイコン・イラストを使いたい

PNG

アニメーションを挿入したい

GIF

ファイルサイズを最優先で軽くしたい

WebP・AVIF

透過処理が必要な画像を使いたい

PNG・WebP・AVIF

基本的には写真はJPG、イラスト・透過画像はPNGを使い、表示速度を重視する場合はWebPやAVIFへの変換も検討してみてください。

プロに無料で相談する

ホームページで使える無料画像素材サイト5選

ホームページに使う画像が手元にない場合は、無料の画像素材サイトを活用しましょう。ただし、サイトによって商用利用の可否やクレジット表記の要否が異なります。利用前に各サイトの利用規約を確認してください。

サイト名

商用利用

クレジット表記

会員登録

Unsplash

不要

不要

写真AC

不要

必要

ぱくたそ

不要

不要

illust AC

不要

必要

Pixabay

不要

不要

※利用規約は変更される場合があります。使用前に最新の規約をご確認ください。

Unsplash

Unsplash

画像引用:Unsplash

「Unsplash」は、高解像度の美しい写真が揃っている海外の無料画像サイトです。

「ビジネスと仕事」「ファッション&ビューティー」などの豊富なカテゴリから、好きな画像をダウンロードできます。商用利用可能・クレジット表記不要で使いやすく、洗練されたプロクオリティの写真が多いため、企業サイトやサービスサイトへの使用にも向いています。

  • 商用利用:
  • クレジット表記: 不要
  • 会員登録: 不要

写真AC

写真AC

画像引用:写真AC

「写真AC」は、国内の無料写真素材サービスです。個人・商用を問わず無料で使用でき、クレジット表記やリンクも一切不要です。

日本人モデルや国内の風景・ビジネスシーンなど、日本のサイトに馴染みやすい素材が豊富に揃っているのが特徴です。ただし、無料会員は1日あたりのダウンロード数に制限があります。ダウンロード制限なしで使用したい場合は有料プランへの加入を検討しましょう。

  • 商用利用:
  • クレジット表記: 不要
  • 会員登録: 必要

ぱくたそ

ぱくたそ

画像引用:ぱくたそ

「ぱくたそ」は「使って楽しい!見て楽しい」をキャッチコピーに、フリー素材を無料で配布しているサイトです。

会員登録なしで画像のダウンロードが可能。高品質かつ高解像度の写真がそろっています。ユニークな表情やシチュエーションの写真も多く、ブログやコラム記事のアイキャッチにも重宝します。利用にあたっては利用規約を事前に確認した上でご使用ください。

  • 商用利用:
  • クレジット表記: 不要
  • 会員登録: 不要

photo AC

「illust AC」は、写真ACと同じ運営会社が提供するイラスト・シルエット素材に特化した無料素材サイトです。

写真では表現しにくいイメージや、やわらかい雰囲気を出したい場合に適しています。ビジネス系アイコン・人物シルエット・季節のイラストなど幅広いジャンルをカバーしており、ホームページのアクセントとして活用しやすいのが特徴です。写真ACと同様に、無料会員は1日あたりのダウンロード数に制限があります。

  • 商用利用:
  • クレジット表記: 不要
  • 会員登録: 必要

Pixabay

「Pixabay」は、世界中のクリエイターが素材を提供している海外の大規模無料素材サイトです。

写真だけでなくイラスト・ベクター素材・動画・音楽まで幅広い素材を無料でダウンロードできます。登録素材数は数百万点以上と圧倒的な量を誇り、日本語での検索にも対応しています。商用利用可能・クレジット表記不要で使いやすく、Unsplashと並んで海外素材サイトの定番として知られています。

  • 商用利用:
  • クレジット表記: 不要
  • 会員登録: 不要

プロに無料で相談する

まとめ:ホームページへの画像挿入をマスターしよう

本記事では、ホームページへの画像挿入方法について、WordPressとHTMLの両方の手順から、タグの使い方・トラブル対処法・素材サイトまで幅広く解説しました。最後に要点を振り返っておきましょう。

  • WordPressでの画像挿入:ブロックエディターの画像ブロックを使えば、画像の用意→アップロード→ブロック挿入→代替テキスト入力→サイズ調整の5ステップで完了

  • HTMLでの画像挿入<img src="画像URL" alt="説明文" width="幅" height="高さ">のタグを挿入箇所に記述するだけで実現できる

  • alt属性の設定:SEO効果とアクセシビリティ向上の両面で重要であり、省略せず具体的に記述することが大切

  • 画像のファイルサイズ:100KB程度を目安に圧縮しておくと、表示速度の低下やユーザー離脱を防げる

  • 著作権フリーの素材活用:各サイトの利用規約を確認する

本記事の内容を参考に、ホームページへの画像挿入をぜひ実践してみてください。

「自分で対応するのは難しそう…」「もっとクオリティの高いホームページを作りたい」とお感じの方は、プロへの依頼も選択肢のひとつです。Web幹事では、貴社の目的・予算にあったホームページ制作会社を無料でご紹介しています。お気軽にご相談ください。

【無料】ホームページについて悩みを相談する。

ホームページ制作の費用がわかる料金シミュレーター

ホームページ料金シミュレーター

作りたいホームページをプロに依頼した場合、いくら費用がかかるのか? 

そんな悩みに応えるべく、Web幹事で料金シミュレーターを用意しました。

  • サイトの用途(採用サイトなど)
  • ページ数
  • デザイン
  • 機能

ホームページの制作に関する8問に選択するだけで、たった60秒で制作料金が分かります。料金の算出は無料なので、ぜひご利用ください。

【無料】ホームページ料金シミュレーターを使う

Q. ホームページに画像を入れる際に必要なタグは?

「img src」「alt」「width/height」等が挙げられます。

Q. 画像のサイズが大きくて表示に時間がかかる場合の対処方法は?

画像サイズが大きいと読み込みに時間がかかるため、画像サイズの縮小をおすすめします。具体的な方法は、PowerpointやPhotoshopの使用・オンラインツールの活用などです。詳しい手順や注意点は記事内をご確認ください。

制作会社5,000社の相場から算出

ホームページ制作
料金シミュレーター

ホームページ制作会社探しは
手間なしで
プロにお任せください

\ 相談・紹介・手数料はすべて無料です /
プロに依頼する
お電話でも承ります