ホームページ画像の基本ルール｜適正サイズやSEO対策、便利ツールを紹介

ホームページに画像を追加したいと考えている人も多いでしょう。ホームページで画像を扱う際には注意したいポイントがあります。この記事では、画像をホームページに掲載するときの注意点を解説します。また、画像を探す方法や画像作成ツールなども紹介するので、参考にしてください。

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

ホームページで画像を扱う際に注意するべきこと

ホームページで画像を扱う際には、3つのポイントに注意しましょう。ここでは、各ポイントについて解説します。

画像サイズと縦横比

画像のサイズが大きすぎる、もしくは小さすぎても画像は粗くなってしまいます。見にくく、ぼんやりとした印象になってしまうため、適切なサイズに調整しましょう。また、縦横比をそろえることも重要です。縦横比が揃っていない場合、画像が伸びてしまったりきれいに表示されなかったりするため、注意しましょう。

タグの記述

自分でHTMLを記述してホームページを作成する場合は、画像のHTMLの書き方に注意しましょう。画像を表示するためのタグは「imageタグ」や「altタグ」などです。imageタグで画像がどこにあるのかを指定し、altタグで画像の説明文を追加します。altタグを記述することで、画像が読み込めなかった場合に説明文が表示され、SEO効果もあります。

著作権

フリー素材の写真などを使うケースもあるでしょう。その場合は、著作権に気を付けなければいけません。フリー素材とはいえ著作権は著作者にあるため、利用規約をしっかりと読んで、規約の範囲内で利用しましょう。素材集だけに頼らずに、オリジナル画像も使ったほうがオリジナリティのあるホームページが作れます。

ホームページ担当者が知っておきたい画像の「拡張子」の種類

拡張子とは、画像や文章データといったファイルの種類を識別するためのもので、末尾に「．(ピリオド)+英数字」で表します。ブラウザが表示できる拡張子はさまざまですが、BMP形式はホームページでは使用できません。以下では、代表的な拡張子を解説します。

GIF

GIFは静止画だけでなくアニメーションの設定もできる拡張子です。ホームページやSNSなどでよく見かける動くアイコンなどはGIF形式が採用されています。色数は256色のみに対応しているため、色の少ないロゴやアイコンなどに向いています。一方色数が少ないため、写真には不向きです。また、透過処理も可能です。

SVG

SVGは、点・線・塗りといった画像の情報が数値化されている拡張子です。拡大や縮小、保存を繰り返しても画像が劣化しないという特徴があり、透過も可能です。また、画像の情報が数値化されているため、CSSやJavaScriptでの操作が可能となっており、アニメーションの表現も行えます。ただし複雑な図形だと描画などに時間がかかります。

JPG（またはJPEG）

JPGはJPEGと表記されることもある、メジャーな拡張子です。データのサイズが小さく、きれいな画像を表示できます。使用できる色数が1677万色と多いため、写真やカラフルなイラストなどにも向いています。ただし、保存を繰り返すたびに画質が悪化してしまいますし、透過には対応していません。

PNG

PNGもJPGと並んでメジャーな拡張子です。PNGでは保存を繰り返しても、画質が劣化せずにきれいな画像を表示できます。色数は1677万色、透過・半透明処理が可能となっているため、透明色を使ったイラストにも向いています。ただし、JPGと比較するとデータサイズが大きく、データは重くなってしまう点がデメリットです。

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

ホームページ使用に適した画像サイズ

ホームページに画像を使う際には、画像サイズを意識しましょう。ここでは、ホームページに適した画像サイズについて解説します。

画像サイズとは

画像サイズとは画像自体そのものの大きさを表したものです。縦幅のピクセル(px)数×横幅のピクセル(px)数で示します。

ホームページで使用するのに適した画像サイズとは

画像サイズは、大きすぎても小さすぎてもいけません。画像サイズが小さい場合、粗くなってしまい画質が悪くなります。画像サイズが大きければ、画像自体はきれいに表示されますが、データは重くなります。データが重いとホームページ全体の表示が遅くなりSEO評価に悪い影響を与えてしまいます。閲覧者の環境によっては表示されないケースもあるため、注意しましょう。

ホームページ画像に適したサイズとしては、1920px×1080pxが目安となります。パソコンの一般的な画面サイズが1920px×1080pxであるため、この画像サイズ以下でなければ画像はきれいに表示されます。

より詳しく知りたい方はこちらの記事も参考にしてください。

スマホ時代に最適な画像のサイズや新常識

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

ホームページに使える画像素材サイトを紹介

ホームページに画像を掲載するとき悩みがちなのが適した写真がなかなか見当たらないこと。ここでは、商用利用できる写真素材サイトやフリー画像サイトを3つ紹介します。

PIXTA

PIXTAはアマチュアだけでなく、プロが撮影した写真が購入できるサイトです。高画質・高品質な写真やイラストだけでなく、動画や効果音、BGMなども揃っているため、さまざまな用途で使用できます。基本的にはロイヤリティフリーとなっており、素材を一度購入すれば何度でも利用できるのも特徴です。

ホームページ作成サービスのBiNDupを利用するとPIXTAの画像が実質無料で使えるポイントを毎月付与。

写真AC

写真ACは無料写真素材を提供しているサイトです。日本人の写真に特化していることが特徴で、企業のホームページや採用サイトなどにも使いやすくなっています。個人・商用問わず無料で利用でき、加工も可能です。リンクやクレジットの必要もありません。会員登録の必要はありますが、気軽に使えるため人気の高いサイトです。

Unsplash

高解像度の画像が揃っている、海外の無料画像サイトです。商用OKで、高画質・高品質かつ雰囲気のある写真が多いことが特徴です。ただし、サイトのすべてが英語表記となっており、検索も英語で行わなければいけません。商用利用・加工が可能で、クレジット表記やリンク、会員登録の必要がないため、英語表記さえクリアできれば使いやすいサイトです。

BiNDupではUnsplashとシームレスに連携。好みの画像を貼り付けるまでの操作が簡単。

素敵な印象を与えるには画像素材の選び方も大切です。以下の記事も参考にしてください。

Webサイトで使う画像素材の選び方と加工テクニック

自身で画像のサイズ変更（加工）を行ったり、トリミングする作業が必要になる

上述した内容を踏まえて、自分でホームページを作成する場合には、画像のサイズ変更やトリミングを行いましょう。ホームページの内容や構成、画像の種類、表示させたい場所などに適した画像サイズを使用することが重要です。

【参考】解像度にも注意

高解像度の画像を使うと、データ容量は重くなります。解像度は基本的に写真やイラストなどを印刷する際のきめ細かさ、きれいさに影響するものです。ホームページでの画像表示には大きく影響しないため、72～96ppiまで減らすとよいでしょう。

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

ホームページに入れる画像を作る方法を紹介

ホームページ作成には、画像が非常に重要です。文字ばかりのページでは読者の興味を引きにくく、すぐに離脱されてしまう可能性もあります。自社の特徴や魅力、商品などをアピールするためには、適した画像を追加するとよいでしょう。

ホームページに追加する画像を作る方法としては、画像作成ツールを利用する方法があります。ツールを利用すれば、画像の作成に慣れていない場合でも、簡単に自社ホームページにあった画像が作れます。

ホームページに最適な画像を作成できるCMSツール

CMSとはホームページの文章や画像、デザインやレイアウトなどを一元管理できるシステムです。ホームページに適した画像を作成するのなら、CMSに画像ツールが含まれているものを利用するとよいでしょう。

BiNDup

BiNDupは、250以上の豊富なテンプレートを使い、テキストや写真を入れるだけでホームページが作れるツールです。画像サイズを適切に自動調整してくれたりSEOの基本設定で問題がないかSEOアシスタントでのチェックも可能。また画像編集や加工、フィルター機能も搭載しているため、ホームページに適した画像作成も簡単です。また、スマホ表示対応のレスポンシブデザインになっているのも特徴です。

Wix

Wixは海外発のドラッグ＆ドロップの操作で編集するホームページ作成ツールです。ネットショップ向けのテンプレートもあります。画像を加工するためのフォトスタジオ機能が付いています。スマホ対応のレスポンシブデザインです。

WordPress（ワードプレス）

WordPress（ワードプレス）は、世界中で広く利用されているWebサイト作成ツールです。無料で利用できるうえに、数千種類のプラグインを自由に追加できるため、クオリティの高いWebサイトを作れます。画像作成含め、独自のデザインにカスタマイズしたい場合は基礎的な知識を習得しておく必要があります。

画像が最適かどうかを調べる方法

画像が最適かどうかを調べる方法としては、「PageSpeed Insights」を使う方法が挙げられます。PageSpeed Insightsとは、Webサイトの表示速度を測定したり評価したりするためのツールです。Googleによって無料で提供されており、誰でも利用できます。

画像最適化やパフォーマンスの改善が必要な場合には、以下の対策を行いましょう。

• 画像サイズの圧縮
• 画像総数の削減

ここでは、画像サイズの圧縮におすすめのツールを紹介します。

TinyPNG

TinyPNGは、画質を落とさずにサイズ容量を圧縮できる画像圧縮ツールです。画像をサイトにドラッグ＆ドロップするだけの簡単操作で画像サイズを圧縮でき、無料で利用できます。圧縮可能なファイル形式は、WEBP・JPG・PNGです。

Optimizilla

Optimizillaは、画像の圧縮率や画質の調整ができる画像圧縮ツールです。無料オンラインツールで、画像をサイトにドロップ＆ドロップして画像サイズを圧縮します。最適化してくれるファイル形式はJPG・GIF・PNGで、20ファイルまでまとめて圧縮できます。

iLoveIMG

iLoveIMGは、画像の圧縮だけでなく、サイズ変更や切り抜きJPGへのファイル変換ができるツールです。ワンストップですべての工程が行えるため、手間がかかりません。また、一括でのアップロードやダウンロードも可能です。

Compressnow

Compressnowは、3つのステップで簡単に画像圧縮できるツールです。圧縮レベルを調整でき、画質を維持したままファイルサイズを削減できます。圧縮後のプレビュー確認も可能です。また、GIFファイルの圧縮にも対応しています。

まとめ

魅力的なホームページを作りたいと思った場合、画像は欠かせません。ホームページに画像を追加する際には、拡張子や適した画像サイズなどをしっかりと把握したうえで画像を作成することが重要です。画像サイズの圧縮に使えるツールも多くあるため、活用してみましょう。

BiNDupは、画像の編集や加工ができるだけでなく、ホームページに適切な画像を意識せず最適化してくれるツールです。国産CMSで、素材ダウンロードサービスも充実しているためホームページ作成に慣れてない場合でも安心です。有料コースには専用サポートもつくため、自社でホームページを作成したいなら利用してみてはいかがでしょうか。

無料でBiNDupを使ってみるBiNDの制作事例を見る