facebook-254165_640sw

以前から気にはなっていた、Facebookページのカバー写真の劣化。カバー写真を更新するお仕事がやってきたので、対策などをメモ。

参考にしたサイトはここ(↓)

本記事では、JPG(JPEG)、PNGという単語が出てくる。
これらは、今ではインターネット上でフツーに使われているファイル形式で、それぞれに特長があり、それぞれに適した使いかたがある。今回のお題と絡むので、別記事でくわしい説明をすることにした。興味のあるかたは「jpg、png f-画像ファイル形式のメモ」(作成中)を参照してほしい。

1. なぜ劣化する(荒れる)のか

アップロード前
アップロード前
アップロード後
アップロード後

上記の画像でわかるように、Facebookページに「写真をアップロード」すると、画像が劣化する。JPGは、保存するときにデータを圧縮する(*1)。アップロード後の画像に見える劣化は、モスキート・ノイズといって、JPGでは圧縮率が高いとよく現れる。

次に、オリジナルの画像(アップロード前)とFacebookのカバー写真(アップロード後)の、画像サイズとファイルサイズを比べてみる。

  • アップロード前の画像: 960px × 596px / 309,866 バイト
  • アップロード後の画像: 960px × 596px /  55,993 バイト

カバー写真のファイルサイズがかなり小さくなっている。

ファイルサイズが小さくなっていること、モスキート・ノイズが現れていることから、アップロードされてきたJPGをFacebook側で圧縮しているのだろう。これが画質劣化の原因だと思う。

アップロード前の画像のサイズ(大きさ)を 960px × 596px としているのは、経験的に、Facebookにアップロードした写真は、横幅が960pxになるから。「カバー写真のサイズは幅851ピクセル」と指定されているが、なぜかダウンロードしてみると、横幅は960pxになっている。

*1 くわしくは「jpg、png、gif-画像ファイル形式のメモ」を参照されたい。

2. ファイル形式をPNGにしてみる

Facebookのカバー写真のファイル形式は、JPGとPNGを使える。ファイル形式をPNGにして、アップロード前と後を比べてみた。

アップロード前(PNG)
アップロード前(PNG)

アップロード後(PNG)
アップロード後(PNG)

  • アップロード前の画像(PNG): 960px × 596px / 253,825 バイト
  • アップロード後の画像(PNG): 960px × 596px / 273,439 バイト

JPGに比べて、明らかに劣化が少ない。

ただ、なぜかアップロード後のファイルサイズが大きくなっている。おそらくFacebook側で保存するときの処理の違いだと思う。劣化していないようだし、そんなに巨大なファイルサイズになったわけでもないので、とりあえずよしとする。

一般に、PNGはJPGよりファイルサイズが大きくなる。

Facebookを含むインターネットの世界では、結果が同じならファイルサイズは小さいほうがよい。送るとき、受けとるとき、短い時間ですむからだ。もちろん、PCやサーバの容量を圧迫しにくくなるし、通信回線を占有する時間も短くてすむ。

ファイルサイズがあまり大きくならないのなら、カバー写真はPNGのほうがよいかもしれない。

3. まとめ

  1. カバー写真の大きさは 851px × 315px とする
  2. 最初からある程度圧縮しておく(写真によるが60%~80%くらいだろうか)
  3. テキストやロゴなどの劣化が目立つときは、ファイル形式をPNGにしてみる
  4. JPGでもPNGでも、ファイルサイズは(減色するなどして)できるだけ小さくしておく
  5. 一番よいのは、大きさは 851px × 315px で、サイズは 100KB以下

4. 注意事項など

本記事で扱うFacebookページは、いわゆるFacebookページのことで、個人ページのことではない。個人ページにもカバー写真はあるが、(見えかたは似ていても)仕組みが異なるようだ。たとえばPNG形式のカバー写真をアップロードしてもJPGに変換され、結果として劣化してしまう。

また、Facebookのヘルプには、

カバー写真のアップロード時に写真が圧縮されないようにするには、ファイルサイズを100KB以下にしてください。
画像をJPEGファイルで保存し、sRGBカラープロファイルを設定します。

とある。可能であれば、減色するなどして、カバー写真のファイルサイズを100KB以下にすれば劣化しないようだ。

もうひとつ、同じFacebookページでも、PCとスマートフォンではカバー写真の見えかたが違う。PCでは横を基準にして上下がトリミングされるのに対し、スマートフォンでは縦を基準に左右がトリミングされる。これに関しては別記事であげてみたい。