ホームページにぴったりの画像サイズにするコツ(縦横・重さ・大きさ)

スポンサーリンク
クローバーとカメラHP作成

画像が大きいとホームページの表示が遅くなるのは分かるけど、結局、画像のサイズはいくつが正解なのか教えて欲しいわ!

適切なサイト作りに画像サイズの考えは必要ですよね。だけども、その「適切」の標準があれば楽なのですが・・・。これは自分のスタイルや読む人が求めるものによって変わります。なので、試行錯誤するしかありません。

でも、そのヒントを見つけました。ヒントを参考にしていただければ、きっとあなたのサイトに適切な画像サイズが見つかりますよ。

適切な画像サイズの答えは〇〇です!

画像サイズはどのくらいがいいのか、その答えを結論から言います。「答えはなしです!」

すみません。これには理由があります。

それは、まず、見ているモニターによって変わりますし、スマホなどの端末によってもサイズが変わります。また、このブログみたいに2カラムにしている場合は幅が変わります。そのため、万人に正解な答えが「なし!」なんです。

例えば、私のモニターのサイズ(解像度)は横は1280ピクセル、縦は1024ピクセルです。次のリンクをクリックしてみてください。あなたのサイズがすぐ分かりますよ。

【みんなの知識 ちょっと便利帳】パソコンの、現在のウィンドウサイズ[画面サイズ]を調べる
パソコンの、現在のウィンドウサイズを調べます。ブラウザーの大きさを変更した時点の画面サイズ、ディスプレイの画面解像度、アクセスした時点の画面サイズを知ることが出来ます。『みんなの知識 ちょっと便利帳』の一部です。

私と同じでしたか?どのサイズを目的にするかによって画像サイズが変わります。

神社サイトにぴったりの画像サイズの決め方【横幅編】

これでは話が終わってしまいますね。では、どうしたら神社サイトにぴったりのサイズを決定できるか解説しますね。

ホームページ、ブログの幅は990PX

ヤフーは日本の検索サイトでは一番よく使われています。私もブラウザを立ち上げたときの最初のページ(ホーム)はヤフーに設定しています。そのため、日本人にとっては見慣れたサイズだと考えられます。このヤフーの横幅を参考にします。

F12ボタンでヤフーのサイズを確認すると「990PX」とあります。なので、最長でも990PXまでにしましょう。

ホームページ、ブログ内の余白を知る

画面ぴったりに文字が埋まると圧迫感があるためオススメしません。余白は自分で設定できます。10~20PXが多いです。ヤフーの水色で囲まれた部分は10pxで設定されています。

    

最大幅を計算する

ホームページ、ブログの幅が990PX。
余白は左右あるので2倍します。10×2=20PX
990PX-20PX=970PX

最大でも、970PXまでにしましょう。

この記事が書かれているカラムは625PXに設定しています。なので、最大でも625PXまでとなります。

神社サイトにぴったりの画像サイズの決め方【縦幅編】

横の最大幅は決まりました。

縦横比(アスペクト比)

次は、縦の最大幅を考えます。縦横比(アスペクト比)から決めるといいです。縦横比はそれぞれ理由があって、またなじみ深い比率があるので、これをすすめます。

縦横比には6タイプあります。

1:1正方形
3:2フィルム写真
4:3デジカメ、一般的なモニタ、アナログTV
7:5 (5:7)白銀比
8:5 (5:8)黄金比
16:9横長のモニタ、Youtube、テレビ

どれでもいいと思いますよ。運営しながら、あなたがご奉仕する神社のホームページにぴったりのサイズを決めたらいいと思います。

私の場合の縦横比は
1.元データーの圧縮によって、そのまま
2.見せたいところを直感で切り抜く
3.デジカメ(3:2)をそのまま圧縮する

その他のサイズを決める要因

実は、その他にもサイズを決める要因があります。

  • 本文中に使う画像か
  • アイキャッチ用か(WordPressの場合)
  • 画像を左・右・中央のどこに配置するか

本文中の画像

本文中で使う場合、割とどんなサイズでもいいです。上記のルールを守れば大丈夫です。

アイキャッチ画像

アイキャッチ画像は、その記事の紹介するときに表示されたり、記事の一番上に表示される、記事のイメージ画像です。

1200ピクセル×630ピクセルを推奨しているサイトが多くあります。

アイキャッチ画像のサイズって、結局何ピクセルがいいの?
WordPressで投稿や固定ページの記事を投稿するときに、登録するのが良いとされる「アイキャッチ画像」。解説…

私はめんどくさいので1500ピクセル×1000ピクセルで今のところ保存しています。特にまだ違和感はありません。

画像の配置場所

さきほどの画像を使って説明します。

先ほどの画像の横幅を300ピクセルのサイズにしました。

これを、左寄せにしました。

    

つぎは、右寄せです。

    

最後は中央です。(なぜか中央配置ができません。)

どうでしょうか?右寄せ、左寄せの場合は画像が300ピクセル幅でも違和感ありません。でも、中央寄せはちょっと画像が小さく感じます。

画像を配置する場合はサイズを小さくすることをオススメします。

画像サイズは大きさと重さがある

今まで、さんざん画像サイズと言ってきました。本当は、画像サイズには「画像の大きさ」、「画像の重さ」の2つの意味があります。

今までお話ししてきたことは、「画像の大きさ」でした。

画像の重さの適切サイズは100KBくらいが目安です。

画像の大きさを半分にしました。重さは。4.5KBです。なんとなくぼけています。

   

   

    

次に、22.1KBにしました。

     

     

下の方がウサギの毛のなめらかな感じがでていますよね。画像によっては100KBもなくても全然OKなものがあります。思い切って圧縮してみてください。

Adobe photoshopでは電話回線(56.6kbps)を基準にして画像が表示される早さをしめします。100KBだと大体20秒かかります。通信速度によって変わりますが、ちなみに5Gは最大で20Gbpsです。通信制限がかけられた場合でも128kbpsです。

通信速度はどれくらいあれば快適? 目安と測定方法を紹介 | セキュアSAMBA
快適な通信速度の目安、通信速度の測定方法やインターネットが遅い場合の対処方法について紹介します。2020年から提供開始になる5Gの特徴もあわせて解説しています。

記事を読んで貰うために、記事を分かりやすくするために画像は大事な役割があります。でも、サーバーの容量を食うことになりますから、画像のサイズとともに記事に使う画像の枚数も考慮に入れた方がよいですね。

フォトショップエレメンツは手軽に適切な画像サイズ、拡張子へ変換が楽です。持っているとホームページ以外にも使えて便利ですよ。拡張子についてはこちらを見てもらえば分かりやすいと思います。

 

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました