PNGだと画像サイズが大きすぎてた

【スポンサーリンク】

これまで記事に画像使うときは、TinyPNGで画像サイズ最適化をしてたので、 それ以上のことはまったく気にしてなかったんですが、最近以下記事をみたのです。
blog.shibayan.jp

そうです。私がやってたのは、PNGの最適化。 はてなブログだとPNGを最適化しても意味ない模様ですね。 ちゃんと確認しとけばよかったな。。。うひひ。

比較的画像を多用してる記事 「foobar2000に公開されてるSkinを適用してデザイン変更するよ - ハイレゾる」 のデータ量を確認。 画像の1つが1MBとかありえない状態になってた。 js、cssとか全部含めると大体5.9MBとすんごい状態。
f:id:nyasu0123:20170709102116j:plain:w400
(request数が多いのは、PCに入れてるkasperskyの問題)

PageSpeed Insightsの状態は、27ポイントだけでした。
f:id:nyasu0123:20170709102129j:plain:w400

画像サイズ減の作業は、

  1. 該当のページからPNG画像をダウンロード
  2. オンラインでPNGをJPGに変換で、PNGからJPEG化
  3. TinyPNG – Compress PNG images while preserving transparencyで、画像の最適化

を実施。これでだいたい1/4程度(240KBだと60KB程度に)のサイズ減になりました。

実施結果は以下。
サイズは、5.9MBから3.8MBに大幅減。
f:id:nyasu0123:20170709111453j:plain:w400
27ポイントから53ポイントに大幅改善。
f:id:nyasu0123:20170709111506j:plain:w400

でも、まだまだ高いポイントではないし、もう少し改善考えてみよっと。