GIFかJPEGかPNGか、ブログでの漫画画像の圧縮を考察してみる
2020年1発目の記事と いうことで…どうも明けて宜しく おめでとうございます。
さて2020年に なったからと いうか、個人的に ちょうどサイト歴が20周年を迎えたということで、多少 進化した部分も ありまして…
…まず一つ目。
今まで漫画等の編集用に、その20年来ずっと使用している古いスキャナーを使い続けたい という一心で、しつこく17年前の古いXPのデスクトップを使い続けていたわけなんですが、どうやら どうにも電源系統がイカれてしまったようでして…
●後継のパソコン●
後継として、20年前のダイナブックにバトンタッチしました。って退化してるじゃねえか。
…スキャナーって、いつ壊れるんですかね…？
リアルマジなことを いうと、今のうちに新型買って円滑にバトンタッチを進めるのが賢明だという気は するんですけどねー、なかなかね…。
…そして、二つ目。
●リニューアルしました●
ブログのリニューアルも そうなんですが、それに ともなって漫画の編集方法も変わりまして。
うん、こちらは正当に進化した感じです。
具体的には何ピクセルで何バイトとか画像の大きさ、そしてJPEGとかGIFとか画像の形式とかも この際だから改めて見直してみまして…
…てなわけで今回は、読者的には あまり興味ないかもしれませんが、ブログに漫画を掲載するための最適な画像編集方法というのを考えてみようと いう内容を お送りしてみようかと思います。
まず、今回いちいち説明が面倒なので お読みに なられている方は基本事項は もう知ってるっていう体で話を進めようと思います。だから どっちかというとブログ作る側向けですかね…ご了承ください。
まず僕の漫画、実は2011年頃を境に編集形式が変わっておりまして、それ以前とそれ以降では若干 画質も異なりまして…
●新旧の比較●
左が新で、右が旧です。
旧型は早い話が白黒写真みたいな感じですね…新型は完全に1色刷りみたいな感じに なりました。
とりあえず、まずは現行である新型の編集から ちょっと考えてみたいと思います。
従来は、新型も旧型も公開する時は あまり深い事を考えずに幅650ピクセルに縮小した上でJPEG画像を50%圧縮にして公開しておりました。
●圧縮ウィザード●
JPEG形式というのは、主に写真画像の圧縮に向いておりまして…
圧縮率を上げるほど画質が荒くなる性質なんですが、見た目的に そこまで問題は ないと判断して この設定で ずっと やってきました。
今回のリニューアルにあたり、画像の大きさは700ピクセルに ちょい大きさアップした上で圧縮、すると容量は164KBくらいに なるようです。
いちブログ画像としては、もうちょっと容量を抑えたい気がしますね…
●もっと圧縮してみる●
100KB以下を目指したところ、81%くらい圧縮しないと いけないようで…
う～ん…さすがにコレだと見た目がキツイな…
個人的に、50%が見た目的には限界な ような気がしています。
と、いうことでJPEG案は一旦 置いときましょう。
ちなみにソフトは「Paint Shop Pro 7J」という、これまた約20年前のソフトを未だに使用しております。超 使いやすくて しょうがないんですよ、このソフト…
●色数を減少させてみる●
今度はGIF形式で圧縮することを考えてみます。
GIF形式は画像に使用されている色数が少なければ少ないほど容量を抑えられる性質でして…
と いうわけで とりあえず色数を原画の256色から一気に4色まで減らしてみました。左が減少前で右が減少後です。
う～ん…さすがに4色だと減らし過ぎだな…ドットが荒くなっちゃってる…
…っつーことで…
●少し減色を和らげてみる●
4色から ちょっと和らげて8色に してみました。
原画に比べると多少 違いはありますが…実用上は問題なさそうなので、これで いっちゃおうかな！
容量的には120KB。理想の100KBは超えちゃいましたが、これは もう しょうがない、見た目とバランスとの兼ね合いと いうことで…JPEGで強引にやるよりはマシな結果です。
と いうわけで新型、すなわち現行形式に関しては基本GIFで圧縮する方向で決定ですかね。
●旧型をGIFでやってみる●
今度は旧型のほうを…とりあえず、新型同様にGIF形式8色での圧縮を試してみますが…
う～ん…ちょっと厳しいなぁ…
●少し減色を和らげてみる●
16色くらいで、見た目的にマシなレベルかな…
…でも、と いうことは少なくとも新型より容量は上がっちゃうよな、確実に…
やはりGIF圧縮は、写真っぽい画像には向かないようで…
●それならJPEGで●
てなわけで今度はJPEG案、見た目の限界値である50%にしたところ133KBくらいに なるようで…
…まぁでもコレが限度だろうなぁ…GIFよりはマシだろうし…
●ためしにPNGでも●
…ここで ふと思いました。そういえばPNGだと どうだろう？と…
GIF、JPEGと実は もうひとつPNGという形式もあるのです。
フルカラーを保ったまま容量を圧縮できる一方、GIFやJPEGよりは容量が大きくなる傾向が あるので触れてなかったんですが、ためしに ちょっと やってみましょうか…
何も いじらないと当然デカすぎて論外なんですが、考え方としてはGIFと同じで色数が減れば減るほど容量が抑えられるので、さっきのGIFと同じ条件で圧縮してみます。
そして…
●圧縮結果●
旧型原稿を圧縮した結果、それぞれ このような容量と なりました。これで もう、旧型はJPEG一択ですね。
ただ、ひとつ気付いたのが…同じ条件なら、実はGIFよりPNGのほうが若干だけど軽くなるのかコレ…？コレは知らんかった…
と いうわけで ちょっとでも軽いほうがブログ画像としては いいので、今後の現行の漫画画像はPNGに しようかなと思いました。
…っつーことで、総括してみると ですね…
…と いった具合でしょうかねぇ…
なお、画像によって色々条件とかが変わる場合も あるので、やっぱり その都度の判断も必要だとは思われます。
てなわけで割と頑張って検証記事を書いてみましたが、何かの参考になれば書き甲斐が あったということで、幸いで ございます。
ちなみに今回 検証に使った回は、以下のモノに なります。
漫どころ劇場特別公演『初心忘れるべからず』
なんつーか…だいじょぶですかね？ファミリーで見れる内容ですかね？コレ…
さて2020年に なったからと いうか、個人的に ちょうどサイト歴が20周年を迎えたということで、多少 進化した部分も ありまして…
…まず一つ目。
今まで漫画等の編集用に、その20年来ずっと使用している古いスキャナーを使い続けたい という一心で、しつこく17年前の古いXPのデスクトップを使い続けていたわけなんですが、どうやら どうにも電源系統がイカれてしまったようでして…
●後継のパソコン●
後継として、20年前のダイナブックにバトンタッチしました。って退化してるじゃねえか。
…スキャナーって、いつ壊れるんですかね…？
リアルマジなことを いうと、今のうちに新型買って円滑にバトンタッチを進めるのが賢明だという気は するんですけどねー、なかなかね…。
…そして、二つ目。
●リニューアルしました●
ブログのリニューアルも そうなんですが、それに ともなって漫画の編集方法も変わりまして。
うん、こちらは正当に進化した感じです。
具体的には何ピクセルで何バイトとか画像の大きさ、そしてJPEGとかGIFとか画像の形式とかも この際だから改めて見直してみまして…
…てなわけで今回は、読者的には あまり興味ないかもしれませんが、ブログに漫画を掲載するための最適な画像編集方法というのを考えてみようと いう内容を お送りしてみようかと思います。
まず、今回いちいち説明が面倒なので お読みに なられている方は基本事項は もう知ってるっていう体で話を進めようと思います。だから どっちかというとブログ作る側向けですかね…ご了承ください。
まず僕の漫画、実は2011年頃を境に編集形式が変わっておりまして、それ以前とそれ以降では若干 画質も異なりまして…
●新旧の比較●
左が新で、右が旧です。
旧型は早い話が白黒写真みたいな感じですね…新型は完全に1色刷りみたいな感じに なりました。
現行の原稿を編集
とりあえず、まずは現行である新型の編集から ちょっと考えてみたいと思います。
従来は、新型も旧型も公開する時は あまり深い事を考えずに幅650ピクセルに縮小した上でJPEG画像を50%圧縮にして公開しておりました。
●圧縮ウィザード●
JPEG形式というのは、主に写真画像の圧縮に向いておりまして…
圧縮率を上げるほど画質が荒くなる性質なんですが、見た目的に そこまで問題は ないと判断して この設定で ずっと やってきました。
今回のリニューアルにあたり、画像の大きさは700ピクセルに ちょい大きさアップした上で圧縮、すると容量は164KBくらいに なるようです。
いちブログ画像としては、もうちょっと容量を抑えたい気がしますね…
●もっと圧縮してみる●
100KB以下を目指したところ、81%くらい圧縮しないと いけないようで…
う～ん…さすがにコレだと見た目がキツイな…
個人的に、50%が見た目的には限界な ような気がしています。
と、いうことでJPEG案は一旦 置いときましょう。
ちなみにソフトは「Paint Shop Pro 7J」という、これまた約20年前のソフトを未だに使用しております。超 使いやすくて しょうがないんですよ、このソフト…
●色数を減少させてみる●
今度はGIF形式で圧縮することを考えてみます。
GIF形式は画像に使用されている色数が少なければ少ないほど容量を抑えられる性質でして…
と いうわけで とりあえず色数を原画の256色から一気に4色まで減らしてみました。左が減少前で右が減少後です。
う～ん…さすがに4色だと減らし過ぎだな…ドットが荒くなっちゃってる…
…っつーことで…
●少し減色を和らげてみる●
4色から ちょっと和らげて8色に してみました。
原画に比べると多少 違いはありますが…実用上は問題なさそうなので、これで いっちゃおうかな！
容量的には120KB。理想の100KBは超えちゃいましたが、これは もう しょうがない、見た目とバランスとの兼ね合いと いうことで…JPEGで強引にやるよりはマシな結果です。
と いうわけで新型、すなわち現行形式に関しては基本GIFで圧縮する方向で決定ですかね。
旧型原稿の編集
●旧型をGIFでやってみる●
今度は旧型のほうを…とりあえず、新型同様にGIF形式8色での圧縮を試してみますが…
う～ん…ちょっと厳しいなぁ…
●少し減色を和らげてみる●
16色くらいで、見た目的にマシなレベルかな…
…でも、と いうことは少なくとも新型より容量は上がっちゃうよな、確実に…
やはりGIF圧縮は、写真っぽい画像には向かないようで…
●それならJPEGで●
てなわけで今度はJPEG案、見た目の限界値である50%にしたところ133KBくらいに なるようで…
…まぁでもコレが限度だろうなぁ…GIFよりはマシだろうし…
●ためしにPNGでも●
…ここで ふと思いました。そういえばPNGだと どうだろう？と…
GIF、JPEGと実は もうひとつPNGという形式もあるのです。
フルカラーを保ったまま容量を圧縮できる一方、GIFやJPEGよりは容量が大きくなる傾向が あるので触れてなかったんですが、ためしに ちょっと やってみましょうか…
何も いじらないと当然デカすぎて論外なんですが、考え方としてはGIFと同じで色数が減れば減るほど容量が抑えられるので、さっきのGIFと同じ条件で圧縮してみます。
そして…
●圧縮結果●
旧型原稿を圧縮した結果、それぞれ このような容量と なりました。これで もう、旧型はJPEG一択ですね。
ただ、ひとつ気付いたのが…同じ条件なら、実はGIFよりPNGのほうが若干だけど軽くなるのかコレ…？コレは知らんかった…
と いうわけで ちょっとでも軽いほうがブログ画像としては いいので、今後の現行の漫画画像はPNGに しようかなと思いました。
考察結果
…っつーことで、総括してみると ですね…
- 単色刷りっぽい画像は やっぱりGIFのほうが向いてる気がする
- 写真っぽい画像は やっぱりJPEGのほうが向いてる気がする
- …と思いきや、GIFに関しては実はPNGのほうが気持ち軽い場合もある
…と いった具合でしょうかねぇ…
なお、画像によって色々条件とかが変わる場合も あるので、やっぱり その都度の判断も必要だとは思われます。
てなわけで割と頑張って検証記事を書いてみましたが、何かの参考になれば書き甲斐が あったということで、幸いで ございます。
ちなみに今回 検証に使った回は、以下のモノに なります。
漫どころ劇場特別公演『初心忘れるべからず』
なんつーか…だいじょぶですかね？ファミリーで見れる内容ですかね？コレ…