広告 HP作成ヒント

ホームページに画像や写真を貼り付ける際の注意点!画像サイズは均一に

2020年12月15日

画像サイズ

ホームページに画像や写真を貼り付ける際には、画像などのサイズを均一にした方が見栄えが良くなります。

私自身もここ最近まで画像サイズなどあまり気にはしていませんでしたが、貼り付ける画像や写真などの縦横比を同サイズにするようにしただけでほんの少しかも知れませんが見た目がスッキリする様になりました。

また最近ではPCやスマホなど複数のデバイスでホームページを見るようになってきているので、貼り付ける画像や写真などのサイズを特に気にするのをおすすめします。

 

ホームページに最適な画像のサイズとは

実際にホームページに貼り付ける画像のサイズってどのサイズが最適なのか皆さんはご存知でしょうか?

実際に最適な画像サイズってのは無いのかも知れませんが、よく言われているのがTOPページに使われる画像サイズは2000PX~3000PXが最適と言われています。

また各ページに貼り付ける画像サイズは1000PX前後がよいとされています。

因みに当サイトのTOPページで使用しているフッター画像サイズは2200PXの画像を使用しています。

TOPページ画像

また各ページで貼り付けている画像サイズはなるべく800PXに統一するようにしています。

本来であれば1000PXでも良いのですが、各ページに貼り付ける画像のサイズがあまり大きすぎるとサイトスピードの低下を招きます。

最近では表示スピードが遅いホームページはGoogleなどの検索結果に悪影響を及ぼすと言われているので若干小さ目のサイズを使用しています。

 

画像の縦横比(アスペクト比)も統一することで美しく見える

画像のサイズも大事ですがもう1点ホームページに画像や写真を貼る際に気を付けることがあります。

それは画像の縦横比を統一するということです。

代表的な縦横比は下記の通りです

こんな方におすすめ

  • 3:2
  • 4:3
  • 16:9
  • 1:1.618(約5:8)黄金比
  • 1 : 1.414 (約5:7)白銀比

カメラなどに使われている 縦横比 3:2

アスペクト比3:2

カメラなどで使われている縦横比(アスペクト比)の3:2です。

画像サイズを数値で表すと 横860PX 縦573PXという画像サイズになります。

アイキャッチや記事内の画像のサイズによく使われている縦横比(アスペクト比)

 

ディスプレイなどに使われている 縦横比 4:3

アスペクト比4:3

アナログテレビやPCのディスプレーなどに使われている縦横比(アスペクト比)の4:3です。

画像サイズを数値で表すと横860PX 縦645PXという画像サイズになります。

ホームページなどに利用すると画像の占有率が大きくなり、画像のインパクトは強くなります。

 

デジタルテレビなどに使われている 縦横比 16:9

アスペクト比16-9の画像

デジタルテレビやyoutubeなどにも使われている縦横比(アスペクト比)の16:9です。

画像サイズを数値で表すと横860PX 縦484PXという画像サイズになります。

最近ではこのサイズの画像を多く見かけるようになったので、親しみやすい縦横比(アスペクト比)かと思います。

 

黄金比 縦横比 1:1.618(約5:8)

アスペクト比黄金比の画像

古来より人間が最も美しいと感じる比率で黄金比と呼ばれている1:1.618です。

芸術的な話になりますが、ミロのビーナスパリの凱旋門など歴史的な建造物や美術品などもこれら黄金比で作られています。

画像サイズを数値で表すと横860PX 縦532PXという画像サイズになります。

 

白銀比 縦横比 1 : 1.414 (約5:7)

アスペクト比白銀比の画像

日本で生まれた縦横比で白銀比と呼ばれていて比率は1 : 1.414 (約5:7)です。

A4サイズの紙などがこの縦横比になります。

また日本古来の建造物で法隆寺の五重塔などもこの比率で作られています。

画像サイズを数値で表すと横860PX 縦608PXという画像サイズになります。

 

貼り付ける画像サイズを簡単に切り取るには

ホームページに貼り付ける画像のサイズや縦横比(アスペクト比)はある程度統一させた方が、統一感が出て美しく見えます。

私自身も最近まではこのアスペクト比などは気にしないで画像を貼っていましたが、アスペクト比を統一し貼り付けるようにすることで統一感などがでてきて美しいホームページに変化してしました。

そしてどの縦横比(アスペクト比)が良いのかは運営するホームページやブログなどによっても変わってくるので、自分が運営しているホームページの内容によって選択するようにするといいでしょう。

また画像を簡単に決められた縦横比で切り取れるサイトもご紹介しておきますね。

 

簡単に画像を切り取り出来るサービス

画像切り取りサービス

私が普段から利用させていただいているのがSYNCER(シンカー)さんが提供されている画像切り取りサービスです。

使い方は簡単で、切り取る画像を選択し縦横比を選ぶだけ簡単に画像を切り取りが出来ます。

先程の黄金比や白銀比では切り取りは出来ませんが、これである程度画像の縦横比を統一し画像を貼り付けることが出来るようになりますよね。

 

ホームページの作り方手順

-HP作成ヒント
-,