Twitchサブバッジのリサイズ
Twitchサブスクライバー用バッジには、正方形の3サイズ（72, 36, 18ピクセル）が必要で、それぞれ25 KB未満にする必要があります。ここで一度切り抜き、3サイズを1つのZIPでエクスポートし、各ファイルが制限内に収まっているか確認できます。18ピクセルのバージョンが、デザインが機能するかどうかを決めます。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, GIF, AVIF
Twitchサブバッジのリサイズとは
サブスクライバー用バッジは、チャット内の視聴者名横に表示される小さなマークで、独自のサイズセットを使用します：72×72、36×36、18×18です。これらはエモートのサイズとは異なり、エモートファイルをバッジフォームにアップロードすると、微妙に間違ったサイズセットが生成されます。
18ピクセルが最も重要です。これがチャット内のユーザー名横に表示されるサイズであり、18ピクセルではイラストはイラストではなく、シルエットと色に過ぎません。判読性の高いバッジは、ほぼ常に単一の大胆な形：ハート、王冠、文字、内部のディテールがないシンプルな動物の頭などです。
このページでは3つのバッジフレームを保持し、それらをまとめてZIPでエクスポートし、各ファイルをTwitchの25 KB制限で測定します。すべてがブラウザ内で動作するため、依頼されたがまだ発表されていないバッジセットはあなたのマシン上に留まります。
エモートは異なるサイズの組み合わせを使用するため、エモートリサイザーがそのためのページです。
バッジがレイヤーファイルなど、ブラウザで開けない形式で届いた場合、まずPNGに変換してください。。
バッジのサイズとそれぞれの表示場所
3つのサイズ、それぞれ異なる用途。最も小さいサイズが、視聴者が一晩に何度も実際に目にするものです。
| サイズ | 表示場所 | そのサイズでの可読性 |
|---|---|---|
| 72 × 72 | バッジ設定とプレビュー | 細部を含むフルアートワーク |
| 36 × 36 | 大きなチャットレイアウトとオーバーレイ | メインの形状とアウトライン |
| 18 × 18 | チャット内のユーザー名横 | 1つのシルエット、1つまたは2色 |
18ピクセル向けのデザイン
18ピクセルの正方形には、合計324ピクセルのスペースがあります。1つのアイデアを収めることができます。内部があるもの――目のある顔、カウターを持つロゴ、2桁の数字――は塊に崩れてしまいます。
逆のアプローチを取ります：まず18ピクセルでバッジをスケッチし、判読可能かどうかを判断し、その後72ピクセル版が持つことができるディテールを追加します。バッジセットのティアも、ディテールではなく形状や色で区別すべきです。なぜなら、ディテールは小さいサイズでは最初に削除されるものだからです。
- 1つのシルエット、バッジの約1/4より小さい内部ディテールなし。
- Twitchの暗いチャットとライトテーマの両方に対して高いコントラスト。
- 追加の装飾ではなく、色とアウトラインの太さでティアを区別。
- 細いアウトラインを避ける：72ピクセルでの1ピクセルは18ピクセルでの0.25ピクセルに相当し、それは実質何でもない。
25 KB制限の実際
適切にデザインされたバッジでは、制限は全く問題になりません：72ピクセルの正方形のフラットな色は、PNGに圧縮すると数キロバイトになります。アートワークがレンダリングされた3Dオブジェクト、写真、グラデーションが豊富なイラストとして届いた場合にのみ、制限が効きます。
もしそれがあなたが持つものである場合、WebPでエクスポートすると、品質検索がサイズに合うバージョンを見つけます。しかし、グラデーションが必要でないと機能しないバッジは、18ピクセルでも読めないことが多いので、制限はエンコーダーではなくデザインについて警告していることが多いです。
アップロードフォームに入れるもの
Twitchは、サブスクライバーの各ティアと月次マイルストーンごとにバッジを要求し、それぞれに3サイズが必要です。このページからのZIPには、サイズ名でファイルが1つずつ含まれているため、フォームの3つのスロットに対応させるのは明確です。各ティアのアートワークについて、切り抜きを繰り返してください。
よくある質問
Twitchのサブスクライバー用バッジのサイズは何ですか？
3つのサイズが必要です：72×72、36×36、18×18ピクセル。すべて正方形で、すべて25 KB未満にする必要があります。これらは意図的にエモートのサイズとは異なるため、エモート用にエクスポートされたセットはバッジアップロードフォームには適合しません。
なぜ私のバッジはチャットで塊のように見えますか？
チャットは18ピクセル版をレンダリングするためで、これは合計324ピクセルです。内部のディテール、細いアウトライン、カウターを持つものはすべて1つの塊に融合します。読めるバッジは、1つまたは2つの高コントラストな色の単一のシルエットです。
バッジのティアを互いに区別するにはどうすればよいですか？
追加の装飾ではなく、色とアウトラインの太さで区別します。18ピクセルでは余分な装飾は見えないため、ディテールでティアを区別するセットはチャットでは同一に見えます。色相と全体の形状を変更することが、視聴者が実際に区別できるものです。
バッジはエモートと同じファイルサイズ制限がありますか？
はい、ファイルあたり25 KBです。これはバッジアートワークではほとんど問題になりません。なぜなら、必要上、通常はフラットでシンプルだからです。問題が発生する場合、原因は通常レンダリングされたまたは写真のソースであり、そのソースは18ピクセルでも判読性の問題があります。
エモートのアートワークをバッジとして再利用できますか？
そこから切り抜くことはできますが、サイズは異なり、判読性の基準は高くなります。エモートはチャットで28ピクセルで表示され、バッジは18ピクセルで、テキストの横に単独で表示されるわけではありません。エモートとして生き残るだけのアートワークは、バッジとして機能する前に簡略化が必要です。
ここでエクスポートすると、私のバッジアートワークはアップロードされますか？
いいえ。切り抜き、3サイズのリサイズ、エンコード、ZIP作成のすべてがこのブラウザタブ内で生成されます。何も送信されず、アカウントも必要ありません。公開していないアートワークを信頼する前に、DevToolsで確認できます。