ブログを始めた時につまづいたのが、自分のブログに合った画像のサイズってどのくらいなの？という素朴な疑問です。
私の場合はスマホで撮った写真が多いので、元のままだと
- 3,264✕2,449ピクセル
- 5MB
- アスペクト比4:3(横向き)
さすがに大きすぎてこのまま載せる訳にはいかないので、ブログにアップする前にトリミングとリサイズをしています。
(皆さんしてると思いますが)
- トリミング･･･画像を切り取って縦横比(アスペクト比)を整える
- リサイズ(縮小)･･･見た目を小さくする
- リサイズ(圧縮)･･･容量を小さくする
かなり今更ですが、ブログに適した画像サイズをある程度統一して、すっきり読みやすく、かつ画像処理にかける時間を短縮したいと思いたちました。
１記事にまとめると長くなるので
- しっくりくるアスペクト比探し
- 記事幅にあったピクセルサイズ探し
- 画像圧縮で軽量化計画
に分けて自分なりに検証してみたいと思います。
今回は｢しっくりくるアスペクト比探し｣です。
目次
アスペクト比とは？
アスペクト比は、矩形(くけい)における長辺と短辺の比率。
出典:Wikipedia
※矩形＝長方形
現在ブログに使っているアスペクト比
このブログに使っている画像の比率は、バラバラなときもありますが、基本的には
- アイキャッチ画像→16:9
- 記事内の画像→3:2
にトリミングして使用しています。
画像加工も全部スマホでやっています。
画像のアスペクト比とサイズは使用テーマに合わせる
アイキャッチの最適サイズ
テーマによってアイキャッチ画像の推奨サイズは違ってきます(知らなかったよ･･･)
私が使っているワードプレスのテーマ｢JIN｣のアイキャッチ推奨サイズは
760✕428ピクセル
アスペクト比は16:9です。
横760px：縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。
と明記されているので、その通りに作っています。
アイキャッチは｢Canva｣で作っています。
記事内の画像の最適サイズ
アイキャッチサイズは公式サイトで明記されてるので、迷うことはなかったんですが･･･。
悩んだのは記事内に載せる画像。
いろいろ推奨サイズを調べてまわっても、見事にバラバラ！
Twitterアンケートで聞いてみた結果
他のブロガーさんがどんなアスペクト比の画像を使っているのか知りたくて、アンケートをお願いしてみました。
だいたいスマホの横向きで撮った写真だと、16:9か3:2
一眼レフやデジカメで撮った写真だと3:2か4:3
なので、上記3つの比率がメジャーかなと思ったんですが
https://twitter.com/fukoblog/status/1094381961194491904?s=19
けっこうバラツキがありました･･･。
その他の比率って何？
コメントをくれたブロガーさんのアスペクト比
・ほしにゃーさんは
1200✕630ピクセル (1:1.9くらい)
・アラフォー父ちゃんさんは
600✕450ピクセル (4:3) 50KB以下
結局のところ｢これ！｣という絶対値はなくて、皆さん自分の好みで決めてそうです。
よく見るアスペクト比で実際に比較
ほかの比率も調べてみると
- 黄金比という比率があること。
- Instagramで一般化した1:1を使っている人もいること。
がわかりました。
大きさ順に並べるとこんな感じでしょうか。
16:9＜黄金比＜3:2＜4:3＜1:1
もう考えていてもよく分からないので、それぞれのアスペクト比にトリミングして並べてみました。
横幅は700ピクセルで統一しました。
写真は海遊館に行った時に、私のスマホで撮影したものです。
16:9 700✕394
・最近のテレビ(ハイビジョン)
・YouTubeのサムネイル
・Twitterのタイムライン(スマホ)
スマホで見るとちょっと細長い印象。
黄金比 1：1.618 700✕433
人間が最も美しいと感じる比率らしい。
・名刺やハガキ、Appleのロゴなど
3:2 700✕467
・フィルムカメラ
・デジタル一眼レフカメラ
スマホで見るとちょうどいい。
4:3 700✕525
・昔のテレビ
・コンパクトデジカメ
・スマホのカメラ
スマホでもやや縦に長めの印象。
1:1 700✕700
・Instagramの投稿
小さければありかも。
ブログに適したアスペクト比まとめ
実際に比べてみて感じたのは、
- 横長のPC画面で見ると、実寸より縦長に見える。
- 縦長のスマホ画面で見ると、実寸より横長に見える。
と、PCとスマホで画像の見え方が違いました。
個人的にPCでもスマホでも、ブログに一番しっくりくるな～と感じたのは、｢黄金比｣でした。
二番目は3:2かな。
かなり好みが分かれるとは思いますが。
ただ、見出しの下に入れるアイキャッチ画像の場合は、16:9が一番すっきりすると感じました。
- 文字主体で、見出し下に入れるアイキャッチ画像なら16:9
- 説明的に入れる画像なら、黄金比か3:2
- 写真を重視したブログなら3:2か4:3
という感じです。
NEXT
記事幅にあったピクセルサイズ探し(予定)
[…] ブログの画像に適した美しい比率(アスペクト比)はどれ？ […]