HTMLやCSSのちょっと人には聞きづらい「基礎の話」を一から解説する本連載。今回のトピックは「HTMLで画像を差し替えるときのポイント」。書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野祐東さんが解説します。みなさんの作業の困った！が解決されますように。
画像を差し替えるときはどうすればよいですか？
画像を差し替えるときはまず、その画像が画像として表示されているのか、背景画像として使用されているのかを調べる必要があります。それを調べた上で、原則として同じサイズの画像を用意するのが確実です。
画像を差し替えるときの作業手順
1. 画像の表示方法を確認する
■開発ツールを使って表示方法を確認する
2-1. 画像のサイズとパスを調べる：
■
■画像の「実サイズ」を調べる
2-2. 画像のサイズとパスを調べる：背景画像として表示されている場合
3. 同じサイズの差し替え画像を用意する
■差し替え用の画像を用意する
■画像をトリミングする
■画像サイズそのものを変更する
■編集した画像を保存する
4. もとの画像ファイルと同じ場所に、新しい画像を保存する
5. HTMLやCSSを書き換える
さいごに
1. 画像を差し替えるときの作業手順
Webページに表示されている画像を差し替えるには、次の順序で作業をするのが効率的です。
- 画像の表示方法を確認する
- 画像のサイズと、保存されている場所（パス）を調べる
- 同じサイズの差し替え画像を用意する
- もとの画像ファイルと同じ場所に、新しい画像を保存する
- HTMLやCSSを書き換える
それぞれの具体的な作業内容を見ていきましょう。
1. 画像の表示方法を確認する
Webページに画像を表示する方法は3種類あります。
<img>タグを使って表示する
- CSSを使って背景画像として表示する
- JavaScriptでプログラム的に挿入する
今回はこのうちの1と2、HTMLまたはCSSで挿入されている画像を差し替える方法を説明します。
画像を差し替える際は、まずどのようにして画像が表示されているのかを確認します。確認にはブラウザの開発ツールを使います。
なお、この記事では実習用にサンプルデータを用意しています。以下のURLからダウンロードしてご使用ください。
https://www.r-staffing.co.jp/rasisa/wp-content/uploads/2025/05/sample-5.zip
（クリックするとzipファイルがダウンロードされます。）
■開発ツールを使って表示方法を確認する
ブラウザで、編集したいページを開きます。［Ctrl］+ ［Shift］+［I］キーを押して開発ツールを開き、［要素］タブをクリックしてページのHTMLソースコードを表示させます（図1）。
サンプルデータを使う場合は、index.htmlファイルをブラウザで開いてください。ここ以降、図ではGoogle Chromeを使用しますが、ほかのブラウザでも同じように動作します。
▲図1：開発ツールでHTMLソースコードを表示する。
開発ツール左上にある矢印アイコンの［ページ内の要素を選択して検査］をクリックし、ページに表示されている、差し替えたい画像の部分をクリックします。例では、index.htmlの一番上に表示される写真を選択しています（図2）。
▲図2：差し替えたい画像をクリックする。
2-1. 画像のサイズとパスを調べる：<img>タグで表示されている場合
画像をクリックした際、開発ツールのHTMLソースコードで<img>タグ、または
<img>タグを囲む<div>などの要素が選択される場合、画像は
<img>タグを使って表示されています（図3）。
▲図3：［ページ内の要素を選択して検査］機能で画像をクリックし、<img>タグが選択された。画像は
<img>タグで表示されていることがわかる。
■ <img>タグの書式
<img>タグではそれぞれの属性をつけることで、以下のようなことが指定されています。
これらから、画像のサイズとパスを調べます。
▲<img>タグの例。例ではsrc属性、alt属性、width属性、height属性が含まれている。
■画像の「実サイズ」を調べる
width属性とheight属性を見れば画像のサイズがわかりそうなものですが、実はそうではありません。これらの属性に書かれている画像の幅や高さが、次のどちらを指しているのかわからないからです。
- 画像の表示サイズ（画像が表示されるときのサイズ）
- 画像の実サイズ（画像ファイルの実際のサイズ）
現在のWebサイトは、PCでもスマートフォンでも閲覧できるように、画面サイズやウィンドウサイズに合わせて、画像が伸縮するように作られていることが多くなっています。
こうした、画面サイズに合わせて伸縮したり、レイアウトが変わったりするWebサイトのデザインを「レスポンシブデザイン」といいますが、レスポンシブデザインに対応したサイトの場合、画像の「表示サイズ」は、一定ではありません。
▲レスポンシブデザイン対応サイトでは、画像は画面サイズに合わせて伸縮する。
差し替える画像を作るために、知りたいのは「実サイズ」のほうです。width属性やheight属性の値が、画像の実サイズを指しているのかわかりませんし、これらの属性が書かれていないことも多いので、頼りになりません。別の方法を使って、画像の実サイズを調べます。
Google Chromeや Microsoft Edgeの開発ツールでは、<img>タグのsrc属性に指定されているパスにマウスポインタをホバーする（重ねる）と、画像の情報が表示されます。その中で、「組み込みサイズ」と書かれている行に、画像の実サイズが示されています。サンプルデータの1番上の写真画像は、1280×851ピクセルであることがわかります。
▲src属性の値にホバー。画像の実サイズは、「組み込みサイズ」を見る。
実サイズとパスがわかったら、「3. 同じサイズの差し替え画像を用意する」に進みます。
2-2. 画像のサイズとパスを調べる：背景画像として表示されている場合
別の例を見てみましょう。サンプルデータのbg.htmlファイルを開き、開発ツールの［ページ内の要素を選択して検査］機能で海の写真をクリックします。
選択されたのは<div class="card">か<p class="phrage">だけで、<img>は見当たりません（図4）。
▲図4：写真をクリックすると<div>タグが選択される。<img>タグは見当たらない。
このように、写真を選択しているのに<img>タグが見つからない場合、背景画像を探します。写真をクリックしたときに選択された要素（bg.htmlでは<div class="card">）の「スタイル」を見て、background-image、またはbackgroundプロパティを探します。サンプルデータでは、background-imageプロパティがあります。このプロパティが、背景画像を指定しています（図5）。
▲図5：選択された要素（<div class="card">）の「スタイル」を見てbackground-imageプロパティを探す。
background-imageプロパティに指定されている値、url()の () 内に書かれているのがパスです。ChromeやEdgeではこのパスにホバーすると、<img>のsrc属性と同じで、画像の情報が表示されます。
しかし、CSSの背景画像として使われる画像の情報には、実サイズに相当するものがありません。そこで、「現在のソース」の部分のURLをクリックします。新しいタブに画像が表示されます（図6）。
▲図6：URLにホバーすると画像の情報が表示され、「現在のソース」のURLをクリックする。
新しくできたタブのタイトルは「ファイル名 (幅 × 高さ)」になっています。この「幅」と「高さ」が、使われている画像の実サイズです（図7）。
▲図7：新しいタブで画像が表示される。タブのタイトルを見るとファイル名とサイズがわかる。
3. 同じサイズの差し替え画像を用意する
HTML、CSSソースコードから画像のサイズとパスを調べたら、差し替える画像を用意します。
■差し替え用の画像を用意する
画像サイズを変えると縦横比が変わって表示される像が歪んだり、ページのレイアウトが崩れたりする可能性があるので、画像を差し替えるときは原則として、もとの画像と同じサイズの画像を用意するのが確実です。
画像編集はWindowsにはじめからインストールされている「ペイント」アプリなどでできます。
画像ファイルをペイントアプリで開くには、ファイルのアイコンを右クリックして、出てきたメニューの［ペイントで編集する］をクリックします。
▲画像ファイルを右クリックして［ペイントで編集する］をクリック
画像のサイズを調整するには、トリミングする（切り抜く）方法と、画像サイズそのものを変更する方法があります。
■画像をトリミングする
画像をトリミングしてサイズを調整するには、ペイントアプリで開かれている画像のフチにある、□マークをドラッグします。左下に画像の幅と高さが表示されているので、それを見ながら、切り抜きます。
▲左下に表示されているサイズを見ながら、画像を画像のフチにある□（四角形）をドラッグして切り抜く。
■画像サイズそのものを変更する
画像をトリミングせず、サイズそのものを変更する場合は、アプリ上部にあるアイコンのうち、［サイズ変更と傾斜］をクリックします。
▲サイズを変更するときは、［サイズ変更と傾斜］をクリック
出てきたダイアログで、「サイズ変更」の［ピクセル］をクリックし、その下の「水平」「垂直」に、変更したいサイズの数値を入力します。数値を入力する前に必ず、真ん中の「縦横比を維持する」がハイライトしている（色が変わっている）ことを確認します。
入力が終わったら［OK］をクリックします。
▲ダイアログに変更したいサイズを入力
■編集した画像を保存する
編集が終わったら、Webサイトで使える画像フォーマットで保存します。［ファイル］メニュー─［名前を付けて保存］の順にクリックして、最後に［PNG画像］か、［JPEG画像］をクリックします。画像が図やイラストのように、色数が少なく輪郭がはっきりしているものならPNG画像、写真のように色数が多いならJPEG画像を選びます。
▲別名で保存するときはPNG画像かJPEG画像を選ぶ。
その後、保存ダイアログが出てきます。保存する場所については次の「4. もとの画像ファイルと同じ場所に、新しい画像を保存する」で説明します。
画像ファイルのサイズ変更を試してみたい方は、サンプルデータの「差し替え画像」の中にあるファイルをご使用ください。
4. もとの画像ファイルと同じ場所に、新しい画像を保存する
差し替える画像は、もとの画像ファイルと同じ場所に保存します。
サンプルデータの場合は、「images」フォルダの中に保存します。ファイル名は、もとの画像ファイルと同じにして上書きしてもかまいませんし、新しいファイル名をつけてもかまいません。サンプルデータでは、「images」フォルダの中に、「pastel.jpg」というファイル名で保存しています。
新しいファイル名をつけるときは、半角英数字とハイフン（-）、アンダースコア（_）を使います。Webサイトで使用できない文字もありますので、全角文字やその他の記号は使わないのが安全です。
▲編集したファイルは、もとの画像ファイルと同じ場所に保存する。
5. HTMLやCSSを書き換える
画像の編集が終わったら、HTMLファイル、またはCSSファイルを書き換えます。 ここでは、サンプルデータの中にある、HTMLファイル（index.html）を書き換える例を紹介します。
テキストエディタでindex.htmlファイルを開き、差し替えたい画像を表示している<img>タグを探します。そのタグの、src属性に書かれているパスを書き換えます。もとの画像ファイルと同じ場所に新しい画像を保存していれば、ファイル名の部分だけ書き換えます。
新しく作った画像をもとの画像と同じ場所に保存すれば、パスの書き換えが最小限で済み、間違いを減らせます。また、画像ファイルが保存されている場所を1ヶ所に集約でき、管理も楽です。画像を差し替えるときは、可能なかぎり、新しく作った画像をもとの画像と同じ場所に保存することをおすすめします。
▲差し替えたい画像の<img>タグを探し、src属性を書き換える。
これで画像の差し替えは完了です。最後に、編集したファイル（ここではindex.html）をブラウザで開き、画像が正しく差し替わっているか確認します。
▲編集が終わったらブラウザで開き、正しく表示されているかを確認
さいごに
画像を差し替えるときは、いま使われている、差し替える前のものと同じサイズの画像を用意するのが確実です。そうすることで、HTMLやCSSのソースコードの編集を最小限に済ませられますし、レイアウトが崩れてしまう心配も少なくなります。
いま使われている画像の幅、高さを調べるには、ブラウザの開発ツールを使うのが便利です。開発ツールを使いこなせれば、手早く、確実に更新作業を進めることができます。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
