【SEO対策】これで大丈夫！画像圧縮方法！

こんにちは、なっちる先生（@nacchi_jagariko）です。

大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。

 

なっちる先生はここ半年、フロントエンドばかりしており、大手飲料メーカーや大手食品メーカーのクライアントさんを相手に仕事をさせていただいていることが多いです。

そのためSEO対策に厳しいところもあり、納品する時はきちんと画像圧縮してから納品します。

そのためか先日このようなツイートをしました。

【フロントエンドあるある】
パソコンからツイッターに画像のせようとするとき、tinypingで画像圧縮してimageOptimにかけてからツイッターに画像を貼ろうとする自分がいる

— なっちる先生@もっちるの先生 (@nacchi_jagariko) 2019年3月19日

　なぜ画像圧縮するのか

まず、そもそもですがなぜ画像圧縮するのか少し説明しておきます。

画像が重いとサイトが重くなり、表示されるのが遅くなってしまいます。

遅くなるとは言ってもわずか0.数秒の違いですが、サイト表示速度が1秒以上になってしまうと離脱してしまうユーザーが出てきてしまいます。

またSEOにも影響してきます。

参考までにこちらでサイトがどのくらいのウェブパフォーマンスかわかりますので、調べてみてください→PageSpeed Insights

ということで画像の容量が重いと、サイトの運用に支障が出てしまうことがわかったと思います。

　おすすめ画像圧縮方法

さて、ここから本題ですね、画像圧縮の方法について説明します。

1.サイトから取ってきたものや写真の場合

ブログだったらこういう場合が多いでしょうか。

以下手順です。（２つあります）

-１.「TinyPNG」で画像圧縮する

まずは、おなじみのTinyPNGで圧縮しましょう。

やり方は簡単です。

こちらのサイトにアクセスして、

上の画像の点線の四角のところに画像をドロップするか、クリックして画像を選択するだけです。

 

しかし、TinyPNGでほとんどの画像は圧縮できると思いますが、圧縮できる画像の容量は5MBまでです。

5MB以上の画像を圧縮したいときは

「Compress PNG」を使いましょう。

 

それでも画像圧縮できないときは画像のサイズを小さくして、容量を少なくしましょう。

Windowsであればペイントで、Macであればプレビューで変更できます。

Photoshopを使えるのであればそちらでも！

その後にCompress PNGなり、TinyPNGなりで画像圧縮すればOKです。

-２.「imageOptim」で仕上げる

さて、上の方法で圧縮してダウンロードしたものを「imageOptim」というもので再度圧縮します。

ダウンロードはこちらから（mac）→https://imageoptim.com/mac

こちらmacでしか使えませんが、windowsでは同じようなもので「FileOptimizer」というものがあります。

こちらのサイトの下の方にいってもらえればダウンロードできる場所があります。

imageOptimもFileOptimizerも、使い方は同じようで簡単です。

ここではimageOptimの使い方を説明します。

ダウンロードしてimageOptimを起動させたら、こちらの画面が出てくると思います。
そしてこの画面にファイルをドロップするだけです。

こんな感じですね。

下の画像のように一番左側のアイコンのマークが❎になるまで再実行をします。

これで完了です！

2.Photoshopからスライスする時

デザインデータだけ渡されて、HP制作をしなければいけない時もあると思います。photoshopから吐き出さなければいけない場合について説明していきます。

PNGのとき

pngで吐き出す時はPNG-24に指定して保存します。

その後、保存した画像に上の1-1、1-2の手順を適用します。

JPEG（JPG）のとき

画質のところを40~60に変更します。

今までの経験上、40も60もあまり画質は変わらないので、より容量が少なくなる、40でいいと思います。

その後、保存した画像に上の1-2の手順を適用します。

GIFのとき

元データと最適化後の画像を見比べてカラーの色数を変えてください。

その後、保存した画像に上の1-2の手順を適用します。