内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化

Google PageSpeed Insightsツールの速度の提案項目の一つである画像に適切なフォーマットと画像に適切な圧縮する方法を説明致します。フォーマット・圧縮をする事によりGoogleのPage Speedスコアが高くなりSEOにも効果が表れると思います。俗に言う内部SEOになります。
スポンサーリンク

画像に適切なフォーマットを選ぶ

ブログ・サイトのSEOで画像の設置は必須です。その画像の拡張子(フォーマット)がGoogleで指定されているのは知っておられるでしょうか?Googleが指定する画像の拡張子(フォーマット)は以下の様になります。

 

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化1

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化1

 

Googleが指定する拡張子の説明です。

  1. アニメーション画像ならGIFを使うのが唯一の選択肢です。
  2. 最高の解像度で精細さを維持する必要がある場合はPNG を使用してください。
  3. 写真やスクリーンショットのような画像アセットを最適化していますか。最適化している場合は、JPEG を使用してください。
  4. 最適な画像形式とアセットごとの設定を決めたら、WebPJPEG XR でエンコードしたバージョンを追加することを検討してください。

1.2はそのままなので説明は要らないと思います。しかし3.4に関してはイマイチ良く分からないですよね。その説明を致します。

JPEG画像のアセットの最適化とは

アセットとは 画像に適したサイズに変換し書き出してく機能の事です。Photoshop CC(画像ソフト)のからの機能になりそれ以前のバージョンでは使用出来ません。ではPhotoshop CC(画像ソフト)を持っていない人はJPEGを使えないのか?と言うとそうでは無く、あくまで分かり易く説明する為にアセットと言う専門用語を使用されているだけです。つまり画像に適したサイズを色々と試して、画質・ファイルサイズが納得出来るのであればJPEGを使用して下さい。と言う事です。

 

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化2

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化2

 

WebP や JPEG XR でエンコードしたバージョンを追加

JPEGを使用される場合はJPEGの代わりに成るWebP・JPEG XRをブラウザーに合わせて表示出来る様にして下さいと言う事です。画質の品質がほぼ同じでJPEGよりファイルサイズが軽くなります。将来的に各ブラウザがWebPやJPEG XRが対応可に成ればJPEGの使用は非推奨になるでしょうね。又それに代わる拡張子が出てくるかもしれません。

 

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化3

内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化3

 

ちなみに対応しているブラウザは以下の様になります。このブラウザだけに対応する様にHTML・PHPを設定する必要があります。ヘッダーからイジル必要が有ると思われます。

WebPIE

JPEG XRChrome Opera Android

 

もし時間に余裕がある場合は上記方法を厳守して下さい。私はJPEGを使用してはいますがWebP・JPEG XRの設置は行っていません。時間が有る時にでも設置方法の説明ページを作成したいと思います。ここで守るべき最低限の事ははGIF・PNG・JPEGのいずれかの拡張子を使用して画像の設置を行うと言う事です。内部SEOになりますので必ずそうして下さい。もし他の拡張子を使用されている方は、お使いのペイントソフトで変換したい画像を一度開いて、GIF・PNG・JPEGの拡張子に変換して下さい。OS付属のペイントソフトでも出来ます。

 

画像に適切な圧縮を選ぶ

上記で説明した拡張子GIF・PNG・JPEGの圧縮をする為のツールがGoogleで推奨されています。でももし他で使用されている画像圧縮ソフトが有るのであればそちらを使用して下さい。大した変化は無いと思いますのでやってる事は一緒なのです。Googleが推奨する画像圧縮ソフトは以下になります。

GIF 画像圧縮ツール

Gifsicle

PNG 画像圧縮ツール

OptiPNG (画質を落として完璧な圧縮) pngquant (画質を優先して圧縮)

JPEG 画像圧縮ツール

jpegtran

上記全てコマンドツールになります。凄くメンドクサイです。そこで私がお勧めするのがjpegoptim.exeoptpng.exeになります。拡張子で分かると思いますがコマンドツールの実行ファイルになっております。ダウンロード後ドロップアウトで圧縮してくれる初心者に優しいツールになります。デメリットは細かい指定が出来ない事ですが、そんなの初心者の私は気にする必要もなくドンドン使っています。ダウンロード・使い方は下記リンクにて分かり易く説明しています。

品質・画質を落とさずに画像JPEG・PNGを圧縮・最適化ツール

 

内部SEO画像に適切なフォーマットと圧縮を選ぶまとめ

GoogleのPage Speedスコアを上げる為の画像の処理方法を説明してきました。準備に多少時間を要しますが整ってしまえば後は簡単に処置出来る項目です。画像は一番Page Speedスコアのネックになる部分です。すぐに赤信号灯ります。定期的にPage Speedスコアを確認して赤信号が灯っていたらスグに対処される事をお勧めします。ホントよく圧縮するの忘れるので!!気が付いたら赤信号です。

 

この記事は以上になります。ここまで読んで頂いてありがとうございます。これからも分かり易い内部SEOの説明をしていきたいと思いますのでどうぞ宜しくお願いします。

 

関連記事一覧

品質・画質を落とさずに画像JPEG・PNGを圧縮・最適化ツール 
SEO 誰でも出来る検索エンジン最適化出来る事をやればいい
SEO 検索エンジンと記事の質の関係が与える検索順位への影響力
SEO Googleランク付けをスムーズにする為に行う対策
レンダリングをブロック JavaScript・CSS を排除する方法
CSS・JavaScript・HTML縮小(圧縮)するツールと方法
SEO対策 タイトルの付け方・書き方を制す者がWEBを制す
SEO対策 投稿記事を見直して検索順位を上げる手段・方法
SEO対策画像の効果的な使い方と貼り付け方でライバルに差をつける
検索キーワード 入力する項目を押さえて訪問者を大幅に増やす方法
WordPress 初心者の為のheader.php解説(説明)
SEO対策 header.php コードを見直し表示速度を上げる
Fetch as Google機能で最短でインデックス登録方法
robots.txt 使い方と設置と必要な項目(作成・テスト・送信)
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です