ratio_3_2 のカスタマイズ方法

レシオ32の各部分の適切な画像サイズと最大幅について【baserCMS ratio_3_2】

レシオ32の各部分の適切な画像サイズと最大幅について【baserCMS ratio_3_2】

適切な画像サイズについて

ratio_3_2 の適切な画像サイズについてご紹介します。

◆関連記事: トップロゴ適正サイズについて

このテーマは、画像のトリミングが不要で自動的に3:2の比率で切り取らて表示されます。そのため、素材選びやサイズを気にしなくて良いのが特徴です。

しかしながら、大きな画像は圧縮して表示されるため、画像によってはボヤけた表示になることがあります。一番良いのはページ構成にジャストフィットするサイズですので、各部分の画像サイズを知っておくと良いかと思います。

各部分の幅と画像サイズ(トップページ)

  • トップロゴ 550×70px(→ 補足あり
  • メイン画像① 689×459px
  • メイン画像② 407×271px
  • メイン画像③~⑤ 363×242px
  • サイドメニュー画像 最大幅300px
picbase1.png

→ 実際の画面幅で表示(PC)

メインコンテンツ(左側)の最大幅は756pxになっていますので、この場所に画像を配置する場合は、最大756px以下のサイズをご用意下さい。

この部分は固定ページやブログ記事欄も同様です。

もちろん、そのサイズ(横幅)を超える画像も自動的にレスポンシブデザインが適用され、サイズが自動調整されます。しかし、圧縮して表示されるため若干ボヤけます。
スポンサードリンク

画像の比較

◆幅756pxを超える画像の場合(横幅830px)
picsample830px.png

◆幅756pxの画像
picsample756px.png

如何でしょうか。写真画像だと差が分かり難いので、文字(ソース)でご覧いただきました。スマホからだと分かり難いですが、PCからご覧頂くと顕著に差が出ます。

ですので、メインコンテンツは横幅756px以下の画像を用意しましょう。画像に文字を載せている場合は特に注意が必要です。また、当サイトでご紹介している画像に装飾を施す方法をご利用の際は、横幅746px以下の画像で綺麗に表示されます。

◆例 幅746px+装飾
picsample746px.png
装飾が左右5pxずつ 計10px+ 746px=756px となります。
 

メイン画像に使う画像サイズについて

メイン画像のそれぞれの画像サイズは、Google Chrome のデベロッパーツールを使うと簡単に調べることは出来ますが、表示サイズはキレの悪い数値になっています。(比率は3:2)

それぞれのサイズで画像を作成出来る方は、これらの数字に合わせると良いのですが、画像素材からこれらの数値に画像を圧縮すると、逆に画質が悪化する場合があります。その場合は、比率 3:2 のやや大きめの画像を使用することをオススメいたします。デモサイトでは、各画像には1200×800px の画像が設置されています。

ピクセルの数値は大きいですが、画像サイズ(バイト数)は少なくなっています。
main_image_1propaty.jpg
バイト数が大きい(1MB)を超えるような画像だと、ページを開くのに時間が掛かる(スマホから特に)ので、画質を落とさないで画像を圧縮する処理が必要になってきます。

ご自身のサイトが重たく感じる場合は、一度【検索】してみて下さい。参考までにこの様な無料サービスもあります。
→ https://tinypng.com/
pandacompression.jpg.png .jpg など、よく使われる画像を圧縮してくれるサイトです。会員登録・メールアドレス不要、完全無料で使えます。

使い方は、画像をドラッグ&ドロップするだけです。ほぼ一瞬で圧縮してくれます。ダウンロードリンクからデスクトップ等にダウンロードするだけです。
pandacompression2.jpg
画像によっては劣化が激しい場合がありますので、ご自身の環境にあった圧縮方法を見つけて下さい。

当サイトは、PCでご覧頂くことを前提としていますので、出来るだけ高画質のままアップしております^^;

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

baserCMS

CakePHP(tm) : Rapid Development Framework