ゲーマー姉弟の64弟（＠64_oto）です。
今日はお恥ずかしい暴露話を。
みなさんも気をつけてください。
初期のぼく
はてなフォトライフすげええ！！
毎月容量更新されるの？！
キレイな画像貼り放題じゃん！
はてなブログ最高！！
外のフリーWi-Fiで自分のブログを見たぼく
ウチのブログ、画像の読み込み遅くね？
『PageSpeed Insights』を使って速度を調べてみるかー、
たぶん50くらいはあるっしょ！
あ、姉さんに怒られる
家で見てたときは気にならなかったけど、外だと100人中90人が離脱する重さ……。
原因はPNG画像！ テメエだ！！
「はてなブログ × PNG」がNGな理由
はてなフォトライフにアップすると勝手に容量が増える
なんとPNG画像をはてなフォトライフにアップすると、元のファイルサイズより大きくなって反映されるのです。
僕がそれに気付いた経緯を説明します。
以前書いた『冬に聴きたい任天堂ゲームミュージック10曲メドレー』のこのPNG画像、303KBありました。
画像を見た目変えずに軽くしてくれるツール『TinyPNG』を使って、この画像を圧縮します。
303KBから104KBに減りました。
これをはてなフォトライフにアップし直します。
（winterにするべき名前がspringになっちゃってます笑）
貼り直し完了！
実際に右クリックから画像を保存して、本当に軽くなっているか確認します！
保存！
あれ？
PNG「303KBですが？」
軽くなってねえじゃん！
僕圧縮しましたよね！？ さっきの何だったの！
あ、あれか？ 画像のキャッシュが残っているのかな？
読み込んだ画像を再び開いた際にもう一度読み込まなくても済むよう、一時的にハードディスクに保存してあるデータのこと。
しかしキャッシュを削除してみても結局変わらず……。
？？？
僕だけ？ と思ったのですが、はてなブログはみんなそうみたいです。
こちらの記事にとてもわかりやすくまとめられてました！
はてなブログではJPEGを使おう！
というわけで、PNGにしていた全画像をJPEGに直しました（きっつ！！）
JPEGでもちょっと重いと思った画像は『TinyPNG』で軽いJPEGにしました。
（TinyPNG様はPNGだけでなくJPEGも軽くしてくれるのです）
さて、『PageSpeed Insights』を使ってビフォー・アフターを比べてみましょう！
Before
↓
After
パソコン16、モバイル12だったのが、
パソコン59、モバイル43まであがりました。
まだPoor判定ではありますが、だいぶよくなったと思います！
はてなブログ自体が重いようで、Poorになってしまうのはある程度仕方ないことみたいですね。
それもどうにかならんかな〜
昔から当ブログに遊びにいらしてくださっていたみなさま、重いページで無駄に通信料を使わせてしまって本当にすみませんでした。
『JPEG』と『PNG』の使い分け方を知っておこう
せっかくなので画像の適切な保存の仕方についておさらいです。
拡張子の種類（PNG・JPEG・GIF）についてカンタンに説明します。
| 種類 | 特徴 |
|---|---|
| JPEG | 写真など、色の数が多いもの向き
|
| GIF | 図など、色数の少ない画像向き
|
| PNG | 万能！ これで保存すると劣化せずキレイなまま
|
GIFは今はあまり使われません（それこそGIFアニメくらいかな）。
GIFにすると軽いケースもあるのですが、ソフトによっては色が若干変わってしまったりややこしいので、個人的におすすめしないです。
ちなみにこのぼくのアイコンは背景が透過されたPNGです。
これくらいならファイルサイズも小さいので、このままでいいかなと思ってPNGにしています。
まあ透過したいってのが１番なんですけどね。
