pickup
SEOに役立つ画像最適化

ブログやWebサイトの画像表示に時間が掛かり、ページの読み込み速度が遅いことで悩んでいませんか?

ページの読み込み速度が遅いことでSEOの検索順位が下がってしまうかもしれません。

対策の一つとして簡単に出来ることは『画像最適化』です!

2018年7月に『Google』より検索アルゴリズムをアップデートし、モバイルページの読み込み速度を “検索順位の決定要素” として使用し始めると発表しました。

今後対応の不十分なサイトでは、検索順位が下がると言われており、対策ができているサイトは検索順位が繰り上げられる可能性があります。

もし競合サイトがスピード対策できていないようなら、それは「検索順位入れ替わりのチャンス」と言えますよね!

このチャンスに画像を最適化し、サイトのスピード対策をしていきましょう。

参考までにちょっとサイトのスピードを測ってみてはどうですか!

Page Speed Insightsはこちら

スポンサーリンク

・画像最適化をするためには?

画像の特性を知ろう

そもそも画像とは二次元で平面に映っているものを画像と言います。

【画像容量とは】

画像の容量とはB(Byte)バイトという単位で表されます。

画素数×圧縮率=データ容量』で計算されす。

最小情報単位はbit(binary bigit)ビットと言われ

1bit=0.125B8bit=1Bとなる。

B(バイト)8bit

KB(キロバイト)=1000B

MB(メガバイト)=1000KB 

GB(ギガバイト)=1000MB 

TB(テラバイト)=1000GB

PB(ペタバイト)=1000TB

【画素数とは】

画素数とはデジタル画像の単位であるPixel(ピクセル)のことです。

画像(写真)とは11つの点(ドット)で構成されたもの。

その点に色情報がついたものをPixelという。

一般的に画素数が高いと言われるものは、このPixelがたくさん集まっているということです。

Pixelが多い=色情報が多い=緻密(ちみつ)高画質

よく間違われるのが画素数解像度が一緒の意味でとらえられることがありますが、全くの別物であり単位も違います。

画素数がPixelに対して解像度はdpi(dots per inch)ディーピーアイと呼ばれる単位で表されます。

【解像度dpiとは】

dpiとは(dots per inch:ドット パー インチ)の略。

解像度(dpi)=1ineh(インチ)×ドット数で表します

【画像解像度ppiとは】

ppiとは(pixel per inch:ピクセルパーインチ)の略。

bpiとは違い、こちらは画像の印刷時に1インチにピクセルがどれだけ含まれているかを示す単位のことです。

画像解像度(ppi)1ineh(インチ)×ピクセル数(色情報付き)で表します。

※1ineh(インチ) は25.4ミリメートル

【圧縮率とは】

圧縮後のデータが元のデータに対し、どのくらいの情報量に減ったかを表す割合。

圧縮率は『高い』『低い』で表現されます。 

圧縮ってどんな処理がされているのか?

圧縮は画像のファイル形式にも異なりますが『可逆圧縮』『非可逆圧縮』の2通りあります。

【可逆圧縮とは】

可逆圧縮は難しい数学理論で画像を数字に置き換えて圧縮する方法で、元のデータと同じ状態で復元することが出来ます。

例題

AAAAABAAAA 圧縮→ A5B1A4
圧縮して文字数が10から6になりました。まとまっているだけなので復元することが可能です。

【非可逆圧縮ついて】

消去しても問題のない情報を間引いて、データ容量を小さくする方式。

一部データを削除するため完全な復元はできないが、高い圧縮率を誇ります。

例題

AAAAABAAAA 圧縮→ A10
文字数が10から3になりました。高い圧縮率を可能にしている分、人の見た目では分からないような部分を置き換えたり削ったりしているので完全な復元をすることは不可能です。

 画像ファイル形式によって圧縮方法が異なるためこちらも参考にしてください!

画像の特性を理解したら早速画像の最適化に向けてリサイズをしたいところですが、1つ確認をしておきましょう!

自身のWEBサイトに適した画像サイズです!

サイトによって記事幅が決まっていますよね?

いろんなサイトを見てみると、

皆さん650pixel~750pixelで使用している人が多いですね。

ご自身でより良いサイズを判断しリサイズをしてみてください!

画像をリサイズする

サイズを把握したらリサイズをしますが、画像をそのままで小さくする方法画像を必要な部分だけ切り出す方法があります。

今回はWindows版で説明していきます!

Macの場合はこちらを参考にしてください!

【画像をそのまま小さくする方法】

・編集したい画像を選択して右クリック

・右クリックを押すとサイドバーが出てくるので『プログラムから開く』をクリック

・プログラムから開くをクリックすると更に展開するので『ペイント』をクリック。すると下の図のようになる。

 ・赤丸部分の『サイズ変更』をクリックする。

・サイズ変更画面でサイズを指定する。

・サイズを入力したら『OK』を押す。

・保存して『リサイズ』終了。

※他にもパーセントでサイズを変更することや、傾き加減まで詳細設定ができます。

【必要な部分を切り抜く方法】 

・ペイントの画面を開くまでは『そのまま小さくして使用する』方法と同じです。

・必要な部分を『選択』で範囲を決める。

・選択が終了したら『トリミング』を押す。

※ここからは『そのまま小さくして使用する』方法と一緒になります。 

必要に応じて使い分けてリサイズすると良いでしょう。

画像を最大限圧縮する

こちらの画像圧縮ツールを使用して画像の容量を小さくします。

・ファイルを選択、またはドラッグして入れます。(入れると勝手に圧縮されます)

・圧縮されたらダウンロードします。これで終わりです(笑) 

すごく簡単に圧縮することが出来ます!

このように全ての画像をリサイズ・圧縮することでWebサイトを高速化することが出来ます。

やらない手はないですね(笑)

・圧縮をするためのツール紹介

Compress JPEG

PNGからJPGへ』『JPGからPNGへ』『SVGからPNGへ』などへ変換でき、ファイルをドラッグするだけで簡単に使用できるツールです。

最大20画像.jpgまたは.jpegファイルを一度に圧縮することが出来ます。 

pngquant 

こちらのサイトではファイルサイズが大幅に(70%程度)削減され、完全なアルファ透明度が維持されます。

アルファ透明度とは
アルファ値を使って透明度を表したもの。
最大値の255を設定している時は不透明で数値が小さくなるにつれて透明度が上がっていきます。
0を設定した場合には完全な透明となります。
生成されたイメージはすべてのWebブラウザおよびオペレーティングシステムと互換性があります。

Tiny PNG 

Tiny PNGは、スマートロッシー圧縮技術を使用してPNGのファイルサイズを縮小します。

画像内の色の数を選択的に減らすことによって、データを格納するのに必要なバイト数が少なくなり、ファイルサイズに大きな違いが出てきます。

PNGは、部分的に透過的な画像を保存できる唯一の広くサポートされているフォーマットであるため便利です。

Tiny JPG  

こちらが上記で利用した画像圧縮ツールになります。

Tiny JPGは、JPEG画像のファイルサイズを軽くします。

アップロードされたすべての画像が分析され、可能な限り最適なJPEGエンコーディング(圧縮方法)が適用されます。

※③④は切り替えて使用することが出来ます。

EWWW Image Optimizer

EWWW IOは、画像の最適化によってページスピードを向上させることができます。

ページのスピードを上げると検索エンジンのランキングが上がり、コンバージョン率も向上します。

またストレージスペースと帯域幅を節約します。

EWWW IOは、あらゆるプラグインによってアップロードされ、作成された画像を最適化することができ、既にアップロードしたすべての画像も必要に応じて画像を最適なファイル形式に変換することもできます。※こちらはWord pressのプラグインです。

・まとめ

いかがでしたか?

今回はブログなどWebサイトにアップする画像の最適化をする方法について紹介しました。

画像の読み込み速度はSEO対策の基本となるので、自身のサイトにあった画像最適化をしっかりと行いサイトの高速化を実現していきましょう!

最初にこの知識がわかっていると本当にラクですよ!!

私は途中で知ったので…

1つ1つ画像を圧縮しましたw

スポンサーリンク

Twitterでフォローしよう

おすすめの記事