Facebook ページのカバー写真を劣化させない!モアレを抑えて綺麗に!

Let's beautify!
Facebook な内容がつづきまーす!

Facebook ページのカバー写真を綺麗に!

前回 Facebook ページのカバー写真を作ってみました! で、画像をアップロードすると劣化がひどいってお話を書きました。最後に「あまり神経質にならない方が良い」とか書いておきながらやっぱり気になってしまうので調べてみました。

企業のページはどうだろう?

ヴィジュアルにこだわる企業にとってカバー写真が汚いのは、ブランドイメージの落とすのでもしかしたら綺麗なカバー写真を使っているかもしれない!と思ったので調べてみました!(内心は大手だけ特別に綺麗にアップロードする方法教えてたりするんじゃないの?とか思いながら…w)

Facebook ページでまず思いついたのがコーラ!たまに飲みたくなりますよね〜w ということでチェック!

コカ・コーラ パーク ファンページ Coca-Cola Park Fan Page
コカ・コーラ パーク ファンページ Coca-Cola Park Fan Page

こ、これは!!
劣化してますよね?!

では気を取り直して次は、ポカリスエット!
凍らせても温めてもおいしいですよね!

わたしは、
ポカリスエットが、
だいすきだぁぁーーーーー!!

ポカリスエット
ポカリスエット

あれ?ちょっとマシ?
でも明らかに劣化してそうな部分が…。

といった感じで他にも色々と見てみましたが、どこもアップロード時の劣化の影響を受けている印象でした。特には特別な方法って無いのかもしれませんね?

元の圧縮率が大切!

そうゆう訳で無難なラインを導き出す為に地道に検証してみました!
まず前回のおさらいから。

アップロードの前後の比較:虹部分

左がアップロード前で右がアップロード後になります。
特に虹の緑と青の部分が目立ちます。

アップロード前の画像: PNG 83,906 byte (851×315)
アップロード後の画像: JPEG 31,054 byte (851×315)

Facebook のカバー写真はアップロード時に、元の画像が PNG だと JPEG で画質が劣化して(Illustrator だと 50% 以下ぐらい)変換されます。なので、PNG だとどうしても JPEG に変換されて劣化してしまいモアレが目立つ状態になってしまいます。

元画像を JPEG にして%の違う画質で、ファイルを複数用意して試してみました。
プログレッシブにチェックは入れていません。左がアップロード前で右がアップロード後です。

画像の劣化比較(画質 100%)

画質 100%:
前 153,339 byte
後 30,915 byte
汚いですね!

画像の劣化比較(画質 90%)

画質 90%:
前 103,166 byte
後 30,813 byte
汚い〜!

画像の劣化比較(画質 80%)

画質 80%:
前 69,980 byte
後 68,195 byte
あれ?綺麗になりました!

画像の劣化比較(画質 70%)

画質 70%:
前 51,645 byte
後 50,829 byte
こちらも綺麗!

画像の劣化比較(画質 60%)

画質 60%:
前 39,171 byte
後 38,970 byte
ちょっと汚くなった!

80% ぐらいから前後のサイズ変化が少ないですよね?サイズの変化が少なければ劣化も少ないと思います!JPEG で 80% といったら十分に見れるレベルですよね?w

まとめ

お使いになるデザインとか細かさとか画像の状態によると思いますので一概には言えませんが、わたし的には下記の様な感じかなーと思います。

  • 元画像は JPEG を用意!
  • 画質は 80% 〜 70% ぐらいで前後のサイズ差が小さい方が綺麗!
  • 数値はあくまでも目安で最終確認は目で!

色味は暖色より寒色の方がモアレが目立ちやすいのか目につきます。黄色とか目立ちにくいですよね!
actyway のページでは、画質 80% の物をアップロードしました。
https://www.facebook.com/actyway