画像の容量を圧縮して表示速度を改善する！　おすすめツールを紹介

こんにちは、ワタリビト（@Wataribito）です。

この記事にはブログに載せる画像サイズを簡単に圧縮して読者さんファーストなブログにする方法を書いています。

1つの記事に複数枚の画像を添付するのはけっこうメジャーですね。

画像がたくさんあるとイメージが付きやすくて華やかなものになります。

しかし、画像が多くなると読み込む容量が大きくなってしまい、表示速度が落ちてしまいます。

そうなると読者にやさしいブログとは言えませんね。

見た目に楽しく読者にやさしいブログの第一歩は画像の容量を小さくすることです。

それでは実践してみましょう。

表示速度が遅くなる原因は”重い”から

ずっと読み込み画面のままでなかなか記事が表示されない・・・

こんな経験ありませんか？

この状態を「重い」といいますが、一言で重いといってもいくつか原因はあります。

その原因の一つはブログで使っている画像サイズが影響している可能性も十分あります❗

どうして画像サイズが表示速度が影響するんでしょうか？

答えは簡単、画像のサイズが大きい＝記事の読み込みに時間がかかるから。

たまーにありませんか？なかなかサイトが表示されなくてイライラすること。

もしかしたら知らないうちに自分のブログも遅くなっているかも・・・❗

恐ろしいことに、1秒で表示されるサイトと5秒で表示されるサイトでは読者さんに離脱される確率が90％も開きがあるんだとか❗❗

そんなことを防ぐために画像を圧縮して余分な容量を削ってあげる対策が効果的なんです。

画像の圧縮はだれでもカンタンにできる最初の一歩なので試してみてくださいね?

画像サイズ圧縮にオススメなツールはこちら

こちらのTiny.PNGというツールがオススメです。

Tiny.PNGの操作説明

使い方はカンタン。

これだけです。

青丸で囲った左側が圧縮前、右側が圧縮後の容量です。

右横の黄色い四角のなかの数字は元の画像からどれだけ圧縮できたかを表しています。

上の画像はTiny.PNGのトップ画像を圧縮したんですが、元の画像サイズが376KBあったのに対して圧縮後は122KBまで小さくなってますね！

約250KB、68％も削減できました?（％表示されるのはわかりやすくていいですよね）

ただ、圧縮すると画質が悪くなるんじゃない？？

という意見もありそうなので、いなりさん@matokokun223 に作成して頂いたこのブログとツイッターに使用しているロゴで圧縮前と圧縮後の画質をビフォー・アフター検証してみました?

圧縮前　410KB

圧縮後　154KB

見て分かるとおり、圧縮しても画像が荒くなってない！

容量だけ410KBから154KBにダイエット成功❗

なんと約60％も軽くなりましたー?

圧縮してもキレイでかわいいままだよ、さすがワタリちゃん！！＼(^o^)／

（Tiny.PNGのおかげだとおもうな・・・(^_^;)）

画像を圧縮するのは読者さんをがっかりさせないため❗

画像１つ１つの削減量は小さいですが、ちりも積もれば山となってやがて読者さんの妨げになるんですね。

もし自分が読者だったら記事が表示されるまでどのくらい待てますか？

相手の興味の強さが「ツイッターでたまたま見かけた」とか「検索してたら偶然みつけてなんとなく読んでみようと思った」くらいの興味なら表示速度がおそいとすぐにバイバイされてしまうんですよね。残念ながら・・・?

なので、せっかく記事を読みに来てくれた読者さんにちゃんと読んでもらうためにも、今からユーザーファースト目線でコツコツ圧縮しましょうー?

ちなみにこのTiny.PNG、いちどに画像は20個、5MBまで一括で圧縮できるので画像がいっぱいあって大変！な方も安心です。

Tiny.pngはこちら?https://tinypng.com/

Tiny.PNGをオススメする4つの理由

一通り表示がおそくなる原因と解決方法をお伝えしましたが、最後にTiny.PNGをオススメする理由を書きますね。

上から3つは紹介しましたね。

最後のブログ全体が重くならないというのは、Tiny.PNGがブラウザ型のツールだからです。

画像圧縮にはこのような機能を持ったプラグインを使う人が多いんですが、プラグインはブログにインストールしないとダメなんです。

何が言いたいかというと、プラグインをインストールすると記事の読み込みの際にプラグインまで読み込まれてしまうので、その結果、表示速度が遅くなるんです。

なのでプラグインの利用は最小限にしておいたほうがいいんですね。

これがブラウザ型ツールのTiny.PNGをオススメする最大の理由です。

圧縮だけじゃない❗読者ファーストな便利ツール?

小さい画像もピッタリサイズに調整できる！自由に画像サイズを調節する小技を紹介します

06/18/2018

まとめ　ブラウザ型ツールで軽やかに記事を表示させよう

記事の表示速度を早めるには、ブログ全体の容量をなるべく小さくすること。

そのためにこの記事で紹介したポイントは2つ。

1. 記事に載せる画像は圧縮する！
2. プラグインよりブラウザ型ツールをつかう！

この2つを守ればブログの表示速度はある程度は改善されますよ。

今まで画像のサイズなんて考えてなかった❗という人はこの機会に余分なところを削ぎ落として「ブログのダイエット」をしちゃいましょう〜?

Tiny.pngはこちら?https://tinypng.com/