おどりば

ロースペックうつ病患者のブログ。寛解をめざして!

はてなブログの画像圧縮の仕組みがわからない。「PNGは使うな!」でOK?

【スポンサーリンク】


 f:id:SayuLog:20170907140855p:plain

こんにちわ、サユです。

ブログ歴、約一年半。
ブログの表示速度などというものには一切気を使わずに、これまで運営してきました。

今朝、ふと思い立って、GooglePageSpeed Toolsに自分のブログのアドレスを打ち込んでみたんです。

この結果がこちら。

 

f:id:SayuLog:20170907142232p:plain

こ れ は ひ ど い (´º∀º`)

はてなフォトライフにアップロードした時に自動的に圧縮されるだろうから、そんなに重くはならないだろう!なんて勝手に思ってたんです、今まで。
でも、そんなことはなかったようで。

これではブログを見に来てくれた人が必要以上に「ギガを減らして」しまうことになってしまう!というか既になっている!!
それは不本意だ!!

というワケで、画像が多い記事とトップページを優先的に、画像圧縮工事を始めることと相成りました。

 

 

画像圧縮にはTinyPNG

今回、画像圧縮工事でお世話になっているのは、TinyPNGというオンライン動画圧縮ツールです。
あちこちでオススメされていたので使ってみたら、なるほど簡単でした。
PNGでもJPEGでも同様に圧縮できるのでお手軽です。

tinypng.com

ブログに載せていた画像を確認したところ、中には3MBを超えるサイズのものがごろごろしているページがあったりして…もうホントにアホかと…(大反省)

f:id:SayuLog:20170907150651p:plain

これだけ圧縮されるとちょっと楽しいですね。
どこまで圧縮できるか、一度圧縮したものを何度も再圧縮してみたりもしましたが、当然ですが1回目のような圧縮率は得られませんでした。
一応、圧縮するたびに1%とか2%とかいう単位で、ちょっとずつは減っていくのですが、概ね1回圧縮すれば十分だと思われます。

圧縮による画質の劣化は、私の目にはわかりませんでした。
比較のために圧縮前の画像を載せると、またブログが重くなってしまうので差し控えますが、「ホントに圧縮されてるの?何が変わったの?」程度の違いしかありません。

これでブログの表示が早くなるのなら、手間がかかってもやるだけの価値はありますよね。
表示待ちは読む人にとってかなりのストレスです。
私だって、Twitterで流れて来た記事を開こうとして、10秒経っても表示されなかったら、よっほどのことがない限り読むのを諦めますもの。
読んでもらいたいと思うなら、誠意を見せなくては(昨日までの自分にブーメランが直撃)

……で、PageSpeed Toolsで指示された画像をコツコツ直すこと半日。

f:id:SayuLog:20170907154756p:plain

やっと30/100までスコアが上がりました。
でもまだ全然ダメみたいです……結構圧縮したんだけどなぁ……。

最適化しろと指示された画像は、どれも既に一度圧縮したものばかり。これ以上はどうしようもないのかなぁ、と思ったところで、ちょっと引っかかった点がありました。

「あれ?ファイルサイズ増えてないか??」

ここからが本題です。

 

 

はてなブログの画像圧縮の仕組みがわからない。

たとえばこの画像。

f:id:SayuLog:20170907155454p:plain

アップロード前のファイルサイズはたった27KBでした。

f:id:SayuLog:20170907161244p:plain

ちなみに、圧縮前でも60KBしかありませんでした。

PNG形式を使っているのは、その方がファイルサイズが小さくなると思ったからです。
JPEGだとかなり大きくなるので、見た目がほとんど変わらないなら軽い方が良いということで、あえてPNGを使っていました。

ところが、この画像をブログ編集画面の「写真を投稿」からアップロードすると、こうなります。

f:id:SayuLog:20170907161015p:plain

470KB!!
何これ…めっちゃ増えてるやん…。
アップしたら勝手にデータ量が増えるなんてそんなことあるの…??

疑問に思って検索してみたところ、こちらの記事に辿り着きました。

blog.shibayan.jp

どうやら勝手に変換されて、余計な情報がくっつけられてしまっているとのこと。
何それメンドクサイ

PNGだと逆に重くなるからJPEGを使っているというコメントがあったので、同じ画像をJPEG形式で保存してアップロードしてみました。

元画像:404KB
 ↓
圧縮後:108KB
 ↓
アップロード後:177KB

ふむ。なるほどなぁ。
こっちもちょっと増えるけれど、PNGで投稿した時よりはファイルサイズが小さくなりました。
見た目も遜色無いし、結果的に軽くなるのならば今後はJPEGを使うことにいたしましょう。

……私のブログを今よりもっと軽くしたいと思ったら、今までの記事の画像、全部ダウンロードしてファイル形式変えて圧縮して上げなおさないといけないのか。わーいメンドクサイ!!

しっかり調べないでPNG使ってた私が悪いんですが、画像は軽くしたほうが良いって言われて馬鹿正直に軽さを追求したのが見事に裏目に出ました。うぐぐ。

 

というワケで、今回わかったこと。

PNGを使うとやたら重くなるっていうことはもっと知られても良いと思うんだ…。
どうしてこんな厄介な仕様にしてくださったのか…。

 

さて、と。
PageSpeed Toolsからの評価を何とかするために、コツコツ画像の差し替え作業をやっていきたいと思います。
あと、次回から画像はJPEG統一で。もう二度とPNGは使わないぞ。

お疲れ様でした。