metaタグ指定のTwitter(ツイッター)画像が荒くなる原因と対策

最新webニュース

先日、問い合わせ、相談があった話です。webサイトにあるtwitterのツイートボタン。あるユーザーさんが、このボタンを教えて、webサイトをツイートしてくれたのに、ツイートしてくれた先の画像が、荒れてしまって困っている、とのこと。

さっそく見てみましたら、確かに画像がすごく大きく引き伸ばされているし、かつ、すごい荒れようでした。

サイトを見てみると、ちゃんと、metaタグ、OGPタグで専用の画像はあがっているようだったのですが。

ちなみにmetaタグはこんなかんじで入っていました。
<meta name=”twitter:image” content=”XXX.png”>

そこで、今回はTwitter(ツイッター)にあげたときに、画像が荒れてしまう現象についての原因究明と、その対策についてご紹介です。

1 Twitter(ツイッター)にアップした画像は強制的にJPGに変換される
2 対応策１：Twitter(ツイッター)向け画像最適化ツールを使う
3 対応策２：Twitter(ツイッター)に投稿する画像のサイズを最適化
4 まとめ：Twitter(ツイッター)で画像を荒れないようにするには
5 twitter 関連記事

Twitter(ツイッター)にアップした画像は強制的にJPGに変換される

Twitter(ツイッター)にアップしたときに画像が荒れている原因の１つは、強制的にjpgファイルに変換されることによるものがありそうです。

その結果画像が劣化してしまう、という仕様があるんだそうです。

しかも、jpgファイルに変換されるだけではなく、ファイル容量が大きすぎる画像の場合もJPEGであっても再圧縮されるとのことで、結果的に、画像が荒れるようになっている状況です。（2019年3月25日現在）

ちなみに、Twitter(ツイッター)は、もともと5MBまでの画像ファイルを受け付けていたようですが、今は、その仕様はなくなって、それ以上でもアップできるようですが、これでは、あまり意味がなさそうだなと思いました。

また、そもそも、縦横のサイズが小さい画像がmetaタグに設置されているケースもあります。Twitter(ツイッター)上では、決まった画像サイズで、掲載されるため、小さい画像は引き伸ばされます。結果、Twitter(ツイッター)にアップした画像が荒れてしまうわけです。

対応策１：Twitter(ツイッター)向け画像最適化ツールを使う

簡単にご紹介しますが、こんなTwitter(ツイッター)専用ツールがあるみたいです。

Twitterにアップする画像の劣化を防ぐ「Twitter向け画像最適化ツール」
通常のPNG画像やドット絵を劣化なしでアップロードしたい場合に重宝
https://forest.watch.impress.co.jp/docs/serial/netserv/1047319.html
本サービスを使うと、これらの画像をTwitterにアップロードしても劣化しない透過PNGへと変換してくれるので、元のクオリティを保ったままTwitter上で公開できる。また、ドット絵を2倍（最大512×512ドット）に拡大するモードも用意されているので、小さい画像をTwitter上で見やすいサイズへと拡大加工できる。

引用元　https://forest.watch.impress.co.jp/docs/serial/netserv/1047319.html

これは便利ですよね。すぐに使えます。