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

画像圧縮 備忘録

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

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

 

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

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

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

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

今回は、そんななっちる先生が、これさえすれば大丈夫!画像圧縮方法(SEO対策)について話していきたい思います〜。

こんな人向けです↓

画像圧縮必要っていうけど、どうしたらいいの?

スポンサーリンク

 なぜ画像圧縮するのか

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

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

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

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

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

前はpagespeed insightsのサイトで画像圧縮してくれたのになぁ。泣

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

 おすすめ画像圧縮方法

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

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

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

以下手順です。(2つあります)

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

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

やり方は簡単です。

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

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

 

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

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

Compress PNG」を使いましょう。

 

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

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

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

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

-2.「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の手順を適用します。

共通して、「メタデータ」のところはなしにしてください。
これを設定していないと著作権やその他付加情報も入ってしまい容量が大きくなってしまいます。
画像処理については、この画像圧縮方法で十分です。
画像圧縮でより良いサイトにしていきましょう!

SEO対策バッチリだね!

以上でなっちる先生の授業を終わります〜。
スポンサーリンク
備忘録
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました