画像を見切れさせずにLINE Messaging APIで送信する
はじめに
どうも、LINEトーク画面に送信される画像を絶対に見切れさせたくないマンです。
この記事は、公式ドキュメントに記載されていない(少なくとも著者が見つけられなかった)LINE Messaging APIでの画像送信に関する仕様を、実験して確かめた結果をまとめたものです。
あくまで2025年8月3日時点のLINE環境における私的な実験に基づく内容ですので、将来のアップデートであっけなく変更される可能性もある点にはご留意ください。
ドキュメント上の制約事項
公式のAPIリファレンスを見ると、画像メッセージの制約は以下のとおりです。
- オリジナル画像のサイズは10MB以内
- プレビュー画像のサイズは1MB以内
- 画像URLは2000文字以内
- 対応フォーマットはJPEG, PNGのみ
上記は、画像単体を送信する「画像メッセージ」の制約ですが、ほかのメッセージタイプの場合はドキュメントを見ると追加の制約について記載があります。
たとえば、画像カルーセルテンプレートメッセージの場合は、横幅が1024px以内と記載されています。
最大解像度はどのくらいか
画像メッセージは 9999 x 9999 でも送信できる
まず、通常の画像メッセージには解像度に関する記載がありませんが、とりあえず9999px四方の画像までは送信できることを確認しました。
また、テンプレートメッセージで画像の最大幅が1024pxと記載されてはいますが、実際には9999px四方の画像を送信できることも確認しました。
画像カルーセル、通常カルーセルともに送信できています。
通常カルーセルでも 9999 x 9999 が送信できる
これ以上に大きな画像を送信したいというケースは稀だと思われるので検証していませんが、画像の解像度に関してはあまり気にせず送ってしまっても表示されないということはなさそうです。
メッセージの角丸はどのくらいか
細いフチ取り線は角で見切れてしまう
画像がフチ取りされているケースなど、プレビュー画像の角丸で消えてしまう範囲を知っておきたいこともあると思います。
単純な対策としては、フチ取り線を太くするなどありますが、実はメッセージ種別によって角丸の大きさが異なります。
フチ取り線を太くすれば違和感が少ない
画像メッセージの角丸
画像メッセージの場合、角丸の半径は横幅1024pxの場合で40px程度です。
ただし、これは正方形の場合です。
width: 1024px, border-radius: 40px
縦長の画像の場合、アスペクト比1:2だと角丸の半径は30px程度になります。
40pxだと余白が出ているのがわかる
ちなみに横長の画像の場合は、トーク画面上での横幅に上限がある都合上なのか、正方形の画像と横幅が同じになるためズレません。
横長の画像は問題ない
通常カルーセルの角丸
テンプレートメッセージの通常カルーセルの場合、同じく角丸の半径は画像メッセージと変わりませんが、角丸にかぶるのは画像の上側のみです。
width: 1024px, border-radius: 40px
画像カルーセルの角丸
テンプレートメッセージの画像カルーセルの場合、角丸の半径は横幅1024pxの場合で58px程度です。
画像カルーセルは強制的に正方形の画像が表示されるため、アスペクト比に関わらず角丸の半径は同じです。
width: 1024px, border-radius: 58px
プレビューが見切れないアスペクト比
めっちゃ横に長い画像を準備
画像メッセージのプレビューは、一定のアスペクト比を超えると見切れてしまいます。
たとえば、上に示したようなアスペクト比が10倍以上あるような画像を送信すると、プレビューは以下のようになります。
左右が見切れてしまう
縦が長い画像の場合も同様です。
いろいろと実験してみた結果、
- 横長の場合、アスペクト比が約
20:7
を超えると見切れる - 縦長の場合、アスペクト比が約
1:4
を超えると見切れる
ということがわかりました。
20:7くらいまではプレビューが見切れない
1:4くらいまではプレビューが見切れない
きっちりピクセル単位で二分探索したわけではないですが、そこそこ正確な値だと思います。
端末による差異
なお、私が試した端末では、どの端末を用いても見切れるアスペクト比は同じ結果になりました。
- iPhone 15
- iPhone 16
- iPhone 12 mini
- moto g53y
まとめ
ドキュメントに明記されていない部分の仕様について、実験した結果をまとめました。
角丸に関してはフチ取りしない場合はあまり気にする必要はなさそうですが、アスペクト比によってプレビューが見切れてしまう問題は見落としがちなので本記事を参考にしていただければと思います。
Discussion