バナー画像アイテムアップロードサイズ

HPに一番必要なのは「文章(文字)」です。次が画像ですが、そろそろ文章ができてきた?のかもしれません?先日の打ち合わせにて、新HP公開の話題が主題となりましたので、これまでは、「文字情報」に関するトピックスが多目でしたが、今後は、画像(や動画)についても書くようにしようと思います。

記事ページ右下方面に表示(PCの場合)される画像バナーは、サイズの大きなファイルを「アイテム」へアップロードしても小さく表示されますが、ファイルサイズは元のままで、大きいままですから、読み込みに時間がかかって、スマホや古いPCには辛いことから、グーグルからは、表示スピードの遅いページ扱いとなり、ランキングは下がります。
よって、アップロードする前準備として、PC上で画像を作る際に、あらかじめ、HP表示に適したサイズへ加工しておくことが、おもてなし=SEO対策になります。

旧HPのバナーは、横幅176でした。新HPのバナー横幅は、276です。
ちなみに、
記事やウェブページ(本文~続き)に貼り付ける画像もあらかじめサイズを調整しておくならば、横幅450です。

※元々の画像サイズが450以下の場合、無理に450へ加工しないで、そのままのサイズでOKです。

あらかじめ450へ縮小加工したものの表示と、450へ縮小表示したものでは、見やすさに差があります。

599までの画像は450へ縮小表示されますが、ファイルサイズは巨大なまま。
600を超えると縮小表示のモヤモヤがひどくなり、また、稀に、縮小表示機能に支障をきたす場合があります。

width-bn.png

このYouTube埋め込みプレーヤーは、標準サイズが横幅560(599以下)ではあるのですが、画像とは異なり、自動的に450へ縮小表示はされない(「HTMLテーブル」と同様)ので、プレーヤーを記事へ埋め込む際に、450へ手動縮小して貼り付けていますので、スマホで「動画面積の何割もが見れない!」といったことは生じませんが、まだいくらかは欠けてしまいます。

こっちは、340です。大画面スマホでないスマホ、例えば小中学生が持たされている小型スマホ「iPhoneSE」で欠けずに全体が見られるギリギリな大きさです。
(340x190)

小型スマホは安価である事が一番の理由ですが、ワイシャツの胸ポケットに入るサイズであることも理由でサラリーマンにも人気があり、幅広いユーザがいる事から出荷台数が多いので、このような機種を意識してHPを作成した場合のおもてなし効果も多くなります。

自動縮小表示の有無などの背景から、画像バナーと動画で、横幅が異なり&端数があって覚えにくかもしれませんが、「どっちがいくつだったっけ?」と思ったら&忙しい時には、どっちも「横幅300」で覚えておいて&作ってしまってもさほど支障は生じません。