metaタグで入れた画像がTwitter(ツイッター)で荒くなる原因と対策

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

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

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

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

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

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

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

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

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

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

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

対応策1: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

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

対応策2:Twitter(ツイッター)に投稿する画像のサイズを最適化

Twitter(ツイッター)に画像を投稿する際に最適なサイズに、画像を編集、加工をしておく施策です。PC表示とスマホ表示では、最適な比率が異なりまして。

それぞれ最適な比率、サイズは

PCは2:1の比率。
Twitter(ツイッター)PC版タイムラインでの表示画像の縦幅は506px。

スマホの場合は、16:9の比率。
Twitter(ツイッター)スマホ版タイムラインでの表示画像の縦幅は約450px。

そこで、最大公約数で計算すると。

Twitter(ツイッター)でアップロードする画像サイズの最適なサイズ

横506px × 縦253px

になります。

これをmetaタグ、ogpタグの画像として、加工して、webサイト内にアップロードをしましょう。

なお、比率が変わってしまう場合、画像は切り取られます。
それゆえ、画像内の大事な情報は中央に集めるようにしましょう。

まとめ:Twitter(ツイッター)で画像を荒れないようにするには

1、Twitter(ツイッター)画像最適化ツールで透過PNGに変更

2、画像サイズ 横506px × 縦253pxで画像を作る
これを、metaタグで記載するようにする

というかんじでした!