初心者もできるPage Speed Insight「次世代フォーマットでの画像の配信」対策

初心者もできるPage Speed Insight「次世代フォーマットでの画像の配信」対策ノウハウ

だんなよ、Googleさんでページのスピードが遅いから「次世代フォーマットでの画像の配信」をすすめられたんだけど、なにそれ美味しいやつ?

おくさま。それは、jpg(ジェイペグ)とかpng(ピング)っていう20世紀のデータ形式じゃなくて、もっと軽くてきれいな画像形式を使えってことです。

次世代フォーマットとしておすすめされた WebP と JPG 2000についてググったら、iPhoneではWebP見られない、Chromeではjpg2000見られないとか書いてて謎なんだけど…VHS対ベータみたいな戦争中?

そうそう、JPG 2000はAppleが推してて、WebPはGoogleが推してるから、どれを使っていこうってまだ決まってないんだよね。

えーっ?次世代フォーマットで配信できないやん!意味わからん!iPhoneでWebPが見られるようになってから次世代フォーマットとか言いやがれ!!

まぁまぁ、怒らないで。実はGoogleのあるサービスを使えば、WebPをiPhoneで表示できるんです!難しいことないので、5分くらいで紹介しますね。

サイトが重たくないかを図るサービス「スピードインサイト」で「次世代フォーマット」がうんちゃらって言われません?ググってみると、iPhone(Safari)とWindowsPC(Chromeなど)で表示されたりされなかったりするらしく…。どうしたらいいのよっ!って感じです。

SpeedInsightで次世代フォーマットWebPとjpg2000©https://caniuse.com/

緑が対応しているブラウザ、赤がまだのブラウザなのですが、WebPはみごとにSafariとiOS Safari、そしてIEが対応していません*。
*2018年にマイクロソフトが「Internet ExplorerIからEdgeへ移行してね」と発表してるのでIEは気にしなくていいです。

SpeedInsightで次世代フォーマットWebPとjpg2000©https://caniuse.com/

対する JPEG 2000は見ての通り、Appleしか対応してません、なんて露骨な…(笑)

でも大丈夫、上の画像もWebPなんです。iPhoneの人にも表示されてますよね?(もし表示されてないiPhoneユーザーの方には、お詫びにビビン麵お送りするのでメールでお知らせください)

スポンサーリンク

iPhoneにもWebPを表示するにはGoogleフォトを使おう

iPhoneにもWebPを表示するにはGoogleフォト

旅行の時に、スマホの容量を無限大に近づけてくれるGoogleフォトさんがここでも役立つんです。使い方は後程説明しますね!難しいコードを書く必要もないし、コピペだけで出来るので、どうぞ気を張らずに読み進めて下さい。

次世代フォーマットWebPとは何でしょう?

次世代フォーマットWebPとは何でしょう?

その前にちょっとだけ、WebPについてご紹介。WebPはGoogleさんが開発している静止画の画像形式。jpg(ジェイペグ)とかの仲間です。特徴は画質は落とさず、容量を減らせる点。

元の画像がPNG画像でだと約26%(可逆圧縮)、JPEG画像で25-34%(非可逆圧縮)容量を小さくできるとしています*。
*Google Developers「A new image format for the Web

ちなみにWikipediaや楽天などでは、すでにWebPを使っていたりします。

スポンサーリンク

画像をWebPに変える方法は?

画像をWebPに変える方法は?SQUOOSH

画像の形式を変えるって言われても、よくわからないですよね。僕もPhotoshopみたいなソフトは持ってないので、ブラウザ上で変換できるサービス使ってます。

それがSquoosh!Googleさんが作っているサービスで、画像変換の前と後で画質を比べられるのが便利。

一枚ずつやらなきゃ、というのが面倒ではありますが、僕はご飯の写真とか載せること多いし、ちゃんと美味しそうな画像か確認しながら、作業ができてすごく便利。

WebPに圧縮する方法はGoogleのサービス「Squoosh」が便利

WebPに圧縮する方法はGoogleのサービス「Squoosh」が便利

簡単に使い方を紹介すると、Squooshのサイトへ行って、画面にドロップ。その後、画像の種類・サイズ・画質を変えるだけです。

僕は画像はWebP形式・サイズは幅600px・画質は70%くらいに設定することが多いです。たまに、それでも50KBを超えていることがあるので、そんなときは画質を落としたり、サイズを小さくして50KB以下に(50KBを超えると、スマホで見た時に表示が遅い気がします)。

最後に右下、水色のダウンロードボタンを押せば完了。

スポンサーリンク

Googleフォトをブログに貼りつける方法は?HTML編集だけ!

WebP形式Googleフォトをブログに貼りつける方法は?HTML編集だけ!

出来上がった画像をワードプレスや、ライブドアブログにアップロードしようとすると、このファイル形式には対応していません、って言われます。そこでGoogleフォトの出番。

  1. Googleフォトで共有アルバムを作って
  2. WebP画像を共有アルバムに入れて
  3. 画像のURLをコピー
  4. HTMLモードでブログに<img alt=”” src=”③でコピーしたURL” width=”600″ />を貼り付け

この4段階で終わります。

Googleフォトの使い方がわからなかったら、ITおじさんの「パソコンからGoogleフォトを使う方法」の記事と、共有アルバムって何?ってときはiSchoolさんの共有アルバムの作り方アルバムを作って共有の部分)、の2つを読んでみて下さい(丸投げ 笑)。

大事なところなので、もう一度書きますね。

①iShoolさんを参考に共有アルバムを作り

②共有アルバムにWebPアルバムをアップロードしたら、

共有アルバムのアップロードしたい画像を開いて、右クリックして「画像アドレスをコピー」*
*一覧になっている状態(上:❶)ではなく、一枚だけ選択している状態(下:❷)でアドレスをコピーしましょう。

④HTMLコードを貼り付ければ画像が表示されます。
 はてなブログの場合はHTML編集を選ぶとHTMLコードが入力できます。

↑の画面じゃなくて↓の画面

【超重要】GooglePhotoを使うときに気を付けるべき唯一のこと

GooglePhotoの画像がブログに表示されないエラーに気を付けて

共有アルバムに入れた写真を貼り付けたのに、スマホで見たら表示されないシークレットブラウザでみると表示されない!ということがあります。怖いのは、Googleにログインしている状態の自分にだけは画像が表示されているところ。

GooglePhotoの画像がブログに表示されないエラーに気を付けて

理由は、貼り付けたい写真を選ぶときに共有アルバムから選んでいないから。

写真を選ぶときに、すべての写真の一覧から、載せたい写真を選ぶんじゃなくて、共有アルバムから選ばないと、自分以外の人には画像の表示ができません。いまもたまにやっちゃうので、共有アルバムをブックマークして、ブックマークから開いて画像を貼り付けるようにしています。

「 alt=”what is This”」を書くと、Google評価も上がるらしい

alt=を書くと、GoogleのSEO評価も上がるらしい

貼り付けるコード <img alt=” ■ ■ ” src=” ■ ■ ” width=” ■ ■ ” />の中に入っている言葉を簡単に説明しますね。

img:<>内に入ってるのが画像です、という意味。

alt:画像はこんな意味の画像(例えば「ラーメン次郎三田本店のラーメン」)

src:画像はこのURLのところに置いてあります

width:画像の横幅は○○ピクセルで表示してください

SEO(検索順位を上げること)に詳しい人から聞いたのですが、 altを入力すると、Googleさんが記事の内容を理解したり、イメージ検索するときに表示されるそうです。

大した手間じゃないので、毎回書けるといいですね。あとでいいやって思うとすっごい量になるので、マメにやりましょう。 altさん、日本語では代替テキストって呼ばれています。

スポンサーリンク

Speed Insightの評価・画質の変化を確認してみましょう

WebPを使った場合SpeedInsightの評価・画質の変化

じっさい、WebPにしたら画質はどうなるの?そして軽くしたのにページが重いままなんてことはないでしょうね?って気になりますよね。順番に確認していきましょう。

jpgやpngファイルからWebPに変換すると画質・容量はどう変わる?

jpgやpngファイルからWebPに変換すると画質・容量はどう変わる?

こちらはラーメンのjpg画像をWebPへ変換して、画質を下げた時の画質比較です。青い線の左が変換前、右が変換後です。パソコンから見ても、大して画質が変わらないと思いませんか?

jpgやpngファイルからWebPに変換すると画質・容量はどう変わる? jpgやpngファイルからWebPに変換すると画質・容量はどう変わる?

画像の重さは339KBから28KBに減ってます(-92%)

jpgやpngファイルからWebPに変換すると画質・容量はどう変わる?

色や線が多いpngってかなり重たいのですが、スマホからなら、画質をある程度落としちゃっても気になりません。PCから見ると粗いって思うかもしれませんが、細部まで必要な場合だけ画質を高めて、普段は画質低めでも問題ないでしょう。

jpgやpngファイルからWebPに変換すると画質・容量はどう変わる? jpgやpngファイルからWebPに変換すると画質・容量はどう変わる?

画像の重さは1.3MBから56KBに減っています(-96%)

Speedinsightの評価はどう変わる?

jpg.png.からWebPにするとSpeedinsightの評価は変わる?

はてなブログに3000文字、画像4枚(png形式1枚、jpg形式3枚)の記事を作って、画像をWebPに変換したらどれくらい評価変わるか試してみました。

jpg.png.からWebPにするとSpeedinsightの評価は変わる?jpg.png.からWebPにするとSpeedinsightの評価は変わる?

変換前の点数はだいぶ低いです。

jpg.png.からWebPにするとSpeedinsightの評価は変わる?jpg.png.からWebPにするとSpeedinsightの評価は変わる?

変換後はPCの点数がめっちゃ上がってます。

5分と間を空けずに測っているので、時間帯による点数差ではないはず。ここまで数字が変わるかはわかりませんが、少なからず上がるはず!ぜひ一度試してみて下さい。

スポンサーリンク

おまけ:GooglePhotoをおすすめする「もう一つの理由」

Googleフォトはワードプレスにも無料ブログにもおすすめ

ウェブページのスピードが上がると、離脱率が下がります。

Googleさんによると3秒たってもページが表示されないと、50%以上の人がページを閉じるそう。Googleアナリティクスで離脱率がやたら高いときには、ページが重い可能性もあります。

そして、他にも嬉しいことがあるんです。それは、容量。

無料ブログでも容量が気にならない

無料ブログでも容量が気にならない

ライブドアブログやはてなブログなどの無料ブログだと、一か月にアップロードできる画像の容量には限界があります。

自分でサーバー借りてワードプレスでブログを作っている人も、ブログやウェブページを続けていくと、どんどん画像が貯まっていきます。スマホの容量が一杯になるみたいな感じですね。

でも、Googleフォトを使えば容量に制限はありません。素晴らしすぎ。

おわりに

最後まで読んでいただき、ありがとうございます。

ブログを始めて1年半、HTMLを触って1年くらいなので、みなさんに役立つ記事になったのか、疑問ではあるものの、けっこう役立つ記事だったんじゃないかと思います。もしよかったらシェアしてください。

ウェブの画像をすべてWebPにするだけでアクセス伸びると思うんだよなぁ…

パリ旅行・パリ滞在に必ず役立つまとめがこちら。

治安・移動・デモ・郵便・おみやげ・マルシェ・クロワッサン・レストラン情報など役立つ記事をまとめました。気になることがある人はぜひ↓

役立つブログ記事まとめ


ノウハウ
スポンサーリンク

あなたへのおすすめ!

スポンサーリンク

あなたへのおすすめ!

役に立ったと思ったら、シェアしてくれると嬉しいです!
あざらし奥さんとパリ暮らし
タイトルとURLをコピーしました