こんにちわ、メガネです。
「このページめっちゃ重たいなー…(。-_-。)」
日々色々なブロガーさんのブログを参考にしているのですが、記事や閲覧の時間帯によっては読みたいページが全然開かないことが多々あります。
あまりに遅いとフラストレーションが溜まってきて…
「あぁ!!もういいよ!!”怒」
結果として取る行動は『他のページに移動すること』。
重たいページはそれだけでストレスです。
読み手への配慮として少しでもさくさく見れるようにするのは書き手の義務、といっても過言ではありません。
正直手間はかかりますが、こういったちいさな気配りの積み重ねが読まれるブログ作りに大きく役立ちます。
そしてページを重くしている最も大きな要因のひとつ、それは『画像』です。
画像を圧縮することでページの読み込み速度は大きく変わります。
今回は、少しでも読み手のストレスを減らし読まれるブログになるための『画像圧縮術』についてお伝えします。
使うツール
画像圧縮のために、下記3つのツールを使います。
1、PIXLR EDITOR
2、JPEGmini
3、EWWW Image Optimizer(Word Press限定)
1、PIXLR EDITOR
まず行うのは画像のリサイズです。
たとえば僕が前回のブログのアイキャッチ画像に指定したこちらの画像。
iPhoneで撮影したのですが、撮影時のサイズと容量がこれ。
【サイズ】4032×3024
重っ!!!!!
まず単位がMBの時点で話になりません。
ブログで画像を使う目的は『読み手が理解しやすくすること』です。
画質が高い必要性はなく、伝わればいい。
そこで、”PIXLR EDITOR”の出番。
登録は一切不要で、上の文字をクリックしてもらうとリンクに飛びます。
ページ内の『コンピュータから画像を開く』をクリック。
リサイズしたい画像を選択し、読み込みます。
読み込めたら左上の『画像>画像サイズ』をクリック。
リサイズは、『800×600』で指定。
『ファイル>保存』を選択すると保存先を指定して保存ができます。
こうして出来上がった画像のサイズがこちら。
【サイズ】800×600
なんと、およそ2100KB容量を下げることができました!
(すげぇ…!)
JPEGmini
ある程度画像の容量を削ったあとは細かく削減していきます。
次に使うのが、”JPEGmini”です。
上の文字からリンク先に飛んでもらい、『UPLOAD PHOTO』をクリック。
下記のページの『DROP PHOTO HERE』に圧縮したい画像をドラッグ&ドロップ。
なんと、それだけで自動的に圧縮後の画像がページにアップロードされます。
サイト上は”87KB → 80KB”と表記はありますが、実際は”89KB → 82KB”。
これでさらに7KB圧縮されました。
圧縮された画像を保存してこのツールの役目は終了。
EWWW Image Optimizer
このツールはWord Pressのプラグインなので、Word Press使用者限定です。
使い方は超簡単。
プラグインとしてDLして、有効化するだけ。
あとは画像をアップロードすれば自動で容量を削減してくれます。
最終的に80KBまで圧縮できました( ͡° ͜ʖ ͡°)
Before → After
-Before-
-After-
これで十分だわ…。
まとめ
今回、画像圧縮についてお伝えしましたがいかがでしたか?
画像をそのまま使うのと圧縮して使うのではページの読み込み速度が全く違います。
これは書き手のほんのひと手間で改善できることです。
「1から3まで全部やるのが面倒…」
わかります。笑
そんな場合は、1番のリサイズで大幅に圧縮するだけでもOK!
とにかく小さな心配りを積み重ねましょう。
文章だけでなく、すべてにおいて読み手の立場に立ち続けることを忘れずに。
結果としてたくさんの人に読まれるブログができあがります。
参考URL
Net Child / 『ブログの画像を圧縮してる?画質をなるべく落とさずに圧縮する手順解説』
コメント