ホームページの画像を最適化！作成手順3ステップやポイントを紹介

Web集客力を高めるには、ホームページの画像を最適化が大切です。

「ホームページの画像はどこで取得すればいいかわからない……」
「ホームページ画像の追加方法を知りたい」

このような悩みを持つ方も多いでしょう。

そこで本記事では、ホームページ画像を最適化する方法について解説します。画像の作成手順やポイントも紹介しますので、ぜひ参考にしてみてください。

【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法

資料内容

• WEBサイト作成の流れと説明
• 各フェーズでの重要ポイント
• 問い合わせを増やすための最終チェックリスト
• 制作後の運用方法
• 制作の進め方と注意すべき点

サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。

資料ダウンロードはこちら

ホームページ画像の取得方法3選

ホームページ画像を取得するには、以下の3つの方法があります。それぞれの方法を詳しく見ていきましょう。

自社で撮影する

オリジナリティを追求したいなら、自社で撮影した画像を使用しましょう。

撮影したオリジナル写真を使用すれば、他社と被ることはまずありません。自社の特徴や強みをしっかりとアピールできます。

商品画像、サービスのデモ画像、オフィスの写真など、自社で素材を用意します。

プロに撮影を依頼する

自社で素材の用意が難しいなら、プロに撮影を依頼しましょう。

「自社で撮影しても上手くいかない……」
「有料サイトでもイメージにマッチした画像が見つからない」

オフィスの風景やメンバーの写真を用意するならカメラマン、イラストならデザイナーに依頼をしてください。

プロに依頼すれば、希望に沿った最適な素材を用意できます。

画像素材サイトからダウンロードする

画像素材サイトからダウンロードするのも選択肢の一つです。完成度の高い画像が充実しており、自社のコンセプトに合った画像を取得できます。

無料で画像を提供しているサイトでも、クオリティの高い画像が手に入るでしょう。

ただし、無料の画像では、イメージにマッチした画像が見つからない可能性があります。無料画像で見つからない場合は、有料画像から探してみてください。

よりクオリティが高く、イメージにマッチした画像を見つけやすくなります。

ホームページ画像の作成方法3ステップ

ホームページ画像を用意したら次は、作成していきますが、作成には3つのステップがあります。作成方法を順番に紹介します。

1. 画像編集ソフトを準備する
2. ソフトに画像をアップロードする
3. 画像を編集する

画像編集ソフトを準備する

はじめに、画像編集ソフトを準備しましょう。

用意した画像サイズが大きい場合、サイズ調整が必要です。画像に文字やイラストを入れたい場合にも、画像編集ソフトが役立ちます。

画像編集ソフトにも無料と有料があるので、用途に合わせて使いやすいものを選んでください。

ソフトに画像をアップロードする

画像ソフトを選んだら、用意した画像をソフトにアップロードします。

アップロード方法は、ソフトによって異なりますが、主な方法は以下の2つです。

1. 画像を保存したファイルから選択する
2. ソフトの編集画面に直接ドラッグアンドドロップする

いずれも簡単なので、使いやすい方法を選びましょう。

画像を編集する

次に画像を編集していきます。

機能はソフトによっても異なりますが、主な機能は以下の通りです。

• トリミング（画像を切り抜く）
• 画像の明るさや色合いを調整する
• 文字を入れる
• 文字の色を選ぶ
• フォントを変える
• 画像に枠をつける

上記以外にもさまざまな機能があるので、目的に合わせて使い分けましょう。

ホームページで使用する画像の拡張子は3種類

ホームページで使用する画像には、3つの拡張子がありそれぞれに特徴が異なります。拡張子ごとの特徴を比較して、最適と思えるものを選んでください。

1. JPEG（ジェイペグ）
2. GIF（ジフ）
3. PNG（ピング）

JPEG（ジェイペグ）

JPEG（ジェイペグ）は、1,677万色のフルカラーに対応しています。

拡張子は「jpg」で表示され、写真に適した形式です。

ただし、jpgは「非可逆圧縮」であり、一度画像を圧縮してしまうと元の画質には戻せません。高画質にこだわりたいときに最適ですが、保存を繰り返すと画質が低下するので注意しましょう。

GIF（ジフ）

GIF（ジフ）は、静止画やアニメーションに適した形式です。

拡張子は「gif」で表示されます。色数が256色と少ない分容量が軽く、背景を透過できるのが特徴です。

写真には、あまり適していません。ロゴやアイコンによく使用されます。

PNG（ピング）

PNG（ピング）は、JPEGと同じ1,677万色ながら、保存を繰り返しても画像が劣化しないのが特徴です。

さらに、JPEG（ジェイペグ）ではできない、透過や半透明処理にも対応します。写真はもちろんイラストまで、幅広い用途に対応できるのが特徴です。

ただし、データ容量が大きくなる点に留意しましょう。

ホームページ画像を選ぶ3つのポイント

では次に、ホームページ画像を選ぶポイントを3つ紹介します。

1. 加工がしやすい画像を選ぶ
2. ホームページのテイストやニーズに合う画像を選ぶ
3. 画質の解像度に問題がない画像を選ぶ

加工がしやすい画像を選ぶ

画像は加工しやすいものを選びましょう。

例えば、人物の画像を使用する場合、アップ画像ではトリミングしづらいケースがあります。トリミングを前提にしているなら、少し引き気味の画像が適しています。

モノクロやセピアカラーの画像は、カラー加工に適していません。カラー加工を前提にしている場合は、未加工状態のカラー写真を選ぶといいでしょう。

ホームページのテイストやニーズに合う画像を選ぶ

ホームページのテイストや、ニーズに合う画像を選ぶことも大切です。

例えば、大人の女性に向けたサービスを提供しているホームページに、子どもや男性の画像を使うとアンバランスな印象を与えてしまいます。

画像をホームページのテイストやニーズに合わせると、統一感が出るのでユーザーにもアピールしやすくなるでしょう。

画質の解像度に問題がない画像を選ぶ

画質の解像度も重要なポイントです。

解像度は画素の密度を表す数値であり、画素数が大きいほど鮮明で小さいと画像が粗くなります。

小さい画像を引き伸ばすと画像が粗くなるので注意してください。

ホームページに画像を追加する手順3ステップ

続いて、ホームページに画像を追加する3つの手順を見ていきましょう。

1. 画像編集する
2. 画像をアップロードする
3. HTMLタグを入力する

画像編集する

まずは、画像を編集します

サイズに問題がなくても、容量が大きいと画像を読み込むのに時間がかかります。表示速度が遅いとホームページの評価にも影響しかねません。

サイズ以外にも、画像容量を軽くし最適化を図りましょう。

画像をアップロードする

画像の編集が終わったら、ホームページサーバーにアップロードします。

アップロード方法は、サーバーによって異なるので、事前にアップロード方法を確認しましょう。

HTMLタグを入力する

次に、HTMLタグを入力します。

HTMLタグは、画像を挿入したい場所に設置しましょう。

画像は「<img>」タグを使用します。

実際のHTMLタグは「<img src=”〇〇” alt”△△”>」で、srcにはURL、altには画像の代替テキストを記載しましょう。

画像をアップロードしても、HTMLタグが入力されていないと画像が表示されません。表示タグは画像と併せて準備してください。

ホームページの画像を扱うときのポイント5つ

ホームページ画像を最適化するには、扱い方にもコツがあります。画像を扱う際に抑えていきたいポイントを見ていきましょう。

1. 縦横比を実際の枠と揃える
2. ホームページ画像の表示サイズは「1920px×1080px」を目安に設定する
3. HTMLタグを正確に記述する
4. 著作権や画像サイトの規約を要確認する
5. 画像ファイルの容量を圧縮する

縦横比を実際の枠と揃える

ホームページの画像は、実際の枠と縦横比を揃えましょう。

縦横比が揃っていないと、画像が伸び不自然になる恐れがあります。

実際にホームページで表示される枠を把握し、枠に合わせて縦横比を最適化してください。

ホームページ画像の表示サイズは「1920px×1080px」を目安に設定する

ホームページに最適な画像サイズは、「1920px×1080px」とされています。

一般的に画像サイズが大きいほど画像は鮮明で美しく見えますが、サイズが大きいと容量が増え表示速度が遅くなるのが留意点です。

また、サイズを小さくし過ぎれば、画像が粗く画質が下がります。

なお、WindowsPCで画像を印刷すると解像度の違いから違和感を覚える可能性があります。

PCモニター基準では72dpiですが、Windowspcのみ96dpiを採用しています。モニターではきれいに見えても、印刷すると画像が粗いと感じるかもしれません。

自社で用意した画像を編集する際は、解像度の設定を72～96dpiにしておくといいでしょう。

HTMLタグを正確に記述する

HTMLタグは、正確に記述しましょう。

HTMLタグは、1文字でもミスがあると表示されません。

半角スペース抜けや、「,」と「.」は、間違いやすいので注意してください。

著作権や画像サイトの規約を要確認する

ホームページで使用する画像は、著作権や画像サイトの規約をしっかりと確認しましょう。

自社での撮影やプロに依頼したオリジナル画像なら心配はいりません。しかし、他サイトで使用されている画像を無断使用すると、著作権を侵害する恐れがあります。

画像素材サイトでは、「商用利用可能」なものと「商用利用不可」のものがあるので確認が必要です。

なお、画像の使用許可が認められていても、サイズや色の変更などの加工を認めていない場合もあるので注意しましょう。

画像ファイルの容量を圧縮する

画像ファイルの容量は、圧縮することも大切です。

ホームページに最適な画像サイズは、「1920px×1080px」ですが、容量を圧縮せずにアップロードすると以下の問題が生じる可能性があります。

• 読み込み速度が遅くなる
• 閲覧環境によっては画像が表示されない

画像ファイルを圧縮して容量を下げれば、上記の問題を解消できます。

ホームページの画像が表示されない3ケース別の対処法

ホームページの画像が表示されないケースがあります。表示されない時はどうすれば良いか、3つのケース別に理由と対処法を紹介します。

1. 画像だけが表示されないケース
2. 古い画像が表示されるケース
3. 画像が伸縮するケース

画像だけが表示されないケース

テキストは表示されているのに、画像だけが表示されない場合は以下の原因が考えられます。

• HTMLタグを正しく記述できていない
• 画像ファイルをアップロードしていない
• 画像ファイルが破損している
• セキュリティソフトに邪魔されている

画像だけが表示されない場合は、上記を一つずつ確認してみてください。

なお、テキスト表示されない場合は、サーバー上の問題である可能性が考えられます。しばらく時間をおいてからアクセスし直しましょう。

古い画像が表示されるケース

古い画像が表示される場合は、キャッシュが原因である可能性があります。

キャッシュは、Webサイトのデータをブラウザに保存し、次にアクセスしたとき素早く表示できるようにする目的があります。

古い画像が表示される場合は、キャッシュを削除すれば解消されるはずです。

キャッシュの削除方法はブラウザによって異なりますが、以下にGoogle Chromeを例に作成方法を紹介します。

• 画面右上の「︙」をクリック
• その他のツール→デベロッパーツール
• 更新マークを右クリック
• キャッシュの消去とハード再読み込みを選択

その他のブラウザは、ヘルプなどでキャッシュの削除方法を調べて試してみてください。

画像が伸縮するケース

画像が伸縮するのは、縦横比が合っていない可能性が考えられます。

ホームページで表示したい枠のサイズに合うよう、画像を編集し直してください。

ホームページ画像におすすめの素材サイト5選

では最後に、ホームページ画像におすすめの素材サイトを5つ紹介します。

1. Pixabay
2. Adobe Stock
3. photoAC
4. Unsplash
5. PAKUTASO

Pixabay

Pixabay（ピクザベイ）は、海外のサイトですが日本語表示が可能です。

全ての画像は無料で、商用利用も可能。4.100万点以上※もの高品質画像を、好きなだけダウンロードできます。

ダウンロードの際は、以下の3サイズを指定できるのも嬉しいポイントです。

• 640×360：54 kB
• 1280×720：178 kB
• 1920×1080：377 kB

※2023年8月時点

Adobe Stock

高品質な画像を選びたいなら、Adobe Stockをおすすめします。

有料ですが、用途に合わせて4つのプランを用意。各プランとも30日間無料体験できるのもポイントです。

年間プランは最初の30日間は解約料がかかりません。月払いプランはいつでも解約OKです。

中には無料素材もあるので、無料素材から試してみてはいかがでしょうか。ただし、利用には会員登録が必要です。（会員登録は無料）

photoAC

photoACは、総会員数1,000万人を超える人気サイトです。

無料会員登録すれば、全ての画像を無料でダウンロードできますし、商用利用や加工もできます。

モデルを使用した写真が豊富ですが、モデルの許可済みなので人物写真が欲しいときにおすすめです。

Unsplash

Unsplash（アンスプラッシ）は、世界中のクリエイターの写真を無料でダウンロードできます。

おしゃれな写真が多く、商用利用も可能です。会員登録なしでも利用できて、帰属表示の義務もないので自由に画像を選べます。

Unsplash+（アンスプラッシュプラス）という定額制もあるので、クオリティの高い写真を使いたいときにチェックしてみてください。

PAKUTASO

PAKUTASO（ぱくたそ）は、写真素材50,305枚・AI画像1,242枚※を無料でダウンロードできます。

会員登録も必要ありませんし、全ての素材は無料です。

高品質かつ高解像度の写真も会員登録不要でダウンロードできます。人物写真が多く、ユーモアがあるのでさまざまなシーンで活用できるでしょう。

※2023年8月29日時点

まとめ：ホームページの画像は正しく作成・設定しよう

ホームページに使用する画像は、作成方法や設定方法を理解し正しく使用してください。正しく使用しなければ、サイトのイメージを損なう恐れがあります。

本記事で紹介した情報を参考にしながら、ホームページ画像の最適化を図り集客力アップを目指しましょう。

【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法

資料内容

• WEBサイト作成の流れと説明
• 各フェーズでの重要ポイント
• 問い合わせを増やすための最終チェックリスト
• 制作後の運用方法
• 制作の進め方と注意すべき点

サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。

資料ダウンロードはこちら