以前、こんなツイートをしました。

最近、プロフィール画像とかを border-radius 使って正円にしてるのよく見かけるけど、あれって描画処理にかかるコストってどんなもんだろう。普通に正円の画像を切り出した方が描画速い気がするけど、何か理由があるのかな。

— mzmjp (@mzmjp) 2014, 4月 19

「border-radius で画像丸くするより、丸くした画像使った方がパフォーマンスいいんじゃないのかなあ。何でそうしないんだろう」という疑問。今回はこの疑問に対する答えの一つになりそうなものを見つけたので書き留めておきます。

先日、Tokyo WebGL Meetup のサイトで、border-radius でプロフィール画像を丸くしているのを見つけました（ちなみに、このイベントは iOS 8 から Safari で動くようになる WebGL をテーマにしたイベントです。iPhone の小さな画面の中で、3DCG 動くのヤバい）。プロフィール画像のソースを見てみたら、”pbs.twimg.com” を発見。ということは、 Twitter からプロフィール画像を持ってきてるのかな。

Twitter にアップするプロフィール画像は四角。Twitter からプロフィール画像を持ってくると、画像は四角のまま。それを丸く見せるには、border-radius を使う。というのが、最初の疑問の答えの一つになるんじゃないかなあ、と思いました。

余談ですが、「サイトで使うプロフィール画像を何で Twitter から持ってくるのか」も考えてみました。これは、プロフィール画像を変更した際に、自動で切り替わってくれるからではないでしょうか。サイト上のプロフィール画像が古いまんまということは無くなりそうです。これは、プロフィール画像を自分で上げずに Twitter から持ってくるメリットの一つになるのではないでしょうか。