見出し画像

記事タイトル画像/プロフヘッダー画像の適切な画質と比率について

①▶タイトル画像に適切な、画質と比率

noteを始めるにあたって、記事の見出し画像を設定する際、
こんなトリミング画面が出る。↓

画像2

この画像の比率は固定されているようで、
合っていない比率のものだと、
どうしても全体が収まらない形になってしまう仕様。。。

公式のヘルプから探すとこんなことが書いてあった。↓

画像1

どうやらツイッターの画像比を元にしているらしい。
検証ということで、
適当に他の人の投稿からタイトル画像を拝借してみると、

JPEG画像 → 1280 x 670
PNG画像 → 1280 x 671
(単位はピクセル)

という結果になった。
(なんで形式に依って1pxズレてるのかは謎)

計算してみると、公式のヘルプ通り、
1.91 : 1の比率になっている。↓

画像5

②▶プロフィールヘッダー画像に適切な、画質と比率

ヘルプによると画像の一部が表示される仕様らしい。↓

画像4

1280 x 670 の内、1280 x 216 が表示される。
としたとき、
綺麗に表示される 1920 x 1006 の場合は、内 1920 x 304 が表示される
計算になる。↓

画像5

しかし、実際に 1920 x 1006 の画像を設定しても、
思った通りの表示とはズレていた。
画像を何度が調整した結果、
(中央から)1898 x 322 が表示されているらしい。

僕のプロフヘッダーはこのサイズで作っているので、
不自然な余白がなく、綺麗に表示されているのが分かるハズだ。

③▶まとめ

思い通りのものを表示したいなら、
それぞれ以下のような画像を設定するのがよさそう。

記事のタイトル → 670 x 1280
(見切れることなく表示される)

プロフのヘッダー画像 → 1920 x 1006
(実際に表示されるのは 1898 x 322 の部分)

(単位はピクセル)

▶宣伝

画像編集のお仕事募集していて、
ツイッターのDMの方で受付ています。
noteの見出し画像、Youtubeのサムネイルとか。

この記事が参加している募集

noteの書き方

この記事が気に入ったらサポートをしてみませんか?