ホームページ画像サイズの正しい決め方|形式・圧縮ツールも解説

「ホームページに載せる画像、なんとなく大きいままアップロードしていませんか?」適正サイズを外すと表示速度が落ちたり画質が粗くなったりし、サイト全体の印象を下げてしまいます。

本記事では、フルHD基準の目安サイズ・向いているファイル形式・挿入方法・無料の圧縮ツール・商用利用OKの素材サイトまで、画像調整の実践手順を一つずつ解説します。サイト全体の使いやすさから見直すなら、お名前.comのAIホームページパックも選択肢のひとつです。

ホームページに画像を使用する場合には、画像サイズの最適化を行い、読みやすく、見やすい構成にすることが重要です。

ホームページに適した画像サイズは、一般的に広く使われている「フルHDモニター」の場合、「1920px×1080px」が目安となります。

「px」とは「pixel（ピクセル）」を省略して表したもので、デジタル画像を構成する、最小単位を指しています。

画像サイズは、上記の目安よりも小さいと、ホームページ上で引き伸ばされて表示されるため画質が荒くなり、内容を読み取りづらくなる恐れがあります。

反対に大き過ぎると、画像ファイルの容量が増えてしまい、ホームページ全体の表示速度とレスポンス速度の低下を招きます。

上記の適正サイズを目安に、画像内容の読み取りやすさと、表示速度のバランスを鑑みて、使用する画像サイズを選定しましょう。

推奨形式はJPEG・PNG・WebPの3つで、用途に応じて使い分けます。

写真のような色数が多くグラデーションのある画像はJPEG、背景を透過させたいロゴやアイコンはPNG、そして近年はJPEG・PNGより軽量に圧縮できるWebPが標準的な推奨形式になっています。

迷った場合の目安として、写真はJPEGまたはWebP、透過や線がはっきりした画像はPNGを選べば、ほとんどのケースで問題ありません。AVIFはさらに軽量ですが、対応環境の確認が必要なため、まずはWebPから試すのが現実的です。

ここからは、ホームページに画像を挿入する方法について、パターン別に項目を分けて詳しく紹介していきます。

はじめに、WordPressを使用したホームページに画像を挿入する方法を、順を追って紹介していきます。

新規記事の作成画面の画像を挿入したい箇所で「＋」をクリックし、表示されたブロック選択画面から「画像」を選択します。

「画像」の下に表示された「アップロード」を選択、アップロードする任意の画像をクリックして「開く」を選択します。

画像が記事に挿入されていることを確認しましょう。

挿入する画像はそのままのサイズでアップロードされるので、画像サイズを変更したい場合は、アップロード前に修正を行いましょう。

また記事の作成画面と実際の公開ページでは見え方に差異がある場合もあるので、記事を公開する前に必ず「プレビュー」からチェックすることが大切です。

HTML/CSSで構成されたホームページに画像を挿入する方法は、簡単にまとめると以下の手順となります。

ここからは、各項目の具体的な作業の手順について、項目を分けて詳しくご紹介していきます。

画像をサーバーにアップロードするためにFTPソフトをインストールして、サーバーにログインを行い、対象のページへアクセスします。

FTPサーバーへ接続するには、「FTPホスト名」「ユーザー名」「パスワード」が必要になるため、契約しているサーバーレンタル会社からあらかじめ情報を取得しておきましょう。

また使用するFTPソフトは、特徴や使い勝手の良さが異なるソフトが多数あるので、用途に合ったものを選んで導入すると良いでしょう。

次にホームページに使用する画像をFTPサーバーへアップロードしていきます。

ホームページに使用しているサーバーによってアップロード方法が異なるため、詳しい手順は、契約しているサーバーレンタル会社の公式ホームページから確認を行いましょう。

画像をアップロードする際の注意点として、他のファイルと混同してしまわないように、画像ファイルは「img」や「images」など判別が容易な名称にすると管理しやすくなります。

ホームページに画像を追加するには、ホームページ上の任意の場所にHTMLタグを追加する必要があります。

<img src="画像のURL" alt="画像の説明">

上記のようなHTMLタグを、画像を追加したい箇所に記述することで、画像を表示させることが可能です。

最後にHTMLタグを追加したHTMLファイルを、FTPサーバーにアップロードし直すことで、ホームページへの画像挿入は完了です。

画像の挿入作業が完了したら、最後に該当箇所に正しく画像が表示されていることを確認しましょう。

問題なく画像が表示されていること、画像サイズが崩れていないこと、アップロードを行った画像が誤ったものではないかなど、全てのチェックを完了すれば、作業は終了となります。

写真AC・Pixabay・Unsplashなど、商用利用OKの無料素材サイトがあります。

会員登録すれば商用利用も可能な写真素材を無料でダウンロードできる、日本国内最大級の素材サイトです。和風・ビジネス・季節写真など日本らしい素材が充実しています。

クレジット表記不要・商用利用可の写真・イラスト・動画を提供する海外の素材サイトです。デザイン性の高いビジュアルを探している場合に向いています。

プロカメラマンによる高品質な写真を無料で提供している素材サイトです。特に風景・自然・ライフスタイル系の写真が豊富です。

表示が遅くなったり画質が粗くなったり、サイト全体の印象を損ないます。

画像だけでなくサイト構造自体が古い場合、更新のタイミングかもしれません。

画像を適正サイズ・最新形式に整えても、サイト全体の表示速度やデザインの古さが気になる場合は、画像単位の微調整よりもサイト全体のリニューアルを比較検討するタイミングかもしれません。特に公開から数年経っているホームページは、画像の仕様だけでなくテンプレート自体が現在のスマホ表示・表示速度の基準に合っていないケースもあります。

「画像だけ直しても、サイト全体はそのままでいいのか」「作り直すとしたら費用と手間はどれくらいか」といった判断に迷う場合は、まず現状のサイトを他の作り方と比較してみるだけでも、次の一手が見えてきます。

ドメインやページ編集など、リニューアルの前に確認しておきたい基礎知識は下記記事もあわせてご覧ください。

ホームページの見た目や運用に関わる他のテーマも、あわせてご覧ください。