中年システムエンジニアのオモチャ箱

中年システムエンジニアが初体験のブログ活動。技術情報の備忘録以外も、色々と載せていければと思います。

【緊急】はてなブログにアップする画像形式は PNG だと危険!


【スポンサーリンク】


早速、Google アドセンス導入で重くなった原因調査で記載した、画像圧縮をしてブログの読込速度を速めるぞ!と実施してみました。
いきなり撃沈しました…涙…。


画像圧縮をしてファイルサイズは明らかに小さくなっているのに、何故か、はてなブログにアップロードしてもファイルサイズが小さくならないのですよ!

むしろ、ファイルサイズが大きくなっているのですよ!!

皆さんもそんな経験はありませんか??
そんな調査結果を綴っていきたいと思います。

 

画像サイズ圧縮

※2018-03-27 現在、iLoveIMG ホームページで変換、圧縮をするとエラーが発生していました。JPGイメージをオンラインで圧縮するも使いやすかったので、リンクしておきますね。

 

Google アドセンス導入で重くなった原因調査で紹介したホームページ、
オンラインで様々なPNG画像をサイズ変更 - iLoveIMG で、画像圧縮を実施してみました。

 

調査対象は、Visual Studio でスマホアプリ開発はできるのか?のページで使っている大きい画像です。
ちなみに、画像形式は PNG です!

  • 圧縮前のサイズ:120KB
  • 圧縮後のサイズ:36KB

元サイズより、70%小さくなりました!

 

で、これをはてなブログにアップロードして…。
なっ、なんと、ファイルサイズが 106KB !?
えっ??
36KB に圧縮できてたよね??
圧縮したファイルサイズが、ほぼほぼ元のファイルサイズに戻ってるよ!?

 

 
PNG 形式を圧縮しても意味ない!?

で、いつもどおりにネット情報で調査していると、「画像圧縮→はてなブログへのアップロード」までは、似たような情報が出てくるわけですよ。

 

何で皆は圧縮できてるの??
何で私のは、圧縮したファイルサイズが元に戻っちゃうの??
なんて悲しくなっていたところに、目に飛び込んできたのは…
はてなブログPNG 画像をアップロードすると、圧縮したファイルがリサイズされて、元に戻ってしまうという事実!!

 

なんてことだ…。
全ての画像は PNG 形式でアップロードしてあるよ…。

 

JPEG 形式をアップロードするとどうなるの?

下記手順で、アップロードしてある PNG ファイルを、JPEG ファイルに変換、圧縮しました。

  1. はてなブログからダウンロード
  2. 様々な画像形式をJPGに変換 - iLoveIMG で、PNG から JPEG に変換
    JPEG ファイルのサイズは 101KB でした。PNG ファイルの時は 120KB なので、若干小さくなりましたね。
  3. オンラインで様々なPNG画像をサイズ変更 - iLoveIMG で、ファイルを圧縮
    ファイルサイズは 41KB でした。元ファイルの PNG の時は 120 KB だったので、66%小さくなりました!
  4. はてなブログにアップロード
    ここで注意です。
    はてなフォトライフの設定で、画質の割合を設定できます。
    割合を小さい値にすれば、画像サイズは小さくなりますが、画像は粗くなりますので注意してください。
    デフォルト値は 100%です。
    私は 70%に設定してみました。

    f:id:middle-aged-se:20180327095238j:plain

  5. はてなブログにアップロードされたファイルサイズを確認
    実際にアップロードされたファイルサイズは 40KB でした。

 

まとめ

はてなブログ初心者の私は、画像をアップロードすれば、元と同じファイルサイズかと思っていました。
はてなブログの便利機能である、画像アップロードのリサイズですが、何故、PNG 形式だと元に戻ってしまうのか??でした…。
しかし、この調査をしないで、PNG を圧縮して、はてなブログにアップロードして…、なんて作業を繰り返さなくて本当に良かったです!!
時間をかけた作業が水の泡になるところでした・汗。

 

皆さんもはてなブログの表示速度を速くしたいという理由で、画像圧縮をしている方も多いと思います。
その場合は、JPEG 形式の画像ファイルを圧縮して、はてなブログにアップロードするようにしてくださいね!

 

初心者の私だけが知らなくて、はてなブロガーの皆さんは当然に知っていたことかもしれませんが・汗。

皆さんも注意しては如何でしょうか。