アスペクト比16:9で整数の画像サイズリスト

支給写真をトリミングしてパーツ化する際、トリミングしたい部分が表示サイズの2倍以上の大きさがある場合と、そうでない場合があります。２倍以上のサイズがある場合はトリミングしてからリサイズするだけでよいのですが、2倍に満たない場合は、表現を諦めるかレティーナ表示を諦めるかします。

結果、レティーナ表示をあきらめることが多いのですが、それでも、最大サイズでトリミングしようと試みます。しかも、縦横とも偶数値でトリミングしようと試みます。しかし、アスペクト比16:9が必須な場合のサイズ探しはなかなか時間のかかる作業で・・・

同じようにお困りの方はぜひご活用ください。

サイズリストのその前に

web画像は整数かつ偶数で！

Web上での表示単位はピクセルです。
1ピクセルは最小単位でそれ以上分解できません。
では、白い背景に0.5ピクセル角の黒い四角形が表示される場合、そのピクセルはどのように表示されるのでしょうか？

データ上では、1ピクセルの1/4が黒色であり、残りの3/4は白色ということになりますが、1ピクセルは分解できません。そのため、そのピクセルはその中間色であるグレーで表示されることになります。
つまり、0.5ピクセルの黒い四角形は、実際の表示上では1ピクセルのグレーの四角形として扱われ、画像の縁がぼやけて表示されるなど、意図した表示ができなくなるわけです。

同様に、web用画像のサイズは奇数も避けるほうが無難です。
webではさまざまなサイズで表示させることがありますが、特にレティーナディスプレイのことも考えると、2で割り切れるサイズにしておきたいものです。

ストレスなく綺麗に表示させるため、最初に熟考することが大切です。

って言っても、アイキャッチ画像の推奨比率とされている1.91:1、そしてその推奨サイズが1200×630。計算するとなんかアレな感じだから難しいね。

アスペクト比16:9で整数のサイズ一覧（幅64px〜2400px）