Facebookにキレイなカバー写真を投稿するポイント

ウェブテクノロジで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には「ファイルサイズ調整機能」がついていますので、任意のファイルサイズに収まるように画像を変換することができますが……。

100KB以内に収まるよう変換したJPEG画像100KB以内に収まるように変換したJPEG画像
(特に輪郭部分にノイズが目立つ)

 

このファイルサイズでJPEGを作ると、ロゴやキャラクターの輪郭周りにノイズが目立ち、「キレイ」とはいえない仕上がりになってしまいます。あらかじめFacebookの指定したフォーマットでデータを用意しておいても、あまり効果は期待できそうにありません。

 

キレイなカバー写真の鍵は画像フォーマットにあり

Facebookのヘルプには「ロゴやテキストベースのコンテンツの画像には、PNGファイルを使用することで、より良い結果を得ることができます。」と書かれています。フォーマット的にもロゴや画像化した文字はPNGやGIFなどのほうが向いていると言えますが、実際どれくらい違いが出てくるのでしょうか。

JPEGとPNGでアップロードした画像と、実際にカバー写真として表示された画像を並べてみました。JPEGはアップロード後にFacebookの言う「適正サイズ」の100KB近くまで再圧縮されてしまい、ロゴやキャラクターの顔などにモスキートノイズが目立つようになってしまいました。

一方のPNGはファイルサイズこそ大きいものの、ロゴやベタ塗りの箇所はなめらかです。

JPEG PNG(24bit)
Facebookカバー写真アップロード元画像(JPEG)アップロード前 152KB
(必要充分な画質ではあるものの、ロゴ内側や輪郭線周囲に微妙にJPEG特有のノイズが見られる)
Facebookカバー写真アップロード元画像(PNG)アップロード前 394KB
(PNGは可逆圧縮のため画質劣化しない)
Facebookアップロード後の画像(JPEG)アップロード後 100KB
(facebook側で自動的に圧縮され、ロゴやキャラクターの顔にノイズが目立つように)
Facebookアップロード後の画像(PNG)アップロード後 415KB
(なぜかアップロード前よりもファイルサイズが大きくなった。もちろん画質劣化はない)

ロゴの部分と、こみぽちゃんの顔をアップにした画像はこちら。ベタ塗りの部分が多いロゴは、高圧縮のJPEG特有のモスキートノイズが目立ちます(画像をクリックで3倍に拡大)。

FacebookにJPEGとPNGでアップした時の比較画像(こみぽちゃんアップ)

FacebookにJPEGとPNGでアップした時の比較画像(コミPo! ロゴ)

 

ちなみに、GIFやTIFFなど、他のフォーマットの画像をアップロードしたところ、JPEGに変換されてしまいました。画質は上の画像とほぼ同じでしたのでここでは省略します。

アップロード後にファイルサイズが増えているのが気になるところですが、画質だけ見れば「Facebookのカバー写真はPNGのほうがキレイ」ということになります。

 

気になるファイルサイズ、小さくするにはやっぱり「減色」

さて、キレイなカバー写真にはPNGを使う、ということはお分かりいただけたかと思うのですが一つ問題点が発生します。それは「PNGのカバー画像はファイルサイズが大きい」ということです。Facebookはスマートフォンアプリからもアクセスでき、その時もカバー画像が表示されますので、ファイル容量が大きいものはなるべく避けておきたいところです。

そこで活躍するのは過去に「将来の帯域制限を見据えると、”減色”です。」「スマートフォンに大事なのは「ピクセルサイズ」じゃなくて「ファイルサイズ」です」などのエントリーで取り上げてきている「減色」です。PNGはインデックスカラーにして、色数を減らせばファイルサイズも小さくなります。

早速試してみた結果がこちら。

PNG (24bit) PNG (256色)
Facebookカバー写真アップロード元画像(PNG)アップロード前 394KB Facebookカバー写真アップロード元画像(PNG256色)アップロード前 114KB
(減色処理はOPTPiX imestaで行いました)
Facebookアップロード後の画像(PNG)アップロード後 415KB Facebookアップロード後の画像(PNG256色)アップロード後 312KB
(なぜか24bitPNGに変換され、ファイルサイズが増加)

256色のPNGが「アップロード前よりもファイルサイズが増えている」という結果になっています。これは、FacebookのシステムがインデックスカラーのPNGをアップロード後に(どういうわけか)ダイレクトカラーのPNG24bitに変換してしまうからです。

とはいえ、フルカラーのPNGを直接アップロードするより100KBもファイルサイズが小さくなりました。ページの表示速度を考えた場合、100KBという数字は馬鹿にできない数字ですから、カバー写真には減色処理したPNGを使うのがおすすめと言えます。

 

今回、減色にはOPTPiX imesta 7 for Mobile & Socialを利用しました。こういったカバー画像の減色処理だけでなく、モバイルサイトに使用する画像の変換、ソーシャルゲームに使用する画像の減色・加工処理などにもご利用いただけます。フルトライアルもご用意しておりますので、是非お試しください。

※注:上記の内容は2012年12月現在のFacebookの仕様に基づいたもので、仕様が変わる可能性がありますのであらかじめご了承ください。

関連するエントリー

タグ , | 2018/06/22 更新 |

コメント

2件のコメント

  • 梶山孝之
    2013年5月19日 16:13

    Facebookに投稿する画像等の保存先について、教えて下さい!

    Facebookに毎日、画像(500KB/枚Х6枚程度)を投稿しているのですが、気のせいか?富に最近、立ち上がり(ページ移動も含む)速度が遅くなったような気がします。

    これら自分で投稿した資料等は、自分のパソコン内のどこかに保存されているのでしょうか?、あるいは他の専用サーバーなどに保存されるのでしょうか? それとも、他に原因があるのでしょうか?

    こちらで出来ることなら、対応したいのですが・・・・例えば、もっと画素数を下げるとか、枚数を減らすとか・・・?

    宜しく、御願いします。

    • ウェブテクノロジ
      2013年5月24日 11:11

      記事にある通りFacebookにアップロードした画像は、サーバーでの処理が行われます。ですので、「処理後の画像」という事であればFacebookのサーバー側にしかない、ということになります。HDDなどに保存する場合は、画像を表示させた後「ファイル名をつけて画像を保存」などで保存する必要があります。

      また、画像が増えれば増えるほどそれだけページ全体の読み込みには時間がかかるようになりますので、全体的な速度は遅くなってしまうと思われます。画素数や枚数を減らせば読み込むデータ量は減りますので、速度は改善すると思いますがいかんせん検証を行なっておりませんので、あくまで一般論として……ということでお願いします。

コメントはこちら

※ コメントは承認後に公開されます。