ホームぺ―ジ作成においてどのような写真をサイトに載せるのかは非常に重要です。
「おしゃれな写真を撮って、ホームページを華やかにしよう」
「イラストをたくさん使ってオリジナリティ溢れるホームページにしよう」
このように意気込んでいる方もいるかもしれませんが、写真の良し悪しの前に注意しなければいけないことがあります。
それは写真の”サイズと容量”です。これに気をつけなければ、せっかくにホームページに集客した人を逃してしまうかもしれません。
この授業では、ホームページに画像を使用する際に気を付けてほしい、写真のサイズと容量について解説します。
気持ちよく快適に使えるホームページを作成して、より多くの人にホームページを訪れてもらえるようになりましょう。
サイズ ＝ ピクセル、容量 ＝ バイト
ホームページ制作における写真のサイズと容量の具体的な説明の前に、サイズと容量とは何なのかということを理解しておく必要があります。
写真のサイズと容量にはそれぞれ呼び名があり、サイズのことを”ピクセル”と呼び、容量のことは”バイト”と呼びます。
ピクセルというのはデジタル画像の最小単位のことです。
みなさんカメラを購入するときにカメラの性能をチェックすると思うのですが、性能の項目のなかに”画素数”というものをよく目にすると思います。
実はこの画素というのがピクセルを指しています。
では、このピクセルが写真の画像にどのような影響を与えるのか、簡単に説明します。
- ピクセルの数字が大きい（画素数が高い）； 高画質で大きいサイズに引き伸ばしても画質を維持することができる。
- ピクセルの数字が小さい（画素数が低い）；低画質で大きいサイズに引き伸ばすと画質を維持することができない。
ピクセルの数字が大きいと高画質であるというポイントをよく覚えておいてください。
次に容量（バイト）ですが、これもみなさん目にする機会が多いはずです。
メモリーカードや写真のデータ量として記載されている、B（バイト） KB（キロバイト） MB（メガバイト） GB（ギガバイト）のことですね。
B（バイト）は最も容量が小さく、B（バイト）を1024倍すると KB（キロバイト）、さらに1024倍するとMB（メガバイト） というように、容量が大きくなっていきます。
ホームページが重くなるとアクセス数が下がる
では、サイズと容量を理解したうえで本題に入りましょう。
おそらくホームページを制作するにあたり、使う写真に関して、
「ホームページ制作で使う写真はなるべく高画質でアップしたいからサイズも容量も大きいのを使おう！」
と思われている方が多いのではないでしょうか？
ホームページ制作で使う写真を高画質で見せるというのは重要なポイントのひとつです。
今や写真や動画はどんどん画質が向上しており、見る人の目が肥えています。
とくに動画はその影響が強く現れており、画質が悪いだけで視聴者が減ってしまうなんてこともあるほどです。
写真は動画に比べると影響は少ないですが、低画質よりも高画質にするほうが特殊な場合を除き、良い結果を生むでしょう。
「私のホームページは制限がないから写真のサイズも容量も大きいままでいいでしょ？」
確かにホームページ制作で写真のサイズや容量に制限がない場合は、自由に写真をアップしても問題ありません。
しかし、もしもあなたが自分で作った”ホームページのアクセス数を伸ばすこと”や”利用者に快適に使用してもらうこと”を考えている場合、写真のサイズと容量には注意しなければいけません。
理由はただひとつ、”ホームページが重くなる可能性がある”からです。
ホームページの1ページあたりの目安とされる容量については個々の状況によって変わります。
また現在進行形でwebや通信速度の技術は向上しているため、一概にこれが絶対という数字を出すのは難しいのですが、PCサイトは1ページあたり1MB〜3MB以内、スマートフォン用のサイトは1MB以内で収めるのがいいと言われています。
写真1枚の容量は撮り方やどんなカメラを使うのかによって様々ですが、rawファイルと呼ばれる形式で保存すると1枚30MBいくこともあります。とても大きい容量ですよね。
もしもあなたが制作したホームページの写真の容量が大きいと、人によってはページを開ききるまで3〜5秒以上待たなければいけない可能性が出てきます。
インターネットの世界において、1秒という時間はものすごく重要視しなければいけないポイントです。
もしもページを開くのに3秒以上かかるホームページは、どんなに優れたサイトだったとしても、その時点で利用者が離れていく可能性が高いといっても過言ではありません。
逆に内容は同じでも容量を軽くし、ページを開く速度を快適にしただけでアクセス数が伸びたなんていうことは当たり前のようにある話です。
ホームページの1ページあたりの容量を減らすためには主に3つの方法があり、「動画は使わないこと（直接埋め込まないこと）」「1ページに情報を集中させないこと」そして「写真のデータ量を下げること」の3つが挙げられます。
現在、ブログやwebニュースでは文章だけでなく、写真と文章を組み合わせたページを制作することが多く、この写真の容量を下げるという行為はものすごく重要になってくるわけです。
また各々、通信速度には違いがあります。
通信速度が早くて快適な人もいれば、遅い人もいますよね。
先ほど、PCサイトは1ページあたり1MB〜3MB以内、スマートフォンは1MB以内で収めるのがいいと言いましたが、ページを表示するのに最適な容量をきっちり守るというよりは、”軽くできるのであれば、可能なかぎり軽くする”というのがホームページ制作における写真の容量の使い方の理想といえます。
例えば3MBだったら大丈夫だからといってページの容量を3MBぎりぎりの容量で抑えるのではなく、2MB → 1MB → 800KBというように少しでも軽くするのが大切です。
サイズは適正サイズ、容量は小さく
「じゃあホームページの容量を軽くするために写真のサイズをとっても小さくして容量を軽くしますね！」
さて、この判断ですが、半分正解で半分不正解です。
写真の容量を軽くするのはもちろん正解なのですが、サイズを極端に小さくしてしまうのはよくありません。
写真の容量を減らすためには大きく分けて2つの方法があります。
それは最初に説明した写真のサイズを小さくして容量を落とす方法、もしくは写真のサイズは維持したまま容量だけを落とす方法です。
「写真のサイズを大きいままで容量だけを落とすことができるの？」
このように思う方もいるかもしれませんが、これは意外と簡単にできます。
ここでは具体的なやり方については割愛しますが、webで検索していただければ容量だけを圧縮することができるフリーソフトやオンラインツールがありますので、それらを利用することでサイズは変更せず、容量だけを落とすことができます。（※当然、サイズの大きさによって落とせる容量には限界があります）
では、なぜサイズを変更せずに容量だけを落とす手段を取るのかいうと、画質を維持するためです。
これは実際に試していただけるとよくわかるのですが、例えば1024×768ピクセル（1MB）の写真と1920×1080ピクセル（1MB）の写真の場合、容量は同じでも後者のほうが画質は良いです。
これは最初に説明したように、ピクセル数（画素数）は高ければ高いほど高画質なので、当然の結果だといえます。
例えば容量の制限が1MBと決まっているときに、写真の容量を1MBにするためにサイズをどんどん小さくしてしまうと、画質はあっという間に落ちていってしまいます。
本当はある程度サイズが大きい状態で容量だけを落とし、高画質を維持できるにもかかわらずです。
そのため制限が容量だけ指定されている場合、もしくは自身のホームページを開く時間を早くするために容量を低くする場合は、サイズは大きいままで容量だけを落とすのが良いでしょう。
またホームページの写真のサイズはそこまで大きくなくても問題ありません。
ホームページを見る媒体として考えられるのは主にパソコンとスマートフォンの2つです。
それぞれのモニターの解像度には限界があるため、例えば6000 × 4000ピクセルという大きいサイズの写真を使ってもあまり意味をなさないのです。
現状、PCサイトの場合、横幅は約1000〜約1400ピクセル、スマートフォンの場合は約640〜約750ピクセルに設定すれば十分でしょう。
おそらく上記のサイズぐらいまでに小さくすれば、ほとんどの写真は約500KB〜3MB以内で収まると思います。
もしも1〜3MBぐらい容量がある場合は、さらにそこから容量を減らすことができないかどうか、必ず試すようにしましょう。
まとめ
ホームページ制作で使う写真の容量はなるべく軽くし、ページの読み込み速度が遅くならないように注意しましょう。
