画像の最適な表示方法とは？
- 投稿日：2019年12月10日
- 作成者：ito.y
- カテゴリ：HTML
Webページにおける画像の表示方法は大きく分けて2通りあります。
- imgタグで書きこむなど、HTMLに記述する方法
- CSSのbackgroundを用いて背景として表示する方法
Web担当者の中には、画像をページに掲載したいと思っているものの、どちらの方法で表示したらよいかわからないという方もいらっしゃるかと思われます。それぞれの表示方法には、どのような違いがあるのでしょうか。
今回は、HTMLに記述する方法とCSSを用いて背景として表示する方法の表示方法の違いや具体的な使い分け方についてわかりやすく解説します。
HTMLに記述する方法
HTMLに記述する方法はいくつかありますが、よく使われるのがimgタグを記述する方法です。しかし、なぜコーディングの作業では、HTML のimgタグが頻繁に用いられるのでしょうか。HTMLに記述するメリットとデメリットは、下記のとおりです。
メリット
- HTMLに直接書きこむため、CSSと比べると記述が楽
- 代替テキスト（alt属性）を入力できる
- 画像が表示できなかった場合、代わりに表示される
- 音声ブラウザを使用したとき、読み上げられる
- 検索エンジンが画像の内容を把握できる
デメリット
- 文字数が多いため、記述するほどHTMLのファイルサイズが大きくなる
- データ量が大きくなり、速度の遅延が起きる
- HTMLの編集作業が煩雑化しがちになる
1度でもimgタグでの記述経験があれば、画像のパスや代替テキストなど、さまざまな情報の入力が必要なタグであることをご存じだと思います。もし、たくさんの画像が表示されたホームページをHTMLで記述していく場合、膨大なデータとなり表示速度の遅延を引き起こします。
HTMLに記述する方法ならCSSを勉強しなくても画像を思いのままに表示できるのかもしれませんが、HTMLが全体的に煩雑化しがちになり、編集ミスを起こす原因にもなりかねないため注意が必要です。
CSSで背景として表示する方法
一方で、CSSに記述する方法としてはbackgroundプロパティを用いて記述します。CSSで表示するメリットとデメリットは、下記のとおりです。
メリット
- 画像を表示するclassを1個作れば、様々な箇所で使いまわせる
- imgタグより文字数の少ないclassを使えば、HTMLのファイルサイズの肥大化を軽減できる
デメリット
- CSSが呼び出せなかった場合、画像が表示されなくなる
- 代替テキスト（alt属性）を入力できない
- 音声ブラウザを使用したとき、読み上げられない
- 検索エンジンが画像の内容を把握できない
CSSを利用すればHTMLの煩雑化を防ぎ、管理自体がしやすくなります。ただし、画像をCSSで背景として表示するため、代替テキストを入力することはできません。
代替テキストを意識したWebサイト作りとは？
Webサイトは、さまざまな人が閲覧します。例えば、Googleや視覚障がい者の方は、どのように閲覧していると思いますか？実は、代替テキストを用いてWebサイト内の情報を把握しています。
代替テキストとは、Webサイト内の動画や画像がアクシデントによって表示できなかった場合、代わりに表示されるテキストのことをいいます。視覚障がい者の方は、代替テキストを音声で読み上げるブラウザを用いて内容を理解しています。
また、Googleの検索エンジンのクローラーは、画像や動画の意味をあまり理解できません。その際、代替テキストがあれば、動画や画像の意味の理解を促すことができます。
コーディングの勉強をしていると、「alt属性に情報を入れましょう」とホームページや本などに書かれていますが、このalt属性こそが代替テキストを入力する部分です。HTMLで記述する場合は、alt属性に代替テキストをしっかりと入れましょう。
どちらで表示したらよい？
それぞれの画像の表示方法には、さまざまなメリットやデメリットがあることがわかりました。では、どちらで表示するべきなのでしょうか。判断のポイントは、大きく2つにわけられます。
- HTMLに記述すべき画像は「表示されないと困る画像」
- CSSで背景として表示すべき画像は「表示されなくてもあまり困らない画像」
ホームページ制作をした経験がないと、今ひとつ表示されなと困る画像と表示されなくてもあまり困らない画像の区別が難しいかもしれません。そのため、下記の具体例から区別していきましょう。
表示されないと困る画像
- コンテンツとして使用している画像
- テキストが書かれた画像
- バナー画像
表示されなくてもあまり困らない画像
- アイコン画像
- 背景画像
- 装飾目的の画像
代替テキストの重要性について理解していれば、表示されないと困る画像は、HTMLで記述した方が良いことがわかるかと思います。一方で、表示されなくてもあまり困らない画像は、CSSで記述すれば問題ありません。
まとめ
HTMLのファイルサイズを無駄に増やさないことを念頭に置いて、画像が表示されないと困る画像はHTMLで記述し、画像が表示されなくてもあまり困らないものはCSSに記述しましょう。
もし、どちらの記述方法を用いるべきかわからなくなった場合は、視覚障がい者やGoogleへの情報の伝達方法として、どちらが良いのかをイメージしてみてください。
