ウェブテクノロジでWeb周りを担当しています嶋と申します。
2004年に産声を上げ、世界で8億人以上、日本でも1000万人を越える登録ユーザーを数えるFacebook。弊社でもウェブテクノロジグループと、漫画作成ツールコミPo! のFacebookページを開設しています。
Facebookページにアクセスしてまず目に飛び込んでくるのが「カバー写真」と呼ばれる帯状の大きな画像です。企業ページの、いわば看板代わりのものですから、キャラクターを入れたり、ロゴを入れたりと気合を入れて作成するわけですが、アップロードして表示された画像を見て「あれ……?」となってしまうこと、ありませんか?
Facebookにアップロードした画像はすべて変換処理される
原因はFacebookの仕様にあります。
Facebookにアップロードした画像はそのままFacebookページやタイムラインに掲載されるのではなく、アップロードのたびに変換処理されるようになっています。この変換の過程で、画質の変化が起こってしまいます。
Facebookの言う「適正サイズ」は、画質的には厳しい
「元からFacebookの仕様に合わせた画像をアップロードすればいいんじゃないの?」と思う方も多いと思います。Facebookのヘルプセンターには、カバー写真の仕様についてこう書かれています。
カバー写真のサイズは幅851ピクセル、高さ315ピクセルです。このサイズより小さい画像をアップロードすると、このサイズまで拡大して表示されます。アップロードする画像は、幅399ピクセル以上である必要があります。
できるだけFacebookページの読み込み時間を高速化するには、幅851ピクセル、高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルをアップロードします。ロゴやテキストベースのコンテンツの画像には、PNGファイルを使用することで、より良い結果を得ることができます。
このヘルプ通りに851×315、容量100KBのJPEGを作成すると、JPEGの圧縮率は(OPTPiXの設定値では)70%台後半から80%台前半くらいになります。OPTPiX imesta for Mobile & Socialには「ファイルサイズ調整機能」がついていますので、任意のファイルサイズに収まるように画像を変換することができますが……。
このファイルサイズでJPEGを作ると、ロゴやキャラクターの輪郭周りにノイズが目立ち、「キレイ」とはいえない仕上がりになってしまいます。あらかじめFacebookの指定したフォーマットでデータを用意しておいても、あまり効果は期待できそうにありません。
キレイなカバー写真の鍵は画像フォーマットにあり
Facebookのヘルプには「ロゴやテキストベースのコンテンツの画像には、PNGファイルを使用することで、より良い結果を得ることができます。」と書かれています。フォーマット的にもロゴや画像化した文字はPNGやGIFなどのほうが向いていると言えますが、実際どれくらい違いが出てくるのでしょうか。
JPEGとPNGでアップロードした画像と、実際にカバー写真として表示された画像を並べてみました。JPEGはアップロード後にFacebookの言う「適正サイズ」の100KB近くまで再圧縮されてしまい、ロゴやキャラクターの顔などにモスキートノイズが目立つようになってしまいました。
一方のPNGはファイルサイズこそ大きいものの、ロゴやベタ塗りの箇所はなめらかです。
ロゴの部分と、こみぽちゃんの顔をアップにした画像はこちら。ベタ塗りの部分が多いロゴは、高圧縮のJPEG特有のモスキートノイズが目立ちます(画像をクリックで3倍に拡大)。
ちなみに、GIFやTIFFなど、他のフォーマットの画像をアップロードしたところ、JPEGに変換されてしまいました。画質は上の画像とほぼ同じでしたのでここでは省略します。
アップロード後にファイルサイズが増えているのが気になるところですが、画質だけ見れば「Facebookのカバー写真はPNGのほうがキレイ」ということになります。
気になるファイルサイズ、小さくするにはやっぱり「減色」
さて、キレイなカバー写真にはPNGを使う、ということはお分かりいただけたかと思うのですが一つ問題点が発生します。それは「PNGのカバー画像はファイルサイズが大きい」ということです。Facebookはスマートフォンアプリからもアクセスでき、その時もカバー画像が表示されますので、ファイル容量が大きいものはなるべく避けておきたいところです。
そこで活躍するのは過去に「将来の帯域制限を見据えると、”減色”です。」「スマートフォンに大事なのは「ピクセルサイズ」じゃなくて「ファイルサイズ」です」などのエントリーで取り上げてきている「減色」です。PNGはインデックスカラーにして、色数を減らせばファイルサイズも小さくなります。
早速試してみた結果がこちら。
PNG (24bit) | PNG (256色) |
アップロード前 394KB | アップロード前 114KB (減色処理はOPTPiX imestaで行いました) |
↓ | |
アップロード後 415KB | アップロード後 312KB (なぜか24bitPNGに変換され、ファイルサイズが増加) |
256色のPNGが「アップロード前よりもファイルサイズが増えている」という結果になっています。これは、FacebookのシステムがインデックスカラーのPNGをアップロード後に(どういうわけか)ダイレクトカラーのPNG24bitに変換してしまうからです。
とはいえ、フルカラーのPNGを直接アップロードするより100KBもファイルサイズが小さくなりました。ページの表示速度を考えた場合、100KBという数字は馬鹿にできない数字ですから、カバー写真には減色処理したPNGを使うのがおすすめと言えます。
今回、減色にはOPTPiX imesta 7 for Mobile & Socialを利用しました。こういったカバー画像の減色処理だけでなく、モバイルサイトに使用する画像の変換、ソーシャルゲームに使用する画像の減色・加工処理などにもご利用いただけます。フルトライアルもご用意しておりますので、是非お試しください。
※注:上記の内容は2012年12月現在のFacebookの仕様に基づいたもので、仕様が変わる可能性がありますのであらかじめご了承ください。