
適切な画像サイズについて
ratio_3_2 の適切な画像サイズについてご紹介します。◆関連記事: トップロゴ適正サイズについて
このテーマは、画像のトリミングが不要で自動的に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)それぞれのサイズで画像を作成出来る方は、これらの数字に合わせると良いのですが、画像素材からこれらの数値に画像を圧縮すると、逆に画質が悪化する場合があります。その場合は、比率 3:2 のやや大きめの画像を使用することをオススメいたします。デモサイトでは、各画像には1200×800px の画像が設置されています。
ピクセルの数値は大きいですが、画像サイズ(バイト数)は少なくなっています。

バイト数が大きい(1MB)を超えるような画像だと、ページを開くのに時間が掛かる(スマホから特に)ので、画質を落とさないで画像を圧縮する処理が必要になってきます。
ご自身のサイトが重たく感じる場合は、一度【検索】してみて下さい。参考までにこの様な無料サービスもあります。
→ https://tinypng.com/

使い方は、画像をドラッグ&ドロップするだけです。ほぼ一瞬で圧縮してくれます。ダウンロードリンクからデスクトップ等にダウンロードするだけです。

画像によっては劣化が激しい場合がありますので、ご自身の環境にあった圧縮方法を見つけて下さい。
当サイトは、PCでご覧頂くことを前提としていますので、出来るだけ高画質のままアップしております^^;
お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。