いまいちど

子育てパパの雑記ブログ

画像を最適化するなら早い方が良い。画像容量を削減する方法

スポンサーリンク

昔、とても好きなサイトがありまして、毎日のように閲覧していた時期がありました。

もう3年ほど前の話になりますかね。月間数十万PVを誇る人気サイトでして、当時、憧れのような存在でした。

最近またブログを書くようになり、久々にそのサイトのことを思い出しました。

ところが

重いのです。トップページが完全に開くまでの時間、とんでもなく長く感じました。画像がゆっくり一枚一枚クロールするように現れます。

なんかの演出か??と一瞬勘違いしましたが、違いました。

ただ純粋に重いのです。

僕は何をするわけでもなく、そっとサイトを閉じました。

画像の最適化は重要だ

f:id:hometaka5657:20171019020315j:plain

 

トップページに画像が沢山あったからなのかな。「全ての原因は画像だけにある。」そんなこと勿論ありませんが、少なくとも「重い」は「ユーザーの心が離れる」原因の1つになる。これは確かだと今回改めて思いました。

どんなに素敵なサイトでも、表示速度が遅いと見てもらうことさえできないのだなと。

正直詳しいことはわかりません。ただ誰でも簡単に行えて、且つ効果が期待できるものは画像を最適化することだと思います。

画像容量の削減です

これはWebサイトを運営している者なら気にかけた方が良い。そして実行するなら出来る限り早い方が良い。というのも、記事が増えれば増えるほど画像が増えるからだ。

めんどくさいです。

100記事もあればやる気も削げるでしょう。「はぁ、疲れた。もういいや。過去のことは忘れて今からやろう。」

こんなことにならないように、行動に移すべき。

画像容量の削減ですが、「サイズを縮小する」の意味ではないです画像の大きさや見た目を変えずに容量自体だけを削減する。これがベスト。

そして、案外簡単に実行できます。

画像圧縮サイトをご紹介

compressjpeg.com

JPG、JPEG、PNGイメージを圧縮できます。登録不要でとにかく簡単。

説明するまでもないですが説明しますっ

開くとこんなものがでてきます。アップロードして画像をドラッグ。5つまで同時に処理することが可能。

f:id:hometaka5657:20171019004145j:plain

はい、言われるがままにドラッグ。その瞬間にもう終わっています。

f:id:hometaka5657:20171019004139j:plain

-24%の削減に成功しました。写真下のダウンロードボタンでJPGのままに。下の全てをダウンロードでzip形式にできます。

(236KB→180KBになりました)

 

ついでに上の2点の画像も容量削減しちゃいます。

f:id:hometaka5657:20171019004142j:plain

はい。たったこれだけです!

更にもう一つ紹介しておきます。

tinypng

tinypng.com

こっちの方が全然有名でした。PNGとJPG.JPEGに対応しています。英語ですがびびらないで下さいね。

f:id:hometaka5657:20171019010808j:plain

点線の囲いをクリックしてドラッグするだけです。こちらもすぐにダウンロードできる状態になるので簡単です。

どちらでもお好きな方をお使い下さい。

最後は見た目

ここまでで画像の最適化は終了です。

肝心の見た目に変化がなければ上出来ですね!

最初のcompressで圧縮した画像から見てみましょう。

f:id:hometaka5657:20171019010224j:plain
f:id:hometaka5657:20171019010614j:plain

(1280×781が元画像)

左が236KB 右が180KB

 

続きましてtinyPNGで処理したほう

f:id:hometaka5657:20171019010217j:plain
f:id:hometaka5657:20171019010606j:plain

左が245KB 右が191KB

いかがでしょうか。殆ど区別がつかないかと思われます。容量を落とすだけのサイトなら多数ありますが、画質も変わらずということを意識して2点おすすめしてみました。

ファイル形式の変換

PNGからJPG,JPEGへの変換も同じ要領で可能なサイトがあります。

PNG JPEG 変換。オンライン フリー — Convertio

まとめ

画像最適化は是非とも行うべき。せっかく訪れてくれたユーザーが素通りする。なんてことになれば悲しすぎますよね。容量削減は最小限の努力で効果を発揮できるますので、手をつけてない方はこれを機にいかがでしょうか。

そういえばGoogleの中の人はこんな感じで言ってました。読み込みスピードは多少の誤差を問題としない。ただ、「遅すぎる」に関してはSEO上でも不利となる。

Googleで提供されているSEOツールに、ページスピードインサイトがあります。調べたいページのURLを入力するだけで表示速度を調べ、改善案を導きだす。

PageSpeed Insights

ただ、厳しいですねGoogle様。

計測してみたら50~70点の間でした。

最適化する前、最適化する後で計測するとわかりやすいかと思います。あまり気にするとドツボにはまってしますので、くれぐれもお気を付け下さい。

 

おしまい。