ホームページ作成の基礎｜画像の取り扱いと困った場合の対処法【2024年最新版】

白背景にテキストだけのシンプルなデザインのホームページもいいですが、お気に入りの写真やイラストなどを使って自分らしさを表現したいですよね？

ネット上ではホームページに使えるオシャレな壁紙やボタン、アイコンなど、さまざまな素材が配布されていますし、ホームページを作成する目的によっては画像が重要な役割を担うという場合もあるかと思います。

「でも、画像の貼り方がいまいちよく分からない…」「画像を貼ってみたけどなぜか表示されない…」そういった悩みを抱えている人も画像に関する基礎さえ押さえておけば、ホームページに正しく表示される画像を貼り付けることができますよ！

今回はホームページの作成時につまずきやすい画像の取り扱い方を取り上げるとともに、表示されずに困った場合の対処法についても説明します。

画像を保存するデータ形式として一般的に使われているものとしては、「JPEG」「GIF」「PNG」「TIFF」「BMP」などがありますが、ホームページの作成で使用する画像形式は「JPEG」「GIF」「PNG」の３つです。

ここではWebで使用される３つの画像形式の特徴について、それぞれ説明します。

JPEGとは「Joint Photographic Experts Group」の略で、画像の圧縮率が高くフルカラー（最大1,670万色）で保存できることから、写真に適した画像形式だと言えます。

ただし、JPEG形式は細かい色の違いを省略することで画像サイズを小さくするため、上書き保存を繰り返すと画像が劣化してしまうという欠点があります。
また、一度低解像度に圧縮してしまうと元に戻せなくなる「不可逆圧縮」を行う画像形式のため、保存の際には注意が必要です。

なお、JPEG形式で保存された画像データは、名前の最後に「.jpg」「.jpeg」という拡張子が付いています。

GIFとは「Graphics Interchange Format」の略で、圧縮を繰り返しても画像が劣化しない「可逆圧縮」を行う画像形式です。
最大色数は256色とJPEG形式に比べると少ないですが、その分データの容量を小さくすることができます。
また、色を指定することで画像の一部、もしくは全体を透明・不透明にする「透過処理」が可能です。

さらにひとつのGIFファイルに複数の画像を挿入することで、パラパラ漫画のような簡単なアニメーションが作れるのが特徴。
GIF形式は色数の少ない画像に適しているため、アイコンやボタン、ロゴなどに使用されています。拡張子はそのまま「.gif」になります。

PNGとは「Portable Network Graphics」の略で、Webでの使用を目的に開発された画像形式です。
PNG-8（8bit）とPNG-24（24bit）の２つがあり、PNG-24の場合には1677 万色での保存と、透明・不透明・半透明という３つの透過処理を行うことができます。

また、可逆圧縮を行うPNGは圧縮したデータを完全に復元できるのはもちろん、圧縮を繰り返しても画質が劣化することはありません。
GIF形式では表現しきれない画像を透過処理する場合には、PNG形式を選択するといいでしょう。

ちなみにデバイス上の画面を撮影する「スクリーンショット」ですが、MacやスマートフォンではPNGがデフォルトの画像形式になっています。
拡張子は「.png」。

普段あまり気にすることのない画像形式ですが、このようにさまざまな特徴があります。
特徴を知らずに画像を使用すると、ブラウザで見たときに画質が荒かったり表示されるのに時間がかかったりと不具合が生じてしまいます。

「写真はJPEG形式、イラストや素材はGIF・PNG形式」と覚えておけば、画像を選ぶ際も迷うことはないでしょう。

ホームページに画像を貼り付けるためには、「＜img＞」というHTMLタグを使って記述する必要があります。

基本的には「」という形で記述します。

幅と高さに関しては値がなくても画像は表示されますが、ブラウザでの表示が速くなるので指定することをおすすめします。
また、画像の説明は万が一表示されなかった場合にどういった画像が配置されているのかをテキストで表示させるためと、検索エンジンに画像の情報を伝えるために必要な要素となります。
外枠のありなしはお好みで、いらない場合には半角数字のゼロを記述すればOKです。

なお、基本的なタグだけでは画像を表示させることしかできないため、別のタグを使用して画像を配置します。
使用頻度の高いタグとしては、以下のようなものが挙げられます。

「画像を中央寄せにする」…

「画像を右寄せにする」…
「画像を左寄せにする」…
「画像を横に並べる」…改行なしで基本タグを横に並べる
「画像からリンクする」…基本タグ
「背景に画像を使用する」…

このほかにテキストに画像を回り込ませるタグや画像とテキストの位置を揃えるタグなどもあるので、必要に応じて使用するといいでしょう

HTMLタグを使用してホームページに画像を貼り付けたのに、ブラウザで確認してみたらなぜか画像が表示されていない…。
ホームページを作成していてそんな悲しい経験をしたことがある人も多いかと思います。

そうした場合でも慌てることはありません！
ここでは画像が表示されない場合に考えられる７つの主な原因とその対処法を説明します。

まず疑ってほしいのが、画像のアップロードです。当然のことながらWeb上に画像がアップロードされていなければ表示することはできません。また、「ちゃんとアップロードしているよ！」という場合でも、アップロード先が間違っていると画像は表示されません。

使用しているブラウザで「http://ページのURL/画像のファイル名」と入力してきちんと画像が表示されるのであれば、アップロードとは別の原因が考えられます。

画像をホームページに貼り付ける際に使用するHTMLタグの記述が間違っていると、画像は表示されません。

よくあるミスとしては「img src」を「img scr」と打ち間違えていたり、半角英数字でなければいけないところを全角で記述していたりといったケースが挙げられます。

画像が表示されないケースのほとんどがこの原因だと言われています。
拡張子を含む画像ファイルの名前はもちろん、大文字と小文字の区別、スペースの有無など、１文字でも違っていると正しく表示されません。
また、HTMLタグ自体の記述間違いとしては以下のようなケースがあるので、参考にしてください。

×「"C:￥～」→〇「」
×「"file://～」→〇「」

「1. 画像の形式を学ぶ」でも説明しましたが、ホームページの作成で使われる画像形式は「JPEG」「GIF」「PNG」の３つです。
このほかの画像形式のなかには、そもそもWebに対応していないものもあります。

また、ファイルの拡張子が「.gif」でも実際の画像が「TIFF」形式になっていることもあるので、本当にホームページで使用できる画像形式になっているかどうかを、ブラウザで直接開いて確認してみてください。

形式が間違っていないのに表示されない場合には、画像自体が壊れているかもしれません。
壊れてしまった画像はHTMLタグを正しく記述しても表示させることはできないので、新たに用意する必要があります。

直接リンクとは、PCなどのローカル環境に画像をダウンロードせずに、Web上にある画像のURLを直接貼り付けて使用することを言います。
表示のたびに他のサーバーサイトから画像を引っ張ってくる必要がある直接リンクはサーバーに負荷がかかるため、多くのサービス会社が禁止にしています。

使用しているサーバーが直接リンクを禁止している場合には、一旦ローカル環境に画像をダウンロードしてから貼り付けるようにしましょう。
当然ながら、画像を自身のホームページで使用してもよいのかどうかの権利確認は必要となります。

使用しているサーバーの混雑具合によって、画像をアップロードしてもなかなか表示されないケースがあります。
少し時間をおくことで画像が表示されるなら問題ありませんが、毎回表示が遅いようであればWebサーバーを変えてみるのもひとつの方法です。

上記７つの原因を確認したうえで正しい対処を行えば、「ホームページに貼り付けた画像が表示されない…」といった状況から脱却できるはずです。

特にHTMLタグの記述ミスはWeb上級者でもうっかりやってしまうことなので、画像が表示されない場合には「間違っているわけないし！」と思わずに疑ってかかるようにしてください。

「画像の貼り方も表示されない場合の対処法も分かったし、あとはHTMLタグを駆使してホームページに配置して行くのみ…！」と思われるかもしれませんが、画像はただ貼り付ければいいというわけではありません。
最適なサイズや画質などを指定することでホームページ全体の表示速度を向上させるだけでなく、ユーザーにとって見やすいページ作りにつながります。

ここではホームページで使用する画像を最適化するために、押さえておきたい４つのポイントを取り上げます。

「1.画像の形式を学ぶ」でも説明しましたが、ホームページ制作で使用する「JPEG」「GIF」「PNG」という３つの画像形式にはそれぞれ特徴があります。

色数が少ないアイコンやボタン、ロゴなどはGIF形式が適していますし、何度も同じ画像を加工したいなら画質が劣化しないPNG、背景写真として使うならJPEGと、使用する目的に合わせて画像形式を選択するといいでしょう。

印刷物として画像を使用する場合には高画質で保存する必要がありますが、ホームページで使用する場合には高画質であることがマイナスに働くケースもあります。

最近のデジタルカメラやスマートフォンで撮影した写真は、大体3,000KBから4,000KBと高画質になっています。
そのまま使用すると写真を表示させるのに時間がかかってしまったり、デバイスによっては画面に全体を表示させることができなかったりしてしまうからです。

画質を下げることでホームページ自体の読み込みが速くなるので、高画質でなくてもいい画像については目安として80KB前後になるように縮小して保存するといいでしょう。

画像がホームページ全体のスペースに対してどれだけ占めるのかということも、最適化を図るうえで重要なポイントのひとつです。

「画像を入れると華やかになるから」という理由だけでページの至るところに大きな画像を貼り付けては、何を伝えたいホームページなのか分からなくなってしまいます。

また、大きな画像ばかりだとホームページを表示させるのに時間がかかり過ぎて、見る前にユーザーが離脱してしまう可能性があります。ホームページ全体のレイアウトを考えながら、本当にこのスペースに画像が必要なのか、適したサイズになっているのかなどを判断し配置するように心がけてください。

画像を正しいサイズで配置することはホームページ全体のデザインとバランスを向上させるのはもちろん、ユーザーにとっても見やすいホームページだと好印象を与えることにもつながります。

「2-1. タグを使って画像を配置する」でも触れましたが、altタグというのは画像を貼る際のHTMLタグの記述にある「alt="画像の説明"」のことを指します。なぜaltタグの入力が必要なのかと言うと、貼り付けた画像がどういうものであるかを検索エンジンに情報として理解させるためです。

テキストに合った画像をいくら用意しても、検索エンジンに理解してもらえなければ検索順位に影響を与えることはできません。背景画像などの特に情報を必要としないものに関してはaltタグを入力する必要はありませんが、そのほかの画像には「花を手に持っている女性」といったような具体的な画像説明を加えるようにしてください。

また、altタグを入力しておけば万が一画像が表示されない場合でもテキストとしてユーザーに画像の情報を伝えることができるというメリットがあります。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

「画像の貼り方がよく分からない…」「貼った画像が表示されない…」と、ホームページの作成途中で苦戦していた人も、ホームページに適した画像形式と貼り方、画像が表示されない場合の対処法が分かれば、それほど悩むことなく画像を扱えるようになるはずです。

せっかく「多くのユーザーに見てもらいたい！」と思って作成したホームページなのに、画像の貼り間違いが原因で見てもらえなくなってしまうなんて正直悲しいですよね…。
画像はユーザーの目を引く大事な要素ですから、ホームページでの見え方をしっかりと考えたうえで配置するように心がけなければなりません。

今回はホームページを自作する場合に役立つ画像の基礎と対処法について取り上げてみましたが、「もっと簡単に画像を貼り付ける方法はないのかな…」と考えているのであれば、制作ツールの使用を検討してみてはいかがでしょうか？

制作ツールの多くは用意した画像をアップロードして、ドラッグ&ドロップでホームページの好きな場所に配置することができます。
基本的には無料で使用できるので、HTMLタグの記述が面倒だと感じる場合には一度、制作ツールを試してみることをおすすめします。

スマートフォンでの作成になりますが簡単に画像が貼り付けられる制作ツールを紹介していますので、こちらの記事も参考にしてみてください。

ご自身のホームページをきっかけに、事業やお店のホームページを立ち上げてみたい／リニューアルしてみたいという場合には、ぜひ日本最大級の業者比較サイト「アイミツ」までご相談ください。

「アイミツ」ではホームページ制作を得意とする制作会社を一括比較できるだけでなく、あなたの会社のお悩みやご希望・ご要望に応じて最適な制作会社を無料でご紹介させていただきます。