記事作成

Macプレビューを使って画像を一瞬で13MB→523KBに圧縮する方法|サイトの表示速度を上げろ!

 

悩んでる人
悩んでる人
サイトの表示速度を上げるには何をすればいいのでしょうか?

画像を圧縮して、画像の重さを軽くすればサイトの表示速度は上がりますか?

だとしたらどうやって画像を圧縮すればいいのか分かりません。

1番簡単な方法が知りたいです。

 

そんな悩みを解決していきます!

 

自分のサイトを見るときに、画像が中々出てこなくて遅いと感じたことはありませんか?

画像が中々表示されない原因は、画像の容量が大きくて重いからです。

表示速度が遅ければ、それだけで読者に負担をかけてしまいます。

負担がかかってしまった読者は、ストレスを感じるために記事から離脱してしまうかもしれません。

そうならないためには、画像を圧縮して軽くし、表示速度を上げる必要があります。

この記事に書いてある「画像を圧縮する方法」を読んでいただければ、あなたでも簡単に画像の重さを軽くすることができるだけでなく、サイトの表示速度までもが上がってしまうのです!

ちょろてん
ちょろてん
正直言って全然難しくないですよ。

むしろめちゃくちゃ簡単です!

 

本記事では、数ある画像を圧縮する方法の中でも1番簡単なものを1つだけ厳選してお届けします。

それが「Macのプレビュー」を使った画像の圧縮です。

ひとまずそれを覚えてください。

そしてすぐに実践していただければ、離脱率を少しでも下げることができますので。

それではいきます!

画像圧縮がなぜ必要なのか?

なぜ画像圧縮が必要なのかについて少し話します。

・最近の有料素材は高画質で容量が大きい

・最近のスマホは高画質で容量が大きい

などがあげられます。

最近の画像の高画質具合に関しては、過去に書いた記事をご覧ください。

ブログでよく使う無料のフリー素材サイトを4つ紹介!【番外編あり】ブログでよく使うフリー素材サイトを4つ紹介しています。紹介するフリー素材4つは、①Pixabay②いらすとや③写真AC④PAKUTASOです。正直この4つだけでほとんどの記事の画像をまかなうことができます。ちなみにフリー素材を使う際は、利用規約をよく読んでからにした方が安全です。...

 

画質が綺麗で最高な反面、容量が大きくサイトの表示速度を下げる原因にもなってしまうのです。

例えばあなたがスマホで何かを検索したとして、表示されるまでの時間が速いのと遅いのとではどちらの方がいいですか?

絶対速い方がいいはずです。

ちょろてん
ちょろてん
中々表示されないと、「見るのやめた!」ってなりますもんね。

結構やめることが多いです。

 

実はスピードに関しては、Googleも言及しています。

Googleが掲げる10の事実がSEOの本質【考え方の具体例付き】Googleが掲げる10の事実こそが真のSEO対策である。なぜなら、SEOの順位を決めているのがグーグルだからです。SEOの順位を決めているGoogleが何を考えているのかを知ることで、どうすればSEOで上位を取ることができるのかがわかります。グーグルは、間違いなくユーザーのことを最優先に考えています。Googleが掲げる10の事実を知った上で、あなた自身で考えてみてください。考え方の具体例ものせてあります。...

 

速度の違いはどのくらい?

今回は、PageSpeed Insightsを使って計測したデータがありますので、参考にのっけておきます。

まずは圧縮前

上記のように33と表示されています。

33というのは点数です。

点数が高ければ高いほど優秀な速度ということです。

 

ちょろてん
ちょろてん
今回はスマホでの表示速度の点数だけのせておきます。

いやぁ〜、あまりの遅さに衝撃を隠しきれませんね。

 

この計測の後にいくつか画像を圧縮したものに取り替えて、再度計測し直しました。

なんと37になっています。

速度が若干速くなりましたね!

ちょろてん
ちょろてん
実際にスマホで確認してみましたが、明らかに速くなっています。

とはいえまだ37点で100点までは遠くおよびませんが、まだまだ伸びしろがあるということで。

とにかくスピードが速くなることは間違いないので、必ず圧縮はしてください。

 

表示速度に関しては、画像を圧縮するだけですべて改善することはできません。

他にも様々な要因があります。

 

それでは1番簡単な方法をこれから書いていきますので、読み終わったらサクッと圧縮してみてくださいね!

 

Macのプレビューを使った簡単画像圧縮を解説

本記事ではMacにはじめから搭載されている「プレビュー」を使って画像を圧縮していきます。

今回使用させていただく画像は、Shutterstock
の高画質画像です。

実際に僕の記事にも使用していましたが、全然表示されなかったツワモノです。

よくよく見てみたら、なんと13MBもありました。

 

あらかじめダウンロードした画像をデスクトップに置いて起きました。

ここでちょっと便利な裏技を使います。

上記のように画像をクリックします。

クリックしたら「スペースキー」を押してください。

画像が一瞬で大きく表示され中身を確認することができます。

「チラ見機能」と呼ばれています。

もう一回スペースキーを押すともとに戻ります。

 

ちょろてん
ちょろてん
今回は戻らないでくださいね。

そのまま続けていきます。

 

上記の赤矢印の先の「”プレビュー”で開く」をクリックしてください。

上記のようにプレビュー画面になりました。

「ツール」をクリックしてください。

ウインドウが開きますので

「サイズを調整」をクリックします。

上記の画像になりますが、(変更前:14.1MB)ってありえないくらい重い画像ですね…。

ちなみに、左側をみてもらうと「サイズを計算中」となっています。

少し時間が経つと、2.3MBと表示されました。

ちょろてん
ちょろてん
調整後のサイズが2.3MBになるということですね。

あまり気にしなくてOKです。

 

1番上にある「サイズを合わせる」の右にある「カスタム」の横の青い矢印の部分をクリックします。

あらかじめ用意されているサイズが表示されますので、お好きなサイズを選択してください。

僕がよく使うのは、「1024×1024」です。

画像を圧縮すると、画質が悪くなります。圧縮した画像は、必ずチェックするようにしましょう!

 

ということで、「1024×1024」を選びます。

右下の「OK」をクリックします。

だいぶ小さくなりますが、圧縮成功です。

実際に画像を使うときは、ちゃんとした大きさで使うことができますのでなんの問題もありません。

以上で画像の圧縮は完了です。

ちょろてん
ちょろてん
めっちゃ簡単でしたよね?

ぜひ試してみてください!

 

まとめ:せめてサイトの表示速度で優位にたとう!

実はサイトの表示速度ってかなり大事だったりするので、速くするにこしたことはないわけです。

ブログを始めたばかりで、なかなか読まれなくてもサイトの表示速度を誰よりも速くすることはできます。

後々それが強みになったりすることもあるのですよ。

だからせめてサイトの表示速度では1位になりましょう!

てことで今回は終わります。

それではまた

ABOUT ME
ちょろてん
ちょろてん
インターネット関連やガジェット、新しいサービスなどが好きな平凡なグウタラ会社員です。僕の身の回りに起こる全ての事をネタとして記事を書いています。肩の力をぬいて、気軽に読んでいただければ幸いです。