この記事では、Twitterで使われる画像サイズと比率を徹底解説し、ツイート投稿用の画像サイズと、リサイズ方法を画像20枚でご説明します。
僕自身、グラフィックデザイナーとして10年以上の経歴があり、普段からTwitter用ヘッダー画像やツイート用画像などのWEB画像を制作しているので、この記事にある程度の信用性はあると思います。
このようなTwitter画像の悩みを抱えるユーザーってけっこう多いと思います。
というのも僕がそうだったし色々なツイートを分析したところ、
「画像がうまく表示させられない」ってツイートが多かったです。
“ ただつぶやくだけの個人的なツイート ”なら気にしなくてもいいですが、Twitterでの集客やビジネスでの運用、または商用利用でTwitterを利用するなら画像を最適なサイズに作り込むことでクオリティの高いツイートに変わります！
それだけで集客率が格段にアップしますからね！
ヘッダー画像を『Canva』などご自身で作成される方は【ヘッダー画像作成用テンプレート】もあるので是非使ってみてください。
手っ取り早くTwitterでの画像サイズが知りたい方はこちら（クリックすると詳細に移動します）
「ツイートする画像の画質をほぼ劣化させずに投稿したい…」
その方法についてはほぼ劣化（圧縮）させずに画像を高画質でツイートする方法を参考にしてみてください。
「リストってどういう風に使えばいいの？」
そんな方はリストの使い方と特定のツイートだけ表示する（見る）方法の記事を参考にしてみてください。
下記より画像サイズの解説をしていきます。
Twitter用ヘッダー画像サイズ｜横1500px × 縦500px
Twitterのヘッダー画像サイズは以下の通り。
| 内容 | サイズ・形式 |
|---|---|
| 画像サイズ | 1500px × 500px（横×縦） |
| 表示可能領域 | 1500px × 440px（横×縦） |
| 画像の比率 | 3：1（横×縦） |
| ファイルサイズ | 最大で10MBまで |
| 画像ファイル形式 | JPG・PNG |
Twitter用のヘッダー画像サイズは
『 横1500px × 縦500px 』です。
表示可能領域は
『 横1500px × 縦440px 』です。
比率は
『3：1』になります。
上のアイコン部分（電波や電池アイコン）のせいで表示されなくなる可能性があるので、表示させたい部分を下から440pxの位置までに抑えると問題なく表示されます。（画像の一番上から60pxまではアイコンで見えづらくなります）
ちなみに僕がTwitterで設定してる下記のヘッダーも
『横1500px × 縦500px』で、表示させたい部分を下から440pxに抑えてます。
※現在は下記の新しいデザインに変更してます。
僕のTwitterアカウント（@osunnotsubuyaki）で実際にヘッダーの配置確認ができます。
このヘッダーの場合はスマホで見たときに、スマホ画面上部にある『電波アイコン』や『時計表示』に被らないように少し下に寄せてます。
もうひとつ注意する点が左下のプロフィールアイコン部分。
この部分に文字が重なると丸アイコンで文字などが見えなくなるので注意が必要です。
ヘッダー画像作成用無料テンプレート
表示されない領域を避けるためにテンプレート用画像を作成したので、画像作成アプリの『Canva』や『Illustrator』などでヘッダー画像を作るときにお使いください。
使い方は画像を最初に配置して、その上に置きたい素材やテキストなどを配置すればアイコンに被らないようにヘッダーが作成できます。
端末によっては表示領域が違う場合があるので参考までにお願いします。
「自分でいい感じのヘッダーが作れない…」って方は
ココナラでデザイン作成のご相談に乗りますのでお気軽にお問い合わせください。
『おすんブックデザイン』で出品してます！
Twitterのアップデートで画像サイズの仕様変更がたまにあるので、最新情報はこちらのTwitterアップデート情報から詳細が確認できます。
Twitterプロフィールアイコンサイズ｜400px × 400px
Twitterのプロフィールアイコンサイズは以下の通り。
| 内容 | サイズ・形式 |
|---|---|
| 画像サイズ（推奨） | 400px × 400px |
| ファイルサイズ | 最大で10MBまで |
| 画像ファイル形式 | JPG・PNG |
Twitter用のアイコン画像サイズは
『横400px × 縦400px』です。
表示可能領域は
同じく『横400px × 縦400px』です。※1
比率は
『1：1』になります。
※1 プロフィールアイコンは四隅が切り取られるので注意が必要です。
画像サイズ以外はヘッダーと同じです！
ツイート投稿用画像サイズ｜1024px × 576px
ツイート投稿用画像の最適サイズは
『横1024px × 縦576px』です。
比率は
『16：9』になります。
| 内容 | サイズ・形式 |
|---|---|
| 横幅の最大値 | 1024px |
| ファイルサイズ | 最大で5MBまで、GIF画像は3MBまで |
| 画像ファイル形式 | JPG・PNG・GIF |
PC版でもある程度うまく表示させたい場合、『506×253px』の画像サイズにしましょう。これは2：1のアスペクト比になり、スマホでもPCでもある程度うまく表示されるサイズになります。
スマホで見た場合に左右が少し切り取られるぐらいなので、伝えたいことはなるべく画面中央に配置すれば特に問題ありません。
ちなみにツイート投稿画像をキレイに4枚表示させる方法は『16：9』で加工すればOKです！
下記は4枚の画像を『16：9』で投稿したツイートです。
ツイート画像を高画質で投稿したい場合は、画像をほぼ劣化（圧縮）させずに高画質でツイートする方法の記事を参考にしてみてください。
ツイート画像を加工するおすすめツール
アスペクト比計算ツール
お持ちの画像が16：9になるとどう表示されるかアスペクト比計算ツールで確認できます。
画像赤枠に数字を入れるか、お持ちの画像を添付することで簡単にアスペクト比がわかります。
詳しい使い方に関してはアスペクト比計算ツールの使い方を参考にしてみてください。
ILOVE IMG
実際に16：9に切り取り加工をしたい場合はILOVE IMGの画像変更ツールで縦横比を維持したまま切り取り加工ができます。
この比率さえ守っていれば切り取られずに表示されますが、スマホの横幅（大体が1080px）以下の横幅だと画像が荒くなります。
例えば16：9の『横400px × 縦225px』でも表示自体は問題ないですが、少し画像が粗くなります。
下記のツイート画像は『横400px × 縦225px』です。
ツイートを見てもらえるとわかりますが、若干画質が粗いです。
こちらは『横800px × 縦450px』です。
このサイズのほうがキレイですね！
こちらは『横1024px × 縦576px』です。
画質も良く、最適でバッチリです！
iPhoneでも画像のリサイズをすることができます。
下記ツイートもiPhoneで『16：9』にリサイズしてます。
下記のツイートは506×253pxの2：1の画像。
解像度は低いですが、画像中央に表示したい素材を寄せればサイズはあまり気にしなくて大丈夫です。
以下でiPhoneでのリサイズ方法とTwitterアプリ内でのリサイズ方法を画像付きで説明します。
ツイート画像をiPhoneでリサイズする方法
① iPhoneの【写真フォルダ】内からリサイズしたい画像を選択して右上の【編集】をタップ
② 左下にある【矢印と四角のマーク】をタップ
③ 右下の【四角が重なったマーク】をタップ
④ リサイズする比率が出てくるので【16：9】をタップ
⑤ 右下のチェック【 ✔ 】をタップしてリサイズ完了！
これでTwitterで投稿ツイート用の画像サイズが最適化されたので、画像が切れることもなく投稿できます。
次にTwitterアプリ内でのリサイズ方法を説明します。
ツイート画像をTwitterアプリ内でリサイズする方法
① ツイートしたい画像を選んで画像右下の「筆アイコン」をタップ。
② 画面右下の【リサイズ】を選択
③ 画面下にある【ワイド（横長の四角）】を選択
（デフォルトではオリジナルのままになっています）
| メニュー名 | 比率 |
|---|---|
| オリジナル | 任意の画像比率 |
| ワイド | 横16：縦9 |
| スクエア | 横1：縦1 |
④ 切り取られる範囲が指定されるので画面右上の【適用】をクリックしたあと、同じく画面右上の【保存】をクリック。
⑤ すると画像では分かりづらいですが少し横長にリサイズされてます。
あとはツイートするテキストを入力してツイートするだけ。
TL（タイムライン）で見てもちゃんと表示されています。
ツイート用の画像はiPhone内でもTwitterアプリ内でも簡単に作ることができます。
ツイート用画像はJPGではなくPNG形式にしないと画像が劣化します
補足ですがTwitterで投稿した画像形式がJPGだと、画像がかなり圧縮されて劣化してしまいます。
せっかく撮った綺麗な写真や自分の作品を綺麗に表示させたいならPNG形式でツイートしましょう。
Twitterで投稿したJPG形式の画像はかなり圧縮されて劣化してしまいますが、PNG形式の場合は劣化しないため、可能であればPNGで保存してからツイートするようにしましょう。
JPGをPNGに変換するなら下記のアプリで変換できます。
コメントはこちら