TwitterでPNG8の透過画像を使うと透過部分が黒になる

一時的な状況である可能性も十分にありますが、現時点での状況を一応記録として残します。

テーマは、Twitterに表示されたPNG8の透過部分がどうなるかについてです。

PNG8の透過部分が変化する

おそらくすが2017年1月29日付近で、PNG8の透過部分が以下のようにかわりました。

• 透過部分が黒色になる
• 透過部分が稀に白色になる

2つめの白色になるというのは、29日にこの件に気付いた際にいくつか確認した中で、たまに黒ではなく白になっていたことを確認したためです。

その後は確認していませんので、今も発生するのかはわかりませんが。

影響のある範囲

以下の画像で発生を確認しました。

• ツイートに添付された画像
• Twitter Card で設定された画像

なお、この変化は過去画像にも及びます。

以下のように当サイトの以前の Twiiter Card 用のラージサイズ画像が、透明から黒に変わっていることを確認しました。

以下の Card validator で見れば、いちいちURLを記載したツイートを行って試さずとも状況が確認できます。

• Card validator

Twiiter Card の画像の更新

本筋とは関係ありませんが、上記の Card validator を使えば、Twiter Card の画像が最新の状態に更新できる模様です。

ただ、どの端末やアプリを使っても更新されているのかどうかという点は分かりませんので、単に自分の環境だけかもしれませんが。

縮小されてから引き延ばされてボケる

恐らく同タイミングで以下のような状況にもなっています。

• Twitter Card に設定した画像が386×202にリサイズされる
• リサイズ後にタイムラインの横幅に応じた大きさまでwidth:100%で拡大される

以前はそれなりのサイズだったと思うのですが、現在は違います。

配置箇所を考慮した必要な縮小なら特に困らないと思いますが、縮小されたサイズから引き延ばされるために画像がボケてしまい、見た目がよくありません。。

ツイートに添付する形であれば縮小はされないようですが、Twitter Card で設定した画像は問答無用でした。

結び

解決法は簡単で、綺麗な透過画像を使いたい場合にはPNG24を用いればよいだけです。

Twitter Card に透過を使う必要性はないのでタイムライン上で見かけることは少ないと思いますが、当サイトのように透過で作った画像をそのままSNSの画像としても利用している場合はこの問題に遭遇します。

こういった仕組みでもない限りは、あまり気にする必要もないでしょう。