こんにちは友幸（@humberttomoyuki）です。
今回は、ブログの画像についての話をしようと思う。
何故こんな話をするのかというと、わたしはブログをはじめた頃、ブログの知識がないために、画像圧縮について何も行っていなかった。
はてなブログってはてなフォトライフに画像をアップすると、２Mぐらいの画像が200Kぐらいに自動的に小さくなるんですよ。
例えば上のアイキャッチ画像はダウンロードした状態で1.4M、はてなフォトライフにアップして640ピクセルにすると、425Kになる。
だから、はてなフォトライフにアップして自動的にピクセルを小さくして、それをそのまま使っていた。
しかしこれでは画像容量が大きすぎることに後に気がついた。
今回はわたしの二の舞いにならないようにブログ画像サイズの話をするよ。
何故画像圧縮が必要か
答えは簡単。
スマホユーザーが増えたから。
わたしのブログも検索の5割はスマホユーザーになっている。
スマホでの表示が遅いとイライラしてウェブサイトを観るのをやめたりするよね。
ブロガーは自分のサイトをみてほしかったら、スマホユーザーに優しい作りにする必要になってきている。
サイトの速度を向上させるためには画像圧縮は必須。
それではどうやって圧縮するのか。
まず考えたのが画像圧縮サイト
まずはじめに考えたのが画像圧縮サイト。
パンダがキモイと評判のTinyJPGが有名。
アイキャッチ画像を圧縮すると、1.5M⇨253.2Kに圧縮された。
これをはてなフォトライフにアップすると640ピクセルで31Kになる。
だけど正直いちいちアップしていくのが面倒くさい。
他に方法はないか考えた。
無料の画像編集ソフトJTrimを使う
参考にしたサイトは下記のサイト。
窓の社からJTrimをダウンロードして使用する。
使用方法は上記サイトにも書いてあるが、一応こちらでもわかりやく説明しとくよ。
- 左上のファイルをクリック
- 保存オプションを選択する。
- 品質を数値で指定するを「60」に設定する。ここは好みで自分の好きな値にすればいい。
- 「Exifデータを保持する」のチェックを外す
- 「この設定を保存する」にチェックを入れる
以上で設定は終了。
それでは実際に画像をリサイズしよう。
画像圧縮する
まずはピクセルを小さくするために、左上の「リサイズ」を選択する。
リサイズでサイズを指定する。
わたしは「縦横の比率を保持する」にチェックを入れて、縦長の場合は縦を640ピクセル、横長の場合、横を640ピクセルに設定している。
「再サンプリングを行う」はチェックを外す
OKを押すとサイズが小さくなる。
あとはCtr＋Sで上書き保存すれば自動的に画像が小さくなる。
画像比較
画像圧縮前 147K
画像圧縮後 22.1K
こんなかんじになる。猫かわいい。
サイズは7分の1に縮小されているが、画像は違いがあまりないことがわかると思う。
サイズが大きいと、スマホの通信が悪い時になかなか画像が表示されなくなったりするので、ぜひ圧縮するべき。
JTrimの注意点
jpg画像しか圧縮できないので、スクリーンショットで撮ったpng画像は画像圧縮サイトを利用するか、jpgで保存するしかない。
png画像をjpgで保存した場合、画像の文字が抜けたりする現象が起きる場合があるので注意。
そういいつつ、わたしはスクリーンショットの画像をjpgにしてるので、スマホの画面でみると汚すぎて唖然とすることがある。
少しづつ改善したい。
jpg画像とpng画像の違い
基本的にjpg画像は色の多い画像に使用する。
写真が入っている画像はjpgにしとけば問題ない。
写真をpngで保存するとサイズが大きくなりすぎので注意。
反対にpng画像は色の少ない画像に使うのがオススメ。
色の数が少ないとjpgよりもサイズが小さくなる。
スクリーンショットで操作を説明するときはpngがオススメ。
今回の記事だと、JTrimを説明するスクリーンショット画像はpng形式、上のパンダのスクリーンショットはjpgで圧縮している。
スクリーンショット画像がpng形式でサイズが大きすぎると思ったら、jpgにすればいい。
わたしは50Kくらいを目安に変更している。
まとめ
画像の圧縮は大事なので、ブログをはじめたころからすぐに取り掛かろう。
わたしは60記事位書いたところで、気付いたので、画像の貼り直しがものすごい面倒だった。
早く気付けよ、気づくの遅いよ自分。
あとで気づいたが、JTrimの一括変換でフォルダの中を全て画像変換できるようだ。
一個づつ保存しなおしたよ。
一括変換についてはわたしは使わなかったので必要な人はググってくれ。
