適切な画像サイズについて
ratio_3_2 の適切な画像サイズについてご紹介します。◆関連記事: トップロゴ適正サイズについて
このテーマは、画像のトリミングが不要で自動的に３：２の比率で切り取らて表示されます。そのため、素材選びやサイズを気にしなくて良いのが特徴です。
しかしながら、大きな画像は圧縮して表示されるため、画像によってはボヤけた表示になることがあります。一番良いのはページ構成にジャストフィットするサイズですので、各部分の画像サイズを知っておくと良いかと思います。
各部分の幅と画像サイズ（トップページ）
- トップロゴ 550×70px（→ 補足あり）
- メイン画像① 689×459px
- メイン画像② 407×271px
- メイン画像③～⑤ 363×242px
- サイドメニュー画像 最大幅300px
→ 実際の画面幅で表示（PC）
メインコンテンツ（左側）の最大幅は756pxになっていますので、この場所に画像を配置する場合は、最大756px以下のサイズをご用意下さい。
この部分は固定ページやブログ記事欄も同様です。
もちろん、そのサイズ（横幅）を超える画像も自動的にレスポンシブデザインが適用され、サイズが自動調整されます。しかし、圧縮して表示されるため若干ボヤけます。
画像の比較
◆幅756pxを超える画像の場合（横幅830px）
◆幅756pxの画像
如何でしょうか。写真画像だと差が分かり難いので、文字（ソース）でご覧いただきました。スマホからだと分かり難いですが、PCからご覧頂くと顕著に差が出ます。
ですので、メインコンテンツは横幅756px以下の画像を用意しましょう。画像に文字を載せている場合は特に注意が必要です。また、当サイトでご紹介している画像に装飾を施す方法をご利用の際は、横幅746px以下の画像で綺麗に表示されます。
◆例 幅746px＋装飾
装飾が左右5pxずつ 計10px＋ 746px=756px となります。
メイン画像に使う画像サイズについて
メイン画像のそれぞれの画像サイズは、Google Chrome のデベロッパーツールを使うと簡単に調べることは出来ますが、表示サイズはキレの悪い数値になっています。（比率は3：2）それぞれのサイズで画像を作成出来る方は、これらの数字に合わせると良いのですが、画像素材からこれらの数値に画像を圧縮すると、逆に画質が悪化する場合があります。その場合は、比率 ３：２ のやや大きめの画像を使用することをオススメいたします。デモサイトでは、各画像には1200×800px の画像が設置されています。
ピクセルの数値は大きいですが、画像サイズ（バイト数）は少なくなっています。
バイト数が大きい（１MB）を超えるような画像だと、ページを開くのに時間が掛かる（スマホから特に）ので、画質を落とさないで画像を圧縮する処理が必要になってきます。
ご自身のサイトが重たく感じる場合は、一度【検索】してみて下さい。参考までにこの様な無料サービスもあります。
→ https://tinypng.com/
.png .jpg など、よく使われる画像を圧縮してくれるサイトです。会員登録・メールアドレス不要、完全無料で使えます。使い方は、画像をドラッグ＆ドロップするだけです。ほぼ一瞬で圧縮してくれます。ダウンロードリンクからデスクトップ等にダウンロードするだけです。
画像によっては劣化が激しい場合がありますので、ご自身の環境にあった圧縮方法を見つけて下さい。
当サイトは、PCでご覧頂くことを前提としていますので、出来るだけ高画質のままアップしております^^;
お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。
応援して頂けると励みになります。
