ほりーのブログリ

ブログ+クリエイト=ブログリ。初心者ほりーがブログを作るうえで必須なHTMLやCSSを学んでいくブログ。備忘録やテストとして使います。あと軽い日記程度にも。

【はてなブログ】圧縮された『PNG』でアップロードするとサイズが戻る件

pagespeed insightsで速度を図ってみると、スマホは83点でPCが50点だった。PCが異様に低い!なぜだ!

 

どうやら画像の拡張子がPNGなのが原因らしいぞ?!

 

 

 

画像のアップロード後のサイズが倍増している

pagespeed insightsでのPCの点数が異様に低い。

ということでGoogleさんから真っ先に提案されたのが『画像の圧縮』とのこと。

うーん、僕はOnline Image Сompressorで圧縮してるし、これ以上は圧縮しようが無いと思うんだけどなぁ・・・。と思いつつ、画像サイズを確認してみます。

調査したのは僕の別のブログで投稿しているPNG画像です。

 

投稿する前の画像(圧縮済み)158kb

投稿した画像:404kb

 

はい?なぜか圧縮したはずの画像のサイズがはてなブログにアップロードすると増えている。

倍以上にもなってリバウンドしてるじゃないですか!

そりゃあGoogleさんも圧縮しろとなるわけです。

 

ううむ、一体なぜリバウンドするのか・・・。

 

 

拡張子が原因だった

それでアレコレ調べてみると、どうやらはてなブログでアップロードすると圧縮されたサイズが元に戻っているようです。余計なことを・・・。

 

僕がブログで使用していた画像の拡張子は『PNG』です。これは可逆圧縮な拡張子なので、どうやら圧縮された画像ははてなブログにて解凍されている?のだと思われます。

ふーん、PNGとJPGの違いってそんな感じなんだなあ。パソコンに触れ始めて長いですが、こんなこと初めて知りました。恥ずかしいです・・・。

 

JPGを使えばOK

つまり非可逆圧縮の画像を使えば、はてなブログにアップロードしてもサイズがリバウンドすることはないってことですね!

 

ということでPNGをJPGに変換してくれる便利なサイトがこちら。

www.iloveimg.com

ドラッグアンドドロップで複数同時に処理してくれるのでめちゃくちゃ便利。

今までアップロードしてきた画像はこれで変換します。

 

JPGに変換し終えたページをpagespeed insightsで再計測してみると、PCの項目では73点を記録!変換前後では20点以上も差があります。

なぜかモバイルの項目では81点とそんなに変化はありませんでした。むしろ下がってますが、誤差の範囲でしょう。

 

まとめ

 

 

今までアップロードした画像はかなり多いです。アクセス数が多い記事から順にJPGに変換するとします。めんどくせー!