![見出し画像](https://assets.st-note.com/production/uploads/images/28527095/rectangle_large_type_2_03c13dd633368d67260884cae33c0105.png?width=1200)
記事タイトル画像/プロフヘッダー画像の適切な画質と比率について
①▶タイトル画像に適切な、画質と比率
noteを始めるにあたって、記事の見出し画像を設定する際、
こんなトリミング画面が出る。↓
この画像の比率は固定されているようで、
合っていない比率のものだと、
どうしても全体が収まらない形になってしまう仕様。。。
公式のヘルプから探すとこんなことが書いてあった。↓
どうやらツイッターの画像比を元にしているらしい。
検証ということで、
適当に他の人の投稿からタイトル画像を拝借してみると、
JPEG画像 → 1280 x 670
PNG画像 → 1280 x 671
(単位はピクセル)
という結果になった。
(なんで形式に依って1pxズレてるのかは謎)
計算してみると、公式のヘルプ通り、
1.91 : 1の比率になっている。↓
②▶プロフィールヘッダー画像に適切な、画質と比率
ヘルプによると画像の一部が表示される仕様らしい。↓
1280 x 670 の内、1280 x 216 が表示される。
としたとき、
綺麗に表示される 1920 x 1006 の場合は、内 1920 x 304 が表示される
計算になる。↓
しかし、実際に 1920 x 1006 の画像を設定しても、
思った通りの表示とはズレていた。
画像を何度が調整した結果、
(中央から)1898 x 322 が表示されているらしい。
僕のプロフヘッダーはこのサイズで作っているので、
不自然な余白がなく、綺麗に表示されているのが分かるハズだ。
③▶まとめ
思い通りのものを表示したいなら、
それぞれ以下のような画像を設定するのがよさそう。
記事のタイトル → 670 x 1280
(見切れることなく表示される)
プロフのヘッダー画像 → 1920 x 1006
(実際に表示されるのは 1898 x 322 の部分)
(単位はピクセル)
▶宣伝
画像編集のお仕事募集していて、
ツイッターのDMの方で受付ています。
noteの見出し画像、Youtubeのサムネイルとか。