【HTML】外部ファイルの埋め込み方法

HTML

HTMLファイルはただのテキストを記述できるだけファイルです。当然のように画像を表示させたいことが多々あります。HTMLでは画像などは外部ファイル（そのHTMLファイルとは別のもの）と呼ばれ、専用のHTMLタグで読み込ませて埋め込む必要があります。

外部ファイルを埋め込むHTMLタグ

<img>	画像を読み込んで表示できる
<video>	動画を読み込んで表示できる
<audio>	音声を読み込んで再生できる
<iframe>	別のHTMLファイルを表示できる
<object>	様々な外部ファイルを表示できる
<embed>	様々な外部ファイルを表示できる

埋め込みタグの使い方

<img>

画像をメインに埋め込ためによく使われるHTMLタグです。下記の画像ファイルを埋め込むことができます。

JPEG	広く一般的に広まっている静止画像のファイルタイプ
GIF	最大256色の8ビット静止画像。アニメーションGIFの再生も可能
PNG	8ビット／16ビットを選べる静止画像。透過画像でよく利用される
SVG	ベクター画像（ベジェ曲線）専用の表示方法。adobe製のIllustratorで作られるファイルが有名
WebP	次世代画像形式。アニメーションも可能なPNGやJPEGの次の世代の画像形式。JPEGより30%ほど軽くなり作成も安易。今は殆どのブラウザで表示が可能
AVIF	次世代画像形式。対応ブラウザが少ない
APNG	次世代画像形式。対応ブラウザが少ない

古くからある画像形式は特に気にしなくても良いのですが、WebP／AVIF／APNGは開発中の拡張子ですので注意が必要です。WebPはPhotoshopから書き出したりWordPressに自動変換プラグインがあったりするため使い勝手が良いですが、AVIFとAPNGが広まるのはまだ先かもしれません。

このサイトも画像はWebPを利用しています。HTML上の拡張子はjpgのままですが中身はWebPです。

使い方は共通で下記のように記載します。

<img width="数字" height="数字" src="URL" alt="代替テキスト"/>

widthとheightとaltの記述は必ずしてください。特にwidthとheightはサイズが入力してあればレンダリングをスルーして別の要素を読み込むのでページ表示が高速化します。書いていないとブラウザが画像サイズを取得するために止まります。たとえ0.01秒の停止だとしても100個画像があればそこそこの停止時間になると想像できるはずです。altは空のままでいいので必ず入れましょう。

altの意味についてですが、これは画像がリンク切れや通信が不安定で表示しきれない時に表示される文字を登録できます。SEOとは関係ありません。画像自体に説明するべき情報が無いのであれば alt は空のままにします。このaltは画像が表示されない場合の以外に、視覚障害者の方がWEBページを音声で読み取っている時にも読まれますので意味のない単語は入れないようにしましょう。

<video>

動画ファイルを埋め込むためのHTMLタグです。ビデオプレイヤーも自動でついてきます。

See the Pen
video by pecoegg (@pecoegg)
on CodePen.dark

必要最低限の記述だと上記のように記述します。キャプションを表示したりオート再生にしたりと細かな属性の設定が可能です。

<audio>

音声を埋め込んで再生できます。動画を指定すれば動画の音声だけを聞かせることが可能です。下記サンプルは上の<video>と同じ動画ファイルを指定しています。残念ながら動画自体には音声が入っていないので音は出ません。

See the Pen
audio by pecoegg (@pecoegg)
on CodePen.dark

<video>と同様に属性でいくつかの設定が可能です。

<iframe>

指定したURLのページを表示します。馴染みがあるのはYou TubeやGoogle Mapのシェアだと思います。遥か昔はこの<iframe>を使ってレイアウトを分けてWEBページを作るブームがあったのですがSEOが0なので今はやっている人はいないでしょう。

<ifreme>は指定したURLのページをそのまま表示させるので、上手く活用するには表示させたい部分だけのWEBページを作る必要があります。下記は何も考えずにこのサイトを<iframe>へ表示させてみます。

See the Pen
iframe by pecoegg (@pecoegg)
on CodePen.dark

次はYou Tubeのシェア用の<iframe>を表示してみます。

See the Pen
iframe youtube by pecoegg (@pecoegg)
on CodePen.dark

同じ<iframe>ですが属性の記述がされています。このYou Tubeのように読み込み先が<iframe>に対応されていればキレイに表示させることができます。

<iframe>に表示されている内容は実際にファイルが置かれているサーバー側で処理されるので様々な機能を実装できます。ただし、指定先のサーバーで処理されるということは<iframe>で読み込むことでファイル元のサーバーに負担がかかるということです。他人のサイトを<iframe>で大量に表示させるのは迷惑行為になるので注意しましょう。

<object>と<embed>について

この2つはほぼ同じものです。どちらもHTMLページ上に画像や動画からPDFなどの外部ファイルを埋め込むことができます。時代の流れでどちらも必要とされて出現しましたが今はほぼ使われていません。

PDFを埋め込むことができるので便利なように思えますが、PDFファイルはリンクを貼っておけばブラウザがPDFをちゃんとした書類として読ませてくれるためユーザーのことを考えると普通のリンクの方が良いです。

<iframe>の利用率が締めているためほぼ<object>と<embed>を利用する機会はありませんが、WordPressを使っていると embed という単語を目にする機会があります。それはEmbedカードと呼ばれ、URLを記述すると下記のようなカードが自動表示される機能です。