ブログを始めて、悩んだことのひとつに「画像サイズ」があります。いったい、どれぐらいのサイズで、どれぐらいの解像度で、それがどれぐらいの重さ（ファイルサイズ）ならいいのかわかりませんでした。ネット環境が高速になっている現在、あまり気にしないでアップしても、それはそれでいいのかも知れませんが、ユーザービリティという観点からは最適なものを目指した方がいいに決まっています。
つい最近までは、どんな画像も横幅いっぱいのアイキャッチ画像サイズでしか掲載していませんでしたが、見た感じがいいブログは何パターンかの画像の作り方をしているようです。
そこで、ブログ用画像のサイズについて、SWELLの公式ページで使われている画像サイズをいくつかピックアップして調べてみました。
ピックアップしてみた画像【記事冒頭】
冒頭のメイン（アイキャッチ）となる画像です。
冒頭アイキャッチ画像（写真メイン）
幅：2400px
高さ：1260px
解像度：300px/inc
ファイルサイズ：500KB
RGB/16#
名前：swell_ogp_191105.jpg
冒頭アイキャッチ画像（文字メイン）
幅：1600px
高さ：900px
解像度：72px/inc
ファイルサイズ：82KB
インデックス
名前：thunb_post_setting.png
ピックアップしてみた画像【文章内】
文章の間に挟み込む情報量が少ない画像です。
横長タイプ（写真メイン）
幅：1600px
高さ：410px
解像度：300px/inc
ファイルサイズ：224KB
RGB/16#
名前：sns_action_area.jpg
横長タイプ（文字メイン）
幅：1200px
高さ：162px
解像度：72px/inc
ファイルサイズ：25KB
インデックス
名前：pnlink_simple.png
これは「冒頭アイキャッチ画像（写真メイン）」の半分の幅サイズということもあって、ひとつでセンターに配置したり、二つ並べて使ったりしていました。
四角形タイプ
幅：672px
高さ：432px
解像度：72px/inc
ファイルサイズ：9KB
インデックス
名前：customizer_post_page_menu.png
これは、操作方法とかの説明に使っています。WordPressのダッシュボードメニューの説明とかです。
参考にして気づいたこと
写真メインの場合は「jpeg」。文字要素が多い場合は「png」を使っているのがわかりました。
画像をきれいに見せたいときは、カラーモードを「RGB/16ビット」、文字情報が多い場合はカラーモードを「インデックス」にしています。PhotoShopでは、保存する前に、モードで８ビットを指定して、インデックスに変換すれば、インデックスモードにすることができます。
画像の名前の付け方も英字を使っていますね。何か一定の規則を決めて保存するのでしょうね。やはり、プロは美しく見せたいところは抑えつつ、できるだけ画像が軽くなるように、ひとつひとつ細かく設定しているのですね。
ちなみに貼っているグレーの画像は、大きさを合わせたイメージとなりますので、ファイルサイズは参考データと異なります。
広告会社にいたとき、印刷用のデータを入稿する際、「画像の解像度は原寸で350dpi、最低でも300はないとダメですよ〜」とデザイナーが言ってました。ホームページ作成の仕事では「Webは72pxでも大丈夫」とかもよく聞きましたが、正直大雑把なものでした。
実際自分で作業してみると、いろいろ気になるところが出てきます。
