《Web担当者を応援する、ホームページアドバイザーのブログ。》

ホームページの画像、上手な使い方とは?

ホームページの画像、上手な使い方とは?

ホームページ画像について、上手な使い方を説明します。読者対象は、ホームページでの画像の使い方について知りたい方です。画像の種類・表示方法・処理方法などの基本から、使い方のポイントまで詳しく説明しています。

なぜホームページの画像は、使い方が重要なのか?

ホームページでは、画像を多用することも少なくありませんよね。文字だけの説明では説明しきれないことがありますから。ところで、画像の使用にはいくつかの注意点があります。というのも、本来ホームページは、文字だけで構成されるものなので、画像には制限があるからです。

つまり、制限事項や扱い方のコツを知らないと誤った使い方をしてしまい、うまく表示されないだけでなくホームページを読みにくいものにしかねません。また、検索順位にも悪影響が全くないともいえませんので、やはり正しい使い方を知る必要があります。

そこで、ホームページの画像はどのように使えばよいのか、詳しく説明しましょう。

ホームページの画像、使い方のポイント!

それでは、ホームページの画像について、上手な使い方を説明します。ポイントは全部で7つありますので、しっかり目を通してください。

目次

  1. ホームページで扱える画像の種類とは?
  2. ホームページに画像を表示するには?
  3. 画像の表示位置を調整するには?
  4. ホームページに適した画像のサイズ(解像度)とは?
  5. ホームページの画像は、容量に気を付ける。
  6. ホームページに画像が表示されないときは?
  7. 画像のうまい使い方とは?
  8. -参考資料-

ホームページで扱える画像の種類とは?

ホームページ(Webサイト)で扱える画像は、種類(形式)が決まっています。

この3種類だけです。逆に言えば、これ以外の画像を表示することはできません。したがって、例えばビットマップ(BMP)画像を使いたい場合は、いったん上記3種類のどれかに変換する必要があります。では、どの種類に変換すればよいかというと、それぞれ特徴があります。

JPEG形式が向く画像とは?

JPEG形式が向く画像は、写真です。写真のように、色が非常にたくさんあり、細密な画像についてはJPEGが向きます。なぜなら、他の形式に比べてファイルの容量が小さくなるからです。PNGに比べると、非常に小さくなりますよ。

写真の例
※写真の例

したがって、JPEG形式は写真のような細密な画像に使いましょう。

PNG形式が向く画像とは?

PNG形式が向く画像は、イラストや図形など色数が少ない画像です。別の言い方をすれば、写真以外の画像が向くと言えるでしょう。仮に写真をPNG形式にしても画質は落ちませんが、非常に容量が大きくなってしまいますので、無駄が大きくなってしまうんです。

無料メール相談
※イラストや図形の例

したがって、PNG形式はイラストや図形のような、写真以外の画像に使いましょう。

背景が透過した写真を作りたい場合は、PNG形式を選びましょう。(JPEGは透過画像が作れません。)

GIF形式が向く画像とは?

GIF形式が向く画像はPNGと同様で、イラストや図形のような色数が少ない画像です。やはり、写真以外の画像が向きます。なぜなら、GIFの代わりに提唱されたのがPNGだからです。では、GIF は不要かと言われるとそうでもないんです。

GIF形式は、アニメーションGIF が作れるところがポイントです。したがって、通常はPNG形式を利用し、アニメーション画像を作りたい場合に限って、GIF形式を使用すると考えればうまく使い分けができると思いますよ。

上記以外では、WebP(ウェッピー)という形式もありますが、一部のブラウザしか対応していませんので、ここでは詳細な説明を省きました。

ホームページに画像を表示するには?

ホームページに画像を表示するには、imgタグを使用します。具体的には、src属性に画像へのパスを記述することでブラウザに表示されます。

  • <img src=”/picture/画像.jpg” alt=”サンプル”>サンプル

src属性には、画像が保存されているフォルダ(パス)を含めて記述してください。また、 alt属性はできる限り設定しましょう。これは本来、ホームページを読み上げるソフトが認識する部分で、代替文字列だからです。具体的には、画像を表す(説明する)言葉を記述します。

さらに、title属性を追加しても良いと思います。

  • <img src=”/picture/画像.jpg” alt=”サンプル” title=”サンプル”>
    サンプル
    ※画像の上でマウスをポイントしてみてください。

画像をポイントすると、titleに設定した文字列がバルーンヘルプとして表示されます。したがって、必須というほどではなく、有ればよいという程度で考えていただければよいと思いますよ。

ちなみに、xhtmlのルールを適用する場合は、<img src=”画像.jpg” />というように記述します。終了タグが無いので、そこを兼ねるような記述をするわけですね。

画像の表示位置を調整するには?

画像を中央や右に表示したい場合もあると思います。そのような場合は、文字列のように中央揃えや右揃えを行います。つまり、画像は文字と同じ扱いで考えればいいんですね。したがって、画像はブロック単位(段落単位)の要素で囲んだうえで、配置を調整します。

具体的には、divやpタグにclassを設定すると良いと思います。cssのtext-alignで、centerやrightを指定したクラスを作れば、位置を調整できます。

  • <p class=”center”><img src=”/picture/画像.jpg” alt=”画像”></p>
    ※divで記述しても構いません。
    ※参考:css ⇒ .center {text-align: center;}

このようにすると、画像位置を調節できますよ。慣れないと、どうしてもimgタグに対して設定してしまいますが、画像は文字と同じであると理解できれば、違和感はないと思います。

ホームページに適した画像のサイズ(解像度)とは?

ホームページに適した画像のサイズ(解像度)はあるのでしょうか? 単純に言えば、画像を表示するスペースの横幅を最大値として合わせることになるでしょう。例えば、スペースの横幅が700pxならば、画像の横幅も700pxが限界値ということになります。

なお、大きめの画像にしてしまっても問題ありません。画像を表示するときに大きさを指定して、縮小できるからです。しかし、小さい画像を拡大することはやめたほうが良いと思います。なぜなら、拡大表示すると、画像がぼやけてしまうからです。

  • <img src=”/picture/画像.jpg” alt=”サンプル” width=”300″ height=”200″>

width属性に横幅を、height属性に高さを指定します。特に単位はありませんので、数字だけ指定します。画像サイズに合わせて指定すれば問題ありませんが、小さい値を指定すれば縮小し、大きい値を指定すれば拡大します。

これらは必須の属性ではありませんが、ブラウザでの処理速度を上げるためには、ぜひ指定しましょう。(画像の表示部分を確保しながらレンダリングするので、効率が上がるんです。)

ホームページの画像は、容量に気を付ける。

ホームページに使う画像は、できるだけ容量を小さくするようにしてください。なぜなら、少しでも転送量を減らして高速表示したいからです。高速表示すべき理由は2つあります。それは、閲覧者を待たせないためと、検索エンジンに対する対策です。

一般的に、閲覧者が気持ちよくホームページを見られる待ち時間は、2秒だと言われています。したがって、2秒以内に表示しないと、よそのサイトに移ってしまう可能性が高くなってしまいます。また、それを受けて Google では、より表示が早いサイトを検索では優先します。

このような理由から、画像の容量を削減して、高速に表示できるホームページを目指す必要があるんです。

具体的な容量の削減方法とは?

では、具体的にどのようにすると画像の容量を減らせるのでしょうか? まず、すべての画像で言えることは、無駄に大きな画像にしないことです。できる限り無駄な部分を削除(トリミング)して、必要最小限にします。全体的なサイズも、小さくても問題なければ縮小しましょう。

また、画像の形式によって固有のやり方があります。例えば、 JPEG 形式の場合は品質を若干落とすことで減量できます。一般的には、90%前後の数値にすると、見た目の画質を悪化させることなく容量も削れるでしょう。

PNG画像の場合は、圧縮を利用する方法があります。TinyPNGというサイトで簡単に圧縮できますので、試してみてください。多くの場合で、見た目の画質を悪化させることなく、半分以下のサイズになるでしょう。(JPEGよりも小さくなる場合も少なくありませんよ。)

GIFの場合も、圧縮が利用できます。iLoveIMGというサイトで圧縮できます。アニメーションGIFの圧縮もできますので、重宝すると思います。なお、アニメーションではないのであれば、PNGに変換してしまうというのも有効な方法だと思います。(もちろんその後で圧縮です。)

このように、画像の形式によって容量にも特徴がありますので、画質を下げずに容量を削減できるように、画像と形式の相性を何度も試してみてください。

高速化について、別のアプローチもある。

画像の高速表示には別の方法もあります。それは、画像の遅延読み込みです。プログラムによって、画像だけを後から読み込むようにするんですね。HTML で記述している場合は、実装が少々面倒かもしれませんが、WordPressであればプラグインで簡単に対応できますよ。

このように、画像の遅延読み込みを利用すれば、多少画像ファイルの容量が大きくてもホームページの表示を高速化することが可能です。

画像の容量削減と遅延読み込みをセットで利用して、ホームページの高速表示を目指せば間違いありませんよ。

ホームページに画像が表示されないときは?

ホームページを作る中で、画像が表示されないことがあると思います。そこで、何が問題で表示できないのか、確認すべきポイントをご紹介しましょう。

記述に誤りがありませんか?

ホームページに画像が表示されないときに、最も多いのは、画像ファイルの名前やパスの記述ミスです。文字が抜けていたり間違っていたりすることも多いですし、パスの指定が誤っていることも多いです。いわゆる絶対指定と相対指定の違いなどがあります。

例えば、相対指定をすべてのページで共通に行っていると、ページが変わった時に影響を受けて、画像が表示されるページとされないページが出来てしまうことがあります。これは、フォルダが変更されるために起こるので、絶対指定に変えてしまえば何ら問題がありません。

要するに、「https://~」から記述すれば確実に画像が表示されます。相対指定だと記述が短縮できるので、慣れた方だと使いがちですが、絶対指定の方がミスやトラブルを引き起こしにくいと言えるでしょう。画像のファイル名やパスはミスしやすいので、しっかり確認してください。

画像の形式は正しいですか?

初心者で多いのが、画像の形式を間違えてしまうことです。冒頭で話した、JPEG・PNG・GIFの3種類以外の画像形式を使ってしまうと、すべてのブラウザもしくは一部のブラウザでうまく表示できません。もちろん、ファイル名だけ変更しても表示できません。

必ず画像の形式自体を、上記のようなWeb対応形式に変換して、使うようにしてください。

画像のうまい使い方とは?

ところで、画像のうまい使い方をご存知ですか? 何となく画像を挿入する方が少なくないようですので、ポイントをご紹介しましょう。

文章の補足として利用するのが基本

画像の使い方の基本は、文章の補足としての利用です。文章で説明できる限界まで突き詰めてから関連画像(挿絵)を挿入すると、非常にわかりやすい説明になります。画像が無くても分かるぐらいに説明できているのだから、画像が入ってさらにわかりやすくなるのは当然ですよね。

したがって、画像に頼った説明文は書かずに、画像はあくまでも文章の補助として使うようにすることで、分かりやすく伝わりやすいコンテンツになりますよ。

アイキャッチ画像も重要です

もう一つの重要な使い方が、アイキャッチ画像です。これは、文章の冒頭に、大きめの画像を1枚挿入するというものです。この画像に何の意味があるのかというと、文章を読みやすくする効果があるのです。あなたもブログで見かけませんか? 画像が1枚あってから文章が始まるパターンを。

これが、アイキャッチ画像と呼ばれるものです。いわゆる心理作戦なんですが、実は結構重要な使い方なんですよ。なお、どんな画像を使っても構いませんが、何を使おうか迷った時は、関連がありそうな画像や人物の写真などを使うと間違いないと思います。

画像の種類にも気を使いましょう

また、画像の種類ですが、商品説明ではそのまま商品写真を挿入すればいいですが、そうでない画像は人物(基本的には笑顔)を使うと印象が良いと思います。先ほどアイキャッチのところでも説明しましたが、人物写真で特に顔写真は重宝します。

人間は「顔」があると、思わず注目してしまう習性があるので、重要な文章の横に画像があると注目させることができるんです。また、顔写真があると華やかになって人間が感じられるので、安心感も出てきます。このような理由から、迷った時は人物写真を使うようにすると良いでしょう。

画像は瞬間的に感覚を捉えることができるので、意図を持って使うようにしてください。

-参考資料-

参考1:画像処理はどうやって行えばよいのか?

ここまでの説明で、画像の変換や処理について触れることがありました。これらの処理を行うためには、フォトレタッチと呼ばれるソフトが必要です。一般的には「フォトショップ」を購入される方が多いようですが、「 GIMP 」というソフトならば無料で入手できます。

ほとんどのレタッチができますので、ソフトを購入する必要が無いほどです。実際に、当サイトの画像はすべて GIMP で処理していますので、実力的には全く問題ないと思いますよ。

参考2:画像を簡単に入手する方法とは?

ホームページ用の画像を用意するにあたって、自分で作成するのは大変だと思います。そんな時に便利なのが、画像を無料配布しているサイトです。いくつかのサイトがありますので、検索してみてください。無料とは思えないクオリティで、満足度も高いと思いますよ。

下手に有料の画像を購入するよりも、無料画像の方が質が高い場合もありますので、複数のサイトを比較しながら好みの画像を探してみてくださいね。

参考3:画像の著作権や写真の肖像権に注意しましょう。

画像を使うときは、著作権や肖像権に注意しましょう。著作権は、自分で作った画像であれば気にする必要はありませんが、他人が作ったものであれば、当然作った方が著作権を持っています。著作権を侵害しないように気をつけなくてはいけません。

一方、写真の場合は人物が写っていると、肖像権が関係します。つまり、写っている方に断りなく公開してはいけないんですね。必ず許可が必要ですので、確認をとりましょう。許可や確認をとれない場合は、ぼかしたり消したりすることでの対応も検討してください。

また、画像配布サイトの画像を利用する場合は、必ず利用規約を確認してください。禁止事項がしっかりと明記されているはずですよ。また、他のサイトの画像を引用する場合も、利用規約を確認したり、使用許可をとるようにしてください。

まとめ:画像に頼るのは避けましょう。

いかがでしたか? ホームページの画像について、上手な使い方を説明しました。

今回ご説明したのは、ホームページで扱える画像の種類とは?、ホームページに画像を表示するには?、画像の表示位置を調整するには?、ホームページに適した画像のサイズ(解像度)とは?、ホームページの画像は容量に気を付ける、ホームページに画像が表示されないときの確認ポイント、画像のうまい使い方とは?、などのポイントでした。

現代のホームページでは、画像を多用する例をよく見かけます。しかし、画像にしたからと言って伝わりやすくなるわけではありません。説明は文章でしか伝わりませんので、画像はいかに文章を補助できるかという点が最も重要です。なんでも画像にすればよいというわけではないんですね。

また、画像を多用するとホームページの表示に時間がかかってしまいます。時間がかかると、閲覧者が不満に思うだけでなく、検索順位でも不利になりますので、十分注意しましょう。文字にできるところはできるだけ文字にし、画像を減らす努力も必要であることも知っておいてください

以上、「ホームページの画像、上手な使い方とは?」と題して説明しました。