ご機嫌よう、ごいちです。
今日はブログの画像サイズについて。サイトを運営し始めておよそ20日経ったが、Googleのインデックス状況は相変わらず芳しくない。色々調べてみると、いくつかの文献にて、「独自ドメインを取得した場合は始めはドメイン評価が低く１〜３ヶ月はほぼアクセスは伸びない」というようなことが書いてあった。なかなかキツい。Wordpressは便利で楽しいがここらへんが参入障壁となることが多いようだ。
しかしGoogle様の評価を上げるためにできる限りのことはやっておきたい。最近のGoogleは「ユーザーの快適性」をかなり重要視しているので、サイトの評価を上げるにはまずサイトの表示スピードを上げるのが一番だろう。
ということで、GoogleのPageSpeedInsights(サイトの表示スピードの確認と、遅延の原因を確認できるサイト)にてサイトのスピード調査をしてみたところ、使用しているWordpressのテンプレート(The Thor)が元々かなり速度を意識したもののため、スコアとしては悪くはなかったのだが、改善できる項目として、
- 次世代フォーマットでの画像の配信
- 適切なサイズの画像
- 効率的な画像フォーマット
というように、サイト上の「画像」に関する最適化の提案がいくつかきていた。
次世代フォーマットでの画像とは？
画像フォーマットの簡単な説明
現在ほとんどのサイトではJPG、GIF、PNGといった画像フォーマットが使用されている。自分が認識しているそれぞれの特徴はというと、
JPG
綺麗に表示できるため写真など鮮明な画像の表示には向いているが、画像を拡大・縮小など加工して表示させるとその度に荒くなる＝加工に向かない。ネット上でよく見かけるのが、画像形式を理解しない人がバナー画像にJPG形式で保存したイラストを使用しており、横幅が伸縮するタイプのサイトだったため画像があらく表示されてしまう事案。
GIF
最大の色数が256色しかないため、写真には向かない。ファイルサイズが軽いのでWEB上でイラストを表示する際など使える。またアニメーションとして表現することができる(GIFアニメ)
PNG
GIFの色制限がなく綺麗な画像を表現しつつ、加工しても劣化しにくい形式。また背景透過もできるため便利。サイトのロゴなどはこれで作ることが多い。
このようにそれぞれの画像形式に一長一短がある。ブログ運営者は「画像の軽さ」「鮮明さ」を考えながらこれらを使い分けると快適なサイトをつくっていくことができる。
これらの画像形式に加え、2020年現在、Googleが新しく開発したwebpなど新しい形式が生まれており、快適なサイト表示のためにPageSpeedInsightではこれらを推奨しているとのことだ。では以下より紹介していこう。
WEBP(ウェッピー)
パンダPだかウィッキーだかわからんがなんだかかわいらしい名前。こちらはまだ比較的新しく(2010年より提供)現状ではあまり知名度がない形式だ。Wikipediaによると、
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。
とある。サイトをサクサク表示するために先ほど紹介したJPGやGIF、PNGに代わって使用することで、ファイルサイズがそれぞれ2~3割の圧縮が見込めるとのこと。2~3割というとかなり大きい。
変換するとどれくらい圧縮できるのか確認してみる
ページまるごとWebP変換というサイトを利用すると、自分のサイトの画像を全てWebPに変換した場合どれくらい圧縮されるのか確認することができる。利用方法は、「チェックするサイトのURL」のところに自サイトのURLを入力して「ページまるごとWebP変換」のボタンを押すだけ。
なんとこのサイトで導入した場合は「56.9%」もの削減に繋がるらしい。すごい！クラウド料金の予測削減金額まで表示してくれるのは親切だなあ。
ただしWebPには下記の問題点があり採用するか迷うところ。
WebPの問題点
対応しないOSがある
拡張子に対応しないOSでは、デフォルトの状態ではそもそも表示すらできない。最近のOSはほぼ対応しているが、Windows7など使っている人は注意。・・・さすがにほとんどいないか。
対応しないブラウザがある
ブラウザによっては表示ができない。OSは自分がなんとかすればよいが、サイトでは閲覧者のブラウザをコントロールすることはできないので、アップデートしていないブラウザや非対応のブラウザを使用している人がいた場合サイトの表示が崩れてしまう。これは結構痛い。
が、2020年9月現在、Chrome、Edge、Firefoxに加え、長らく沈黙を続けていたApple SadariがiOS14よりWebPに対応することとなった。となると、大きなデメリットだった「Safari非対応」のデメリットが解消されたことになるので、導入するメリットが大きくなってくる。IE？そんな化石、忘れろ！
次世代フォーマットにはその他JPEG2000などあるようだがここで語ると本題からそれるので今回は割愛する。
適切なサイズの画像とは？
ウェブサイトの場合、画像の表示サイズと画像の実際のサイズが異なる場合がある。例えばレスポンシブ(スマホやPCなど表示する幅によってサイトの中身が伸縮するサイト)なサイトの場合、
横幅が300pxの画像を幅100%で表示する時、横幅300のスマホで表示する時は原寸だが、横幅1080のPCで表示する場合は引き伸ばした粗い画像になってしまう。となると、元サイズの大きな横幅2000pxぐらいの画像を利用しておけばどちらも鮮明に表示できるためよいじゃないかと思う方もいるかもしれないが、画像の元サイズに合わせて単純に画像サイズも増しサイトが重くなってしまうため、画像の元サイズをどれくらいにするかは非常に悩ましいところ。
このサイズの管理がうまくいっていないと、Page Speed Insightにて「適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください」と提案されることとなる。
画像のリサイズや圧縮、拡張子の変更方法
WordPressを利用している場合は、いくつかの対応方法が考えられる。
- I LOVE IMGなどのサイトを利用するか、縮小専用。などの画像圧縮ツールを利用し、サイトいアップする前にまとめて縮小しておく方法
- EWWW Image Optimizerなど画像圧縮プラグインを利用してアップした画像を自動で変換させる
①の方法の場合、個別に変換がかけられるため、管理はしやすいだろう。ただし、記事数をかなり書くブログの場合は手間がかかる。一方で、②の場合は簡単な設定で圧縮やリサイズが実現できるため、非常に便利。
ということで、快適性と効率を重視する51 Auto Logでは、画像圧縮プラグインを導入することに決めた。
EWWW Image Optimizerのダウンロード・設定方法
まずはプラグインをダウンロード。
「今すぐインストール」をクリック。(※自分はすでにインストール済のため 「有効」が表示されている)
WordPressの設定→EWWW Image Optimizerクリックで設定画面に移動。
Basic(基本)タブが開かれていると思うので、基本設定から行っていこう。その他自分が設定を行ったタブのみ紹介していく。
基本設定
まず必須級の設定が、「メタデータを削除」だ。画像は目に見える情報だけでなく、「撮影日時」「撮影場所」などといったメタデータが保存されている。特殊な例がない限りブログにとっては百害あって一利なし。データサイズも落ちるのでチェックを入れて削除することを推奨する。
その下の各拡張子の最適化レベルは、有料版の場合「プレミアム」といったさらなる圧縮ができるようだが、無料版でも機能としては十分だ。
簡単モード
無料で使用する場合は特段触る必要がない。
遅延読み込みは、Wordpress5.5以降は設定が入っているので触らない方がよいだろう。また、AMPを導入している場合はLazyloadの設定はエラーの原因にもなる。
リサイズ
リサイズ検知・・・本来の画像よりも縮小して表示されているものを表示上強調表示してくれる機能。あまり必要性を感じないので自分はオフにしている。
画像のリサイズ・・・アップロードする際に自動で幅を揃えてくれる。どデカイ写真を記事投稿する時など手動でリサイズするのが面倒なので、自分は横幅768pxに設定している。画像の横幅を決めている人にとっては非常に便利な機能。利用するかどうかはサイトの方針にもよると思う。
既存の画像のリサイズ・・・ヘッダー画像など一部768px以上の画像もありリサイズされると困るのでこちらはオフにした。
変換リンクを非表示・・・こちらはチェック必須。チェックしないと他のユーザによって拡張子の違う画像が勝手に複製されたり弊害が多い。
WebP
WebP変換を有効化した。理由は上述。これで大幅に画像サイズが軽くなるはず。Googleも推奨しているので今後はネット上での画像はWebPが主流になることだろう。
最後に変更を保存して完了。
仕上げに一括最適化
メディア→一括最適化をクリック
してサイトの画像を一括で最適化することができるのでやってみる。
これで設定は完了。
最後にGoogleのPageSpeedInsightでスコアをチェック。
モバイル
PC
まあこんなもんか。
クローラーさん、ここですよ〜（笑）